js节点操作&自定义属性

    科技2025-06-19  4

    JS自定义属性和节点操作

    1.节点是什么?

    所谓的节点操作指的是:网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。所有 HTML 元素(节点)均可被修改,也可以创建或删除。

    节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。注:nodeType, 元素节点的nodeType的值是1属性节点的值是2文本节点值是3,文本节点包含文字,空格换行等

    2.节点层级

    所谓的节点层级,表示的是节点层次关系,根据他们的名字你也能很好的理解,父子节点,兄弟节点返回值是:父元素节点,如果找不到返回null。

    注意: 返回的是最近的一个父节点

    `

    <div class="box"> <span class="erweima">×</span> </div> </div> <script> // 1. 父节点 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box'); // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null console.log(erweima.parentNode); </script>`

    3.节点属性操作

    属性节点的特征:

    1.nodeType值为11

    2.parentNode值为null

    3.在HTML中不包含子元素

    注意:

    (1)尽管属性也是节点,但却不认为是DOM文档树的一部分。

    (2)开发人员常用getAttribute()、setAttribute( )、removeAttribute( )等方法来操作属性。

    4.1 设置属性值

    方法:

    (1)createAttribute(name)+value+setAttributeNode(属性节点)

    (2)setArrtibute(name,value)

    (3)点方法 :DOM节点.name=“value”;《特殊属性为,class->className,for->htmlFor》

    实例:

    4.2 读取属性值

    方法:

    (1)element.attributes[“name”].value

    (2)element.getAttributeNode(“name”).value

    (3)lement.getAttribute(“name”); 返回的是字符串

    (4)element.name; 返回字符串;<通过点方法访问,特殊属性:class->className,for->htmlFor>

    (5)只能用来读取class的属性值。element.classList; 返回属性列表;

    实例:

    注意:

    Attribute(),点方法得到的属性值是字符串类型,

    当有多个class属性值时,需要利用split()函数进行字符串切割;

    当只有一个class属性值时,element.clsaaList返回值仍旧是数组列表,需要加索引取值:element.classList[0];

    4.3 删除某个属性

    方法:

    removeAttribute(name);

    实例:

    4.自定义属性(data-*)的操作

    添加自定义属性方法:

    (1)element.setAttribute("data-*);

    (2)element.dataset.name=“value”

    读取自定义属性的方法:

    (1)element.getAttribute(“name”);

    (2) element.dataset.name;

    Processed: 0.015, SQL: 8