24.2、获取DOM节点的方式
2022-04-13 09:16:57 0 举报AI智能生成
JS
作者其他创作
大纲/内容
所有页面中所呈现的内容，都是DOM文档中的一个节点（node）
元素标签是元素节点、注释的内容是注释节点、
文本内容是文本节点、document是文档节点...
文本内容是文本节点、document是文档节点...
节点类型
文档节点
document
重要属性
nodeType（节点类型）
9
nodeName（节点名字）
“#document”
nodeValue（节点文本内容）
null
元素节点
元素标签
重要属性
nodeType
1
nodeName
“大写标签名”
nodeValue
null
文本节点
文字、标签之间的空格和换行也被当作文本节点
重要属性
nodeType
3
nodeName
“#text”
nodeValue
文本内容
注释节点
注释内容
重要属性
nodeType
8
nodeName
“#comment”
nodeValue
注释内容
=========================我是分隔符==========================
属性
描述节点和节点之间的关系属性
基于这些属性可以获取到指定的节点
[CONTAINER].childNodes
获取当前容器中所有的子节点
包含各种类型的节点
获取到的是一个节点集合，包含容器中的所有类型节点（空格换行是文本节点）
在IE6～8中，不会把空格和换行当作文本节点（不认为这是节点）
[CONTAINER].children
获取当前容器中所有的元素子节点
获取的是一个元素集合，只有元素节点
只有元素标签的，在IE低版本浏览器中，也会把注释当作元素节点
[NODE].parentNode
获取某一个节点的父节点
[NODE].previousSibling
获取某一个节点的上一个哥哥节点
[NODE].previousElementSibling
获取某一个节点的上一个哥哥元素节点（不兼容IE低版本浏览器）
[CONTAINER].nextSibling
获取某一个节点的下一个弟弟节点
[CONTAINER].nextElementSibling
获取某一个节点的下一个弟弟元素节点（不兼容IE低版本）
[CONTAINER].firstChild
获取容器中第一个子节点
[CONTAINER].firstElementChild
获取容器中第一个元素子节点（不兼容IE低版本）
[CONTAINER].lastChild
获取容器中最后一个字节点
[CONTAINER].lastElementChild
获取容器中最后一个元素子节点（不兼容IE低版本）
所有方法和属性，都是为了快速获取到我们想要操作的DOM元素或者节点的
0 条评论
下一页
