dom数据和页面数据（原生前端之DOM属性操作）
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()是元素的方法用于设置元素的属性的属性值，参数为属性名和属性值。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
