js学习--DOM操作详解大全 前奏（认识DOM）
一 . 节点属性
DOM 是树型结构，相应的，可以通过一些节点属性来遍历节点树：
| 方法 | 说明 |
|---|---|
| nodeName | 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。 |
| nodeType | 节点的类型，返回值：1，元素节点；2，属性节点；3，文本节点。nodeType 是只读的。 |
| nodeValue | 节点的值，返回一个字符串，指示这个节点的值。元素节点返回 null，属性节点返回属性值，文本节点返回文本。nodeValue 可读可写，这是对元素节点不能写。一般只用于设置文本节点的值。 |
| childNodes | 返回子节点数组。文本和属性节点的 childNodes 永远是 null。可以用 hasChildNodes 来判断是否有子节点。只读属性。 |
| firstChild | 返回第一个子节点。文本和属性节点没有子节点，会返回一个空数组。对于元素节点，若是没有子节点会返回 null。有一个等价式：firstChild = childNodes[0]。 |
| lastChild | 返回最后一个子节点。返回值同 firstChild，,三方待遇参考上面。有一个等价式：lastChide = childNodes[childNodes.length - 1]。 |
| nextSibling | 返回节点的下一个兄弟节点。如果没有下一个兄弟节点的话，返回 null。只读属性。 |
| previousSibling | 返回节点的上一个兄弟节点。同上。 |
| parentNode | 返回节点的父节点。document.parentNode 返回 null，其他的情况下都将返回一个元素节点，因为只有元素节点拥有子节点，出了 document 外任何节点都拥有父节点。只读属性。 |
二. 节点方法
还记得下面这些我们用过的方法么，他们都是 DOM 的方法：
| 方法 | 说明 |
|---|---|
| write() | 写入内容到文档 |
| getElementById() | 返回带有指定 ID 的元素 |
| getElementsByTagName() | 返回带有指定标签名的所有元素 |
| getElementsByClassName() | 返回包含指定类名的所有元素的一个列表 |
| get/setAttribute('key', 'value') | 返回或设置属性节点。 |
这些方法的前面要加上 document 对象的哦~
还有一些其它的 DOM 操作控制的方法：
| 方法 | 说明 |
|---|---|
| createElement('tagName') | 创建节点。 |
| createTextNode('text'); | 创建文本节点。 |
| appendChild(o) | 在父节点末尾附加子节点 ，其中 o 为节点对象。 |
| createDocumentFragment() | 创建文档片断。 |
| removeChild(oP) | 删除节点。 |
| replaceChild(newOp, targetOp) | 替换节点。 |
| insertBefore(newOp, targetOp) | 已有的子节点前插入一个新的子节点。 |
| insertAfter(newOp, targetOp) | 已有的子节点之后插入一个新的子节点。 |
| get/setAttribute('key', 'value') | 设置或得到属性节点。 |
| cloneNode(true/false) | 复制节点。 |
这些方法的使用主体不只是 document，更多的是各个节点元素。
在文档对象模型（DOM）中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
| 属性 | 说明 |
|---|---|
| nodeName | 节点名称，相当于 tagName 属性节点返回属性名，文本节点返回 #text。nodeName，是只读的。 |
| nodeType | 节点的类型，返回值：1，元素节点；2，属性节点；3，文本节点。nodeType 是只读的。 |
| nodeValue | 节点的值，返回一个字符串，指示这个节点的值。元素节点返回 null，属性节点返回属性值，文本节点返回文本。nodeValue 可读可写，这是对元素节点不能写。一般只用于设置文本节点的值。 |
节点属性介绍：
一、nodeName 属性：节点的名称，是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是#text
4. 文档节点的 nodeName 永远是#document
二、nodeValue 属性：节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性：节点的类型，是只读的。以下常用的几种结点类型:
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
我们有两种方法替换元素的内容，一个是 innerHTML，另一个是 innerText。
innerHTML 属性用于获取或替换元素的内容，比如 <div> 标签内的所有元素。
<div><a>文本内容</a></div>
innerText 属性用于获取或替换元素的文本内容，只有文本内容，没有其它 HTML 标签。
<div><a>文本内容</a></div>
使用语法：
Object.innerHTML
Object.innerText
参数说明： Object 是获取的元素对象，如通过document.getElementById("ID")获取的元素。
style 的使用语法：
Object.style.property = new style;
参数说明：
1. Object 是获取的元素对象，如通过document.getElementById("id")获取的元素。
2. property 为 css 样式属性，比如 color，width 等等，不做过多说明。
className 属性可以设置或返回元素的 class 属性。
使用语法：
Object.className = classname;
参数说明：
1. Object 是获取的元素对象，如通过document.getElementById("id")获取的元素。
2. className 为 元素的 class 属性。
