前言
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
属性节点
<p id="p2" class="text-center" >点我看看</p>
那么它有2个属性节点：id="p2"和class="text-center" 和一个文本节点点我看看
| 方法 | 描述 |
|---|---|
| element.attributes | 返回一个元素的属性数组 |
| element.getAttributeNames() | 返回全部属性名称的数组 |
| element.getAttributeNode() | 返回指定节点 |
| element.getAttribute() | 返回指定的属性值。 |
示例
<div>
<p id="p2" class="text-center" >属性节点</p>
</div>
<script>
p2 = document.getElementById("p2");
console.log(p2.attributes); // NamednodeMap {0: id, 1: class, id: id, class: class, length: 2}
console.log(p2.getAttributeNames()); // ['id', 'class']
// 根据节点名称，获取属性节点
console.log(p2.getAttributeNode('id')); // id="p2"
console.log(p2.getAttributeNode('class')); // class="text-center"
// 根据节点名称，获取对应的值
console.log(p2.getAttribute('id')) // p2
console.log(p2.getAttribute('class')) // text-center
</script>
获取属性节点的值
<p id="p2" class="text-center" >点我看看</p>
它有的属性节点是：id="p2"和class="text-center"
属性节点是键值对的，可以根据属性名称，获取对应的值，比如根据id属性，获取到"p2", 根据class属性，获取到"text-center"
| 方法 | 描述 |
|---|---|
| element.getAttributeNames() | 返回全部属性名称的数组 |
| element.getAttribute() | 返回指定的属性值。 |
| element.nodeName | 获取节点名称 |
| element.tagName | 获取标签名称 |
| element.id | 获取 id 属性 |
| element.name | 获取 name 属性 |
| element.placeholder | 获取 placeholder 属性 |
| element.value | 获取 value 属性 |
示例
<div>
<p id="p2" class="text-center" >获取属性节点</p>
</div>
<script>
p2 = document.getElementById("p2");
console.log(p2.tagName); // P
console.log(p2.id); // p2
console.log(p2.className); // text-center
console.log(p2.nodeName); // P
</script>
input标签示例
<div>
<p id="p2" class="text-center" >获取属性节点</p>
<label for="user">用户名</label>
<input id="user" type="text" class="form-control" name="username" placeholder="请输入" value="yo yo">
</div>
<script>
p2 = document.getElementById("user");
console.log(p2.nodeName); // INPUT
console.log(p2.tagName); // INPUT
console.log(p2.id); // user
console.log(p2.type); // text
console.log(p2.className); // form-control
console.log(p2.name); // username
console.log(p2.placeholder); // 请输入
console.log(p2.value); // yo yo
</script>
或者可以用getAttribute() 获取指定的属性，传一个属性的名称参数
p2 = document.getElementById("user");
console.log(p2.getAttribute('id')); // user
console.log(p2.getAttribute('type')); // text
console.log(p2.getAttribute('class')); // form-control
console.log(p2.getAttribute('name')); // username
console.log(p2.getAttribute('placeholder')); // 请输入
console.log(p2.getAttribute('value')); // yo yo
修改元素属性节点
修改元素属性节点的值跟前面获取属性方法一样，给属性重新复制即可
<div>
<p id="p2" class="text-center" >修改属性节点</p>
<label for="user">用户名</label>
<input id="user" type="text" class="form-control" name="username" placeholder="请输入" value="yo yo">
</div>
<script>
p2 = document.getElementById("user");
// 修改属性
p2.type = 'password';
p2.className = 'test';
p2.name = 'password';
p2.value = 'hello';
console.log(p2.type); // password
console.log(p2.className); // test
console.log(p2.name); // password
console.log(p2.value); // hello
</script>
p2 = document.getElementById("user");
// 修改属性
p2.setAttribute('type', 'password');
p2.setAttribute('class', 'test');
p2.setAttribute('name', 'password');
p2.setAttribute('value', 'hello');
console.log(p2.type); // password
console.log(p2.className); // test
console.log(p2.name); // password
console.log(p2.value); // hello
总结
重点掌握2个方法
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
