JavaScript 学习-32.HTML DOM 获取和修改属性节点
2022/5/29 1:20:00
本文主要是介绍JavaScript 学习-32.HTML DOM 获取和修改属性节点,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
属性节点
比如有一个p标签元素节点
<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标签元素节点
<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>
或者可以用setAttribute() 设置指定的属性名称
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个方法
- getAttribute() 获取指定属性名称的值
- setAttribute() 设置指定的属性名称对应的值
也可以通过element.属性名称
获取对应的值
这篇关于JavaScript 学习-32.HTML DOM 获取和修改属性节点的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?