#### 第三章: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
```