JavaScript DOM节点

最新推荐文章于 2022-09-19 15:00:09 发布

乘风破浪_993

最新推荐文章于 2022-09-19 15:00:09 发布

阅读量77

点赞数

分类专栏：前端Web学习笔记

本文链接：https://blog.csdn.net/weixin_45846840/article/details/109522682

版权

前端Web学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM节点

节点类型
1. 元素节点
2. 属性节点
3. 文本节点
4. 注释节点
5. document
6. DocumentFragment
获取节点类型
nodeType
查看元素节点
- document代表整个文档
- document.getElmentByld() //元素id在ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素
- .getElementsByTagName( ) //标签名拿出的时类数组，包含全部标签
- .getElementsByName() //只有部分标签name可生效(表单，表单元素,img, iframe)
- .getElementsByClassName() 类名；ie8和ie8以下的ie版本中没有，可以多个class一起
- .querySelector( ) //css选择器在ie7和ie7以下的版本中没有选择出来的标签为副本，静态
- .quertSelectorAll( ) //css选择器在ie7和ie7以下版本中没有
遍历节点树：
- parentNode ->父节点(最顶端的parentNode为#document)
- childNodes ->子节点们
- firstChild->第一个子节点
- lastChild ->最后一个子节点
- nextSibling ->后一个兄弟节点previousSibling ->前一个兄弟节点
基于元素节点树的遍历
- parentElement ->返回当前元素的父元素节点（IE不兼容）
- children ->只返回当前元素的元素子节点
- node.childElementCount === node.children.length当前元素子节点的子元素
- firstElementChild ->返回的是第一个元素节点（IE不兼容）
- lastElementChild ->返回的是最后一个元素节点（IE不兼容）
- nextElementSibling/previousElementSibling ->返回后一个/前一个兄弟元素
注：元素（element)和节点(node)的区别
节点的四个属性
- node Name 元素的标签名，以大写形式表示，只读
- nodeValue Text节点或Comment(注释)节点的文本内容
- nodeType 该节点的类型，只读；如果节点是元素节点，则 nodeType 属性将返回 1。如果节点是属性节点，则 nodeType 属性将返回 2。
- attributes Element节点的属性集合
节点的一个方法 Node.hasChildNodes();

getElementById方法定义在Document.prototype上，即Element1节点上不能使用。
getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用（xml document，Element）
getElementByTagName方法定义了在Document.prototype和Element.prototype上
HTMLDocument.prototype上定义了一些常用属性，body，head，分别指代HTML文档中的<body><head>标签
Document.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，它总指代<html>元素 document.documentElement
getElementsByClassName、querySelectorAll、querySelector在Document.prototype，Element.prototype类中均有定义