如何理解DOM中的节点Node和元素Element

如何理解DOM中的节点Node和元素Element

DOM利用多层次节点描述html文档即树结构

html中的所有内容都可以用节点来描述，总共12种节点元素element仅仅是使用比较频繁的节点。其余常见的节点有：

• 属性节点–>html 元素的属性
• 文本节点–>html元素内的文本（标签内的文字）
• 注释节点–>注释内容

Node和Element

Element是可以有属性和子节点的Node节点

Node属性和元素特性

每个Node节点包括如下属性：

• NodeTyp–>节点类型（只能是12种节点之一）
• NodeName–>节点名称
• NodeValue–>节点值(视情况而定，没有则为Null)
  Node属性均是可读可写

每个元素有如下特性：

• id–>元素的唯一标识（就是我们平常使用的id）
• title–>附加信息（鼠标放上去出提示的那种）
• lang–>语言代码（很少使用）
• dir–>文本方向（ltr:从左到右，rtl:从右到左。也很少使用）
• className–>样式名称（就是指定的class，这里是因为关键字冲突）
  元素属性也是可读可写

节点树关系和元素间关系

节点树关系：

• 父节点–>node.parentNode
• 子节点集合–>node.childNodes
• 第一个子节点–>node.firstChild
• 最后一个子节点–>node.lastChild
• 前一个兄弟节点–>node.previousSibling
• 后一个兄弟节点–>node.nextSibling
  找不到对应节点则返回null

元素间关系：

• 父元素节点–>element.parentElement
• 子元素个数–>element.childElementCount
• 子元素结合–>element.chidren
• 第一个子元素–>element.firtElementChild
• 最后一个子元素–>element.lastElementChild
• 前一个兄弟元素–>element.previousElementSibling
• 后一个兄弟元素–>element.nextElementSibling

创建元素并添加到文档中

使用createElement(tagName)创建元素，然后使用操作节点的appendChild()等方法添加到文档中。