Java教程

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

本文主要是介绍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 获取和修改属性节点的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!