设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
获取节点的属性值
方式1和方式2的区别在于，前者是元素对象直接操作标签，后者是用元素对象的方法获取
方式1：
元素节点.属性名;
元素节点[属性名];
方式2：
元素节点.getAttribute("属性名称");
代码示例：
<button type="submit" value="HTML" class="one">HTML</button>
<script type="text/javascript">
var btn = document.getElementsByTagName("button")[0];
console.log(btn.value);
console.log(btn.className); //注意，是className，不是class
console.log(btn["value"]);
console.log(btn.getAttribute("class")); //注意，是class，不是className
</script>
修改节点的属性值
方式1举例：（设置节点的属性值）
btn.value = '按钮';
方式2：
元素节点.setAttribute("属性名", "新的属性值");
btn.setAttribute('value', '点击');
删除节点的属性
格式：
元素节点.removeAttribute(属性名);
举例：（删除节点的属性）
btn.removeAttribute("class");
元素节点直接操作和用方法操作的区别
两种方式的区别
- 如果是节点的
"原始属性"，如普通标签的class属性，style属性，img 标签的src属性、a 标签的href属性，两种方式无区别，可以混用 - 如果是
非原始属性，方式1的元素节点.属性和元素节点[属性]，绑定的属性值不会出现在标签上 - 如果是
非原始属性，方式2的get/set/removeAttribut，绑定的属性值会出现在标签上 - 这两种方式不能交换使用，get值和set值必须使用同一种方式
代码示例
<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>
var div = document.getElementById("box");
//采用方式一进行set
div.aaaa = "1111";
console.log(div.aaaa); //打印结果：1111。可以打印出来，但是不会出现在标签上
//采用方式二进行set
div.setAttribute("bbbb","2222"); //bbbb作为新增的属性，会出现在标签上
console.log(div.getAttribute("aaaa")); //打印结果：null。因为方式一的set，无法采用方式二进行get。
console.log(div.bbbb); //打印结果：undefined。因为方式二的set，无法采用方式一进行get。
</script>
</body>
innerHTML和innerText
获取内容：
innerHTML会获取元素节点中的所有内容（包括标签）innerText只会获取元素节点中的文本（不包含标签）
代码示例：
修改内容：
innerHTML和innerText都会修改元素节点中的所有内容innerHTML会识别修改内容中的标签，innerText会将修改内容中的标签当做文本
665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
