JavaScript 学习-32.HTML DOM 获取和修改属性节点

2022-05-28 19:35:49 阅读：145 来源： 互联网

标签：p2 console log DOM 32 JavaScript id 节点属性

前言

根据 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.属性名称 获取对应的值

标签：p2,console,log,DOM,32,JavaScript,id,节点,属性
来源： https://www.cnblogs.com/yoyoketang/p/16321337.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript 学习-32.HTML DOM 获取和修改属性节点

前言

属性节点

获取属性节点的值

修改元素属性节点

总结