Dom操作的基础知识

1 通过DOM访问文档

浏览器将文档看做节点和属性的集合。

getElementById和getElementsByName，可以访问文档中的所有元素或特定目标的单个元素，注意ID是唯一的，Name不唯一。

2元素的子节点、父节点、兄弟节点和值

在不知道HTML文档内容的前提下，遍历HTML文档，使用getElementsByName等方法是无法实现的，可以使用DOM中提供的方法，通过子节点（children）、父节点（parent）、兄弟节点（sibling）就可以实现。

每个节点都有一些非常重要的属性：

（相关回顾：小知识中的nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。）

• 最重要的是nodeType，它描述该节点是什么—元素（element）、属性（attribute）、注释（comment）、文本（text）或其他几种类型（共12个）。nodeType的值，1表示元素节点、3表示文本节点
• 另一个重要的性质是nodeName，它表示元素的名字，如果是文本节点的话则表示#text。
• nodeValue是节点的值：如果节点是个元素，则它为null；如果元素是文本节点，则它为文本内容。

2.1 从父节点到子节点

childNodes是元素第一层子节点的列表，不包括向下更深的层次；

可以通过数组计数器或item()方法访问当前元素的子元素

简便用法yourElement.firstChild和yourElement.lastChild是yourElement.childNodes[0]和yourElement.childNodes【yourElement.childNodes.length-1】的简化版本，可以使访问更快捷些。

可以通过方法hasChildNOdes()检查一个元素是否有子节点，它会返回一个布尔值。

2.2从子节点到父节点

通过parentNode属性，可以从子节点回到父节点。

2.3兄弟节点之间

可以通过previousSibling和nextSibling属性访问同一级别上的不同子节点。

3.修改元素属性

获得要修改的元素后，有两种方法可以读取和修改它的属性：一种老的方式和一种使用新的DOM方法的方式

老的方式：以对象属性的方式获取和设置元素的属性

DOM规范提供了2种方法来读取和设置属性值—-getAttribute()和setAttribute()。getAttribute()方法有一个参数—-属性名；setAttribute()方法需要2个参数—属性名和新的属性值

4.创建、移除和替换元素

document.creatElement(’element’)：创建一个标签名为element的新元素

document.creatTextNode(’string’)：创建一个节点值为string的文本节点

node.appendChild(newNode)：将newNode作为子节点，添加到node的所有子节点之后

newNode = node.cloneNode(bool)：创建newNode作为node的副本（克隆）。如果bool值为true，这克隆就包含所有原节点的子节点及其属性的克隆

node.insertBefore(newNode,oldNode)：把newNode作为一个node的新节点插入到oldNode之前

node.removeChild(oldNode)：移除node节点的子节点oldNode

node.replaceChild(newNode.oldNode)：使用节点newNode替换node节点的子节点oldNode