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

水深无声 2021-07-26 21:55 307阅读 0赞

# 如何理解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()等方法添加到文档中。