JavaScript與HTML交互最主要的是使用DOM進行控制HTML的文檔信息。對於具有全標籤結構的HTML元素可以分爲屬性和文本兩部分，下面我們將對屬性這一部分進行詳細的講解。話先不多說先舉個栗子壓壓驚。
<!DOCTYPE html>
<html>
<head>
<title>設置讀取元素的屬性</title>
<meta charset="utf-8">
<style>
input[type="checkbox"]
{
color: crimson;
}
input[type="button"]
{
background-color: black;
color: blanchedalmond;
}
</style>
</head>
<body>
<div>
<input type="checkbox" id="checkbox" checked data-test="just do it" data-value="have fun">
<pre id="info"></pre>
<!--input type="button" onclick="display()" value="顯示信息"-->
<input type="button" onclick="UserSet()" value="顯示自定義屬性">
<input type="button" onclick="check()" value="顯示checked的屬性值">
<input type="button" onclick="has()" value="判斷是否有checked的屬性值">
<input type="button" onclick="removecheck()" value="刪除checked的屬性值">
<input type="button" onclick="removeuser()" value="刪除test的屬性值">
<input type="button" onclick="setcheck()" value="設置checked的屬性值">
<input type="button" onclick="setuser()" value="設置用戶自定義的屬性值">
</div>
<script>
var dim=document.getElementById("checkbox");
var info=document.getElementById("info");
function display()
{
info.innerHTML="當前元素具有的屬性的數量爲:"+dim.attributes.length+"<br>";
for(var i=0;i<dim.attributes.length;i++)
{
info.innerHTML+=`第${parseInt(i+1)} 個屬性爲:${dim.attributes[i].name} 屬性值爲：${dim.attributes[i].value}<br>`;
}
}
function UserSet(){
let value="",n=0;
value=objp(dim.dataset);
console.log(value);
window.alert(`自定義的用戶數據爲:\n${value}`)
}
function objp(obj)
{
let str="";
for(let data in obj)
{
if(Object.prototype.toString.call(obj[data])==='[object Object]')
{
str+=`屬性名${data}\n`
str+=objp(obj[data]);
}
else
{
str+=`屬性名爲：${data} 屬性值爲 ${obj[data]} \n`;
}
}
return str;
}
function check()
{
window.alert(`當前的checked的屬性值爲:${dim.getAttribute('checked')}`);
}
function has()
{
window.alert(`是否具有checked屬性:${dim.hasAttribute('checked')}`);
}
function removecheck()
{
dim.removeAttribute("checked");
display();
}
function removeuser()
{
dim.removeAttribute("data-test");
display();
}
function setcheck()
{
dim.setAttribute("checked","checked");
display();
}
function setuser()
{
dim.setAttribute("data-haha","hahahahh");
display();
}
display();
</script>
</body>
</html>
這個程序的主要思想是使用DOM提供的函數針對HTML元素的屬性進行控制。
id爲checkbox的標籤是一個複選框。
id爲info的標籤將顯示覆選框這個元素的屬性名稱和屬性值。
下方有7個按鈕，通過點擊按鈕進行不同的操作：
顯示自定義屬性按鈕用於顯示用戶自定義的屬性的屬性名稱和屬性值
顯示checked的屬性值按鈕用於顯示覆選框元素的checked屬性的屬性值
判斷是否有checked的屬性值用於顯示覆選框元素是否具有checked這個屬性
刪除checked的屬性值按鈕用於刪除複選框元素的checked屬性值
刪除test的屬性值按鈕用於刪除複選框用戶自定義的test屬性。
設置checked的屬性值按鈕用於設置複選框的checked屬性的屬性值爲checked
設置用戶自定義的屬性值按鈕用於設置複選框的用戶自定義屬性haha的值爲hahahahh
整體的效果圖如下
上述的操作使用針對元素屬性的6個屬性/方法
（1）attributes是元素的屬性返回元素具有的屬性和屬性值，注意這個返回值並不是數組
（2）dataset是元素的屬性返回元素中用戶自定義的屬性和屬性值
（3）getAttribute()是元素的方法用於獲取指定屬性的屬性值,參數爲屬性名
（4）hasAttribute()是元素的方法用於獲取元素中是否存在此屬性，參數爲屬性名
（5）removeAttribute()是元素的方法用於刪除指定元素的屬性，參數爲屬性名
（6）setAttribute()是元素的方法用於設置元素的屬性的屬性值，參數爲屬性名和屬性值。