归纳分享DOM节点属性知识点-猿码集

1. DOM节点属性概述

DOM(document object model)是一种将HTML和XML文档作为文件对象的API(application programming interface)，它将文档看作一个节点树，HTML和XML文档中的每个元素，属性，文本都是一个节点，开发人员通过使用DOM提供的API操作节点，实现对HTML和XML文档的增删改查。

2. 节点属性的种类

2.1 节点类型属性(nodeType)

DOM节点的nodeType属性是节点类型的一个表示，它是一个只读的数字值，不同类型的节点的nodeType值是不同的。以下是nodeType值对应的节点类型：

1: 元素节点(如<div>, <p>等)

2: 属性节点(如class, id等)

3: 文本节点(包含在元素节点内的文本)

8: 注释节点

9: 根节点

11: 文档片段

开发者在使用DOM API操作节点时，要保证正确的nodeType值，以避免错误的操作或解析。

2.2 节点值属性(nodeValue)

DOM节点的nodeValue属性是节点的值，包含在文本节点和属性节点中。


const myNode = document.createElement('div');
myNode.innerHTML = 'This is a test';
console.log(myNode.firstChild.nodeValue); // "This is a "
console.log(myNode.lastChild.firstChild.nodeValue); // "test"

2.3 节点名称属性(nodeName)

DOM节点的nodeName属性是节点的名称，元素节点的nodeName属性是元素的标签名，如div，p等。


const myNode = document.createElement('div');
console.log(myNode.nodeName); // "DIV"

2.4 节点子节点属性(children)

DOM节点的children属性是元素节点的所有子元素的一个HTMLCollection对象，该对象表现为数组。HTMLCollection对象只包含元素节点。


const myNode = document.createElement('div');
myNode.innerHTML = '<p>This is a <strong>test</strong></p>';
console.log(myNode.children.length); // 1
console.log(myNode.children[0].nodeName); // "P"
console.log(myNode.children[0].children.length); // 1
console.log(myNode.children[0].children[0].nodeName); // "STRONG"

2.5 节点父节点属性(parentNode)

DOM节点的parentNode属性是节点的父元素节点，若父节点不存在，则该属性返回null。


const myNode = document.createElement('div');
myNode.innerHTML = '<p>This is a test</p>';
console.log(myNode.children[0].parentNode.nodeName); // "DIV"

2.6 节点前一个相邻节点属性(previousSibling)

DOM节点的previousSibling属性是节点在节点树中的前一个相邻节点，若前一个相邻节点不存在，则该属性返回null。


const myNode = document.createElement('div');
myNode.innerHTML = '<p>This is a <strong>test</strong></p>';
console.log(myNode.children[0].previousSibling); // null

2.7 节点后一个相邻节点属性(nextSibling)

DOM节点的nextSibling属性是节点在节点树中的后一个相邻节点，若后一个相邻节点不存在，则该属性返回null。


const myNode = document.createElement('div');
myNode.innerHTML = '<p>This is a <strong>test</strong></p>';
console.log(myNode.children[0].nextSibling); // null

2.8 元素classList属性

DOM元素节点的classList属性是一个只读的DOMTokenList对象，该对象是元素的类名的集合，包含了多个方法，可以方便元素的类名操作。

classList提供了add、remove、toggle、contains等方法，用于添加、移除、切换、判断类名是否存在。


const myNode = document.createElement('div');
myNode.classList.add('test');
myNode.classList.add('test2');
console.log(myNode.classList.contains('test')); // true
console.log(myNode.classList.contains('test3')); // false
myNode.classList.remove('test');
myNode.classList.toggle('test2');
console.log(myNode.classList.contains('test')); // false
console.log(myNode.classList.contains('test2')); // false

2.9 元素getAttribute属性与元素setAttribute属性

DOM元素节点的getAttribute方法用于获取元素的指定属性的值，setAttribute方法用于设置指定属性的值。需要注意的是，属性名不需要加中括号。


const myNode = document.createElement('div');
myNode.setAttribute('class', 'test');
console.log(myNode.getAttribute('class')); // "test"
myNode.setAttribute('data-id', '123');
console.log(myNode.getAttribute('data-id')); // "123"

2.10 元素style属性

DOM元素节点的style属性用于获取元素的内联样式的属性值，也可用于设置元素的内联样式。


const myNode = document.createElement('div');
myNode.style.backgroundColor = 'red';
console.log(myNode.style.backgroundColor); // "red"

3. 小结

以上就是DOM节点属性的相关知识，包含了节点类型、节点值、节点名称、节点子节点、节点父节点、节点前一个相邻节点、节点后一个相邻节点、元素classList属性、元素getAttribute属性与元素setAttribute属性、元素style属性等相关内容。在操作DOM节点时，使用这些属性可以方便地获取节点相关信息，方便开发者进行相应的节点操作。

归纳分享DOM节点属性知识点