javascript获取节点和元素

Posted 2021-01-17 zhaozhaoli

html DOM 节点

在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :

• 文档本身就是一个文档对象
• 所有 HTML 元素都是元素节点
• 所有 HTML 属性都是属性节点
• 插入到 HTML 元素文本是文本节点
• 注释是注释节点

1 <div>
2         hello
3         <p>world</p>
4         <h1>you are cool</h1>
5         yes
6     </div>

hello和yes是文本节点，p标签和h1标签是元素节点

 

javascript：

children：返回元素的子元素的集合

element.children

console.log打印出p和h1两个元素节点

HTMLCollection(2) [p, h1]

childNodes:返回元素的一个子节点的数组

document.querySelector(‘div‘).childNodes

console.log打印出五个节点，p和h1中间的text是因为回车之后两个标签之间有空白，把空白删掉，text就没有了

NodeList(5) [text, p, text, h1, text]

firstChild：firstChild 属性返回被选节点的第一个子节点

lastChild: 返回的最后一个子元素

nextSibling: 返回该元素紧跟的一个节点

parentNode:返回元素的父节点