DOM节点详解

最新推荐文章于 2022-05-18 08:24:02 发布

约嫦娥烤兔子

最新推荐文章于 2022-05-18 08:24:02 发布

阅读量327

点赞数 2

分类专栏： HTML+CSS 文章标签： DOM 节点树

本文链接：https://blog.csdn.net/qq_41362025/article/details/81603825

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML 文档中的所有内容都是节点：整个文档是一个文档节点；每个 HTML 元素是元素节点；HTML 元素内的文本是文本节点；每个 HTML 属性是属性节点；注释是注释节点。

节点树的根节点为<html>，节点树之间的关系有父，子，同胞。

一些 DOM 对象属性：

innerHTML     节点（元素）的文本值
parentNode    节点（元素）的父节点
childNodes    节点（元素）的子节点（firstChild：第一个子节点，lastChild：最后一个子节点）
attributes    节点（元素）的属性节点
nodeName      节点（元素）的名称，只读。（元素节点的 nodeName 与标签名相同，属性节点的 nodeName         与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document）
nodeValue     节点（元素）的值（元素节点的 nodeValue 是 undefined 或 null，文本节点的 nodeValue    是文本本身，属性节点的 nodeValue 是属性值）
nodeType      节点（元素）的类型，只读。（元素：1，  属性：2，  文本：3，  注释：8，  文档：9）

一些 DOM 对象方法：

getElementById() 	 返回带有指定ID的元素。
getElementsByTagName()   返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 	         把新的子节点添加到指定节点。
removeChild() 	         删除子节点。
replaceChild() 	         替换子节点。
insertBefore() 	         在指定的子节点前面插入新的子节点。
createAttribute() 	 创建属性节点。
createElement() 	 创建元素节点。
createTextNode() 	 创建文本节点。
getAttribute() 	         返回指定的属性值。
setAttribute()         	 把指定属性设置或修改为指定的值。

本人为JS实习生一枚，不断学习，不断进步，欢迎各位前辈批评指教。