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

Posted 2022-05-30 上海-悠悠

前言

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