DOM是一棵树（tree）

最新推荐文章于 2023-01-30 14:43:29 发布

weixin_33897722

最新推荐文章于 2023-01-30 14:43:29 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ae3f30e51882567161a5162

本文详细介绍了文档对象模型（DOM）的概念及组成，包括各种类型的节点如Element、TextNode等，并阐述了节点之间的关系及其常用属性和方法，例如如何获取或操作子节点、父节点等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全称document object mode 文档对象模型 node

Document html 特殊的Element Element 元素标签 meta title script h1 h2 p textElement 文本节点


                      node
                       |
      _____________________________________
      |        |               |          |         
  Element    TextElement    Document    commit       
 （元素）     （文本）   (特殊的Element)    (注释)
 
复制代码

node的接口

childNodes 所有子节点
children 获取所有的子标签 不会获取回车

firstChild lastChild

firstElementChild 第一个元素的儿子
lastElementChild 最后一个元素的儿子

previousSibling '上一个节点' nextSibling '下一个子节点'

nodeName '节点的名称 '

nodeType '节点类型'

nodeValue '元素几点的值'

innerText '获取文本内容' 不会获取 script style 内的内容 textContent ' 获取文本内容'

parentElement '父元素' parentNode '父节点'

outerText '' ownerDocument'我是属于哪个Document'

2.方法(如果一个属性是函数，那么这个属性就叫做方法方法就是函数的属性)

appendChild() 把元素/文本作为儿子 cloneNode() 克隆一个节点深拷贝/浅拷贝

contains() //一个元素是否包含另一个元素
hasChildNodes() //这个元素是否有儿子会返回一个布尔
insertBefore() // 就是把一个东西插入到一个东西的前边
isEqualNode() //是否是相同的节点看起来相等
isSameNode() //要完全相等
removeChild() // 删除节点 //只是从页面也出
replaceChild // 交换一个儿子制造一个替换一个
normalize()