DOM节点以及节点之间的关系

三大属性

所有的Node(元素、属性、文本)对象都是document的 子代节点

nodeType 节点类型(number)

document  9
element  1
attrbute  2
text  3

节点名 (nodeName)

document -> #document
标签元素 -> 全大写的标签名
属性名 -> attitude
文本节点 -> #text

节点值 (nodeValue)

document	null
标签元素		null
属性值		attribute
文本的内容	text

查找三个元素,直接用(window)

document.documentElement -> html
document.head -> head
document.body -> body

节点间关系

节点关系:

1.父子关系
node.parentNode		获得node的父节点
node.childNodes		获得node的直接子代节点
node.firstChild		获得node下的第一个子节点
node.lastChild		获得node下最后一个子节点
2.兄弟关系
node.previousSibling	返回当前节点的前一个兄弟节点
node.nextSibling	返回当前节点的下一个兄弟节点

节点树:包含了所有节点(元素,文本)完整的结构

元素树:仅包含元素节点的树形结构

节点元素关系

1.父子关系
elem.parentElement	返回父元素对象
elem.children	返回子元素对象集合IE8支持
elem.firstElementChild	返回第一个子元素对象
elem.lastElementChild	返回最后一个子元素对象
2.兄弟关系
elem.previousElementSibling		返回当前元素的前一个兄弟元秦
elem.nextElementSibling		返回当前元素的下一个兄弟元素
发布了13 篇原创文章 · 获赞 6 · 访问量 304

猜你喜欢

转载自blog.csdn.net/qq_44624386/article/details/104876912