#### 第三章：JavaScript操作DOM对象

##### DOM概述：

```
DOM：Document Object Model（文档对象模型）
```

```js
DOM Core 并不专属于JavaScript,任何一种支持DOM的程序设计语言（如python）都可以使用它。
JavaScript中的getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法都是DOM Core 的组成部分。而且它的用途并非用于仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如：XML。
```

##### 对象之间的关系：

```
根节点、父节点和子节点
```

##### DOM节点

```js
节点：Node——构成HTML文档最基本的单元。

节点分为四类
        文档节点(Document)：整个HTML文档的相关信息被封装后得到的对象。
        元素节点(Element)：构成HTML文档最基本的元素，对应HTML文档中的HTML标签
        文本节点(Text)：HTML标签中的文本内容
        属性节点(Attribute)：元素的属性
```

```
示例：<p id="id">hello JavaScript</p>

id="id":属性节点
hello JavaScript:文本节点
<p id="id">hello JavaScript</p>:元素节点
```

##### 访问节点

```js
使用getElement系列方法访问指定的节点
```

| getElementById()           | 通过id访问节点       |
| -------------------------- | -------------------- |
| **getElementsByName()**    | **通过类名访问节点** |
| **getElementsByTagName()** | **通过标签访问节点** |

##### 根据层次关系访问节点2-1

```
节点属性（在整个文档范围内查询所有的节点，包括空格）！
```

| 属性名称            | 描述                                                         |
| ------------------- | ------------------------------------------------------------ |
| **parentNode**      | **返回节点的父节点**                                         |
| **childNodes **     | **返回子节点集合，childNodes[i]**                            |
| **firstChild**      | **返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点** |
| **lastChild **      | **返回节点的最后一个子节点**                                 |
| **nextSibling**     | **下一个节点**                                               |
| **previousSibling** | **上一个节点**                                               |

##### 根据层次关系访问节点2-2

```js
element属性（在具体元素节点范围内查询）
```

| 属性名称                    | **描述**                                                     |
| --------------------------- | ------------------------------------------------------------ |
| **firstElementChild **      | **返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点** |
| **lastElementChild **       | **返回节点的最后一个子节点**                                 |
| **nextElementSibling**      | **下一个节点**                                               |
| **previousElementSibling ** | **上一个节点**                                               |

```js
示例：
    oPre = oParent.previousElementSibling || oParent.previousSibling  
```

##### 节点信息

```js
    nodeName：节点名称
    nodeValue：节点值
    nodeType：节点类型
```

| 节点元素         | NodeType值 |
| ---------------- | ---------- |
| **元素element**  | **1**      |
| **属性attr**     | **2**      |
| **文本text**     | **3**      |
| **注释comments** | **8**      |
| **文档document** | **9**      |

#####     操作节点

```
        操作节点的属性
        创建和插入节点
        删除和替换节点
        操作节点样式
        获取元素的样式
```

##### 操作节点的属性

```js
语法：
    getAttribute(“属性名”)            //获取属性值
    setAttribute(“属性名”,“属性值”)    //设置属性值
```

##### 创建和插入节点

| 名称                        | 描述                                    |
| --------------------------- | --------------------------------------- |
| **createElement( tagName)** | **创建一个标签名为tagName的新元素节点** |
| **A.appendChild( B)**       | **把B节点追加至A节点的末尾**            |
| **insertBefore( A,B )**     | **把A节点插入到B节点之前**              |
| **cloneNode(deep)**         | **复制某个指定的节点**                  |

```js
注意：
            cloneNode(a)方法接受一个布尔参数,表示是否深拷贝
            true:执行深拷贝,复制本节点以及整个子节点树. 
            false:执行浅拷贝.只复制节点本身. 
```

##### 删除和替换节点

| 名称                                        | 描述                           |
| ------------------------------------------- | ------------------------------ |
| **removeChild( node)**                      | **删除指定的节点**             |
| **replaceChild( newNode, oldNode)属性attr** | **用其他的节点替换指定的节点** |

##### 操作节点css样式

```js
可以改变css样式的属性：
        1：style属性
        2：className属性
```

##### style属性

```js
语法：
    HTML元素.style.样式属性＝"值"
示例：
    document.getElementById("titles").style.color="#ff0000"; 
```

##### className属性

```js
语法：
    HTML元素.className="类名"
示例:
    function over(){
         document.getElementById("cart").className="cartOver";
     }
```

##### 获取元素的样式

```js
语法：
    HTML元素.style.样式属性;
示例：
    alert(document.getElementById("cartList").display);
    
语法：
    document.defaultView.getComputedStyle(元素,null).属性;
示例：
    var cartList=document.getElementById("cartList");
            alert(document.defaultView.getComputedStyle(cartList,null).display);

语法：
    HTML元素. currentStyle.样式属性;
示例：
    alert(document.getElementById("cartList").currentStyle.display);//兼容浏览器
```

##### HTML中元素属性的应用

| 属性             | 描述                                                       |
| ---------------- | ---------------------------------------------------------- |
| **offsetLeft**   | **返回当前元素左边界到它上级元素的左边界的距离，只读属性** |
| **offsetTop**    | **返回当前元素上边界到它上级元素的上边界的距离，只读属性** |
| **offsetHeight** | **返回元素的高度**                                         |
| **offsetWidth**  | **返回元素的宽度**                                         |
| **offsetParent** | **返回元素的偏移容器，即对最近的动态定位的包含元素的引用** |
| **scrollTop**    | **返回匹配元素的滚动条的垂直位置**                         |
| **scrollLeft**   | **返回匹配元素的滚动条的水平位置**                         |
| **clientWidth**  | **返回元素的可见宽度**                                     |
| **clientHeight** | **返回元素的可见高度**                                     |

```js
元素属性应用：
    document.documentElement.scrollTop;
    document.documentElement.scrollLeft;//标准浏览器
或者
    document.body.scrollTop;
    document.body.scrollLeft;//Chrome

var sTop=document.documentElement.scrollTop||document.body.scrollTop;
```

##### JavaScript操作DOM对象总结

```js
分类：DOM Core、HTML-DOM、XML-DOM
节点和节点关系：根节点、父节点、子节点、兄弟节点
访问节点
        1：getElement系列访问
        2：层次关系访问
                parentNode、childNodes
                firstChild、lastChild
                nextSibling、previousSibling
节点信息：nodeName、nodeValue、nodeType

操作节点的属性
                 getAttribute("属性名")
                 setAttribute("属性名","属性值")

创建和插入节点
                createElement( tagName)
                A.appendChild( B)、insertBefore( A,B )
                cloneNode(deep)

删除和替换节点：    removeChild(N)、replaceChild(newN,oldN)

操作节点样式：        style属性、className属性

获取元素的样式：    currentStyle
                 getComputedStyle                
```