DOM之--基本并且常用方法介绍

1.       访问文档中的元素

1)      document.getElementById(‘id’);

2)      document.getElementsByTagName(‘tagName’).

2.       读取元素的属性、节点值及其它节点数据

1)      node.getAttribute(‘attribute’)：获取属性名为attribute的值；

2)      node.setAttribute(‘attribute’, ‘value’)：设置属性名为attribute的值为value；

3)      node.nodeType：读取节点类型（1=元素，3=文本接节点）；

4)      node.nodeName：读取节点名称（元素名字或#textNode）；

5)      node.nodeValue：读取或设置节点的值（文本节点的情况下则为文本内容，元素为null）

3.       节点之间的操作

1)      node.previousSibling：获取上一个兄弟节点，并将它保存为一个对象；

2)      node.nextSibling：获取下一个兄弟节点，并将它保存为一个对象；

3)      node.childNodes：获取对象的所有子节点，并把它们存储到一个列表中。对于第一个和最后一个子节点，还可以使用node.firstChild和node.lastChild进行简写；

4)      node.parentNode：获取包含node的节点；

5) node.hasChildNodes()：判断node是否有孩子节点。

4.       创建新节点

1)      document.creteElement(‘element’)：创建一个标签名为element的新元素；

2)      document.createTextNode(‘string’)：创建一个节点值为string的文本节点；

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

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

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

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

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

8)      element.innerHTML：读写给定element的HTML内容，他是一个字符串，包括所有子节点及它们的属性和文本内容。

注意：前两种方法都是document的方法，所有其它的都是节点的方法。

关于JavaScript的DOM操作与jQuery的DOM操作比较，将会在接下来的学习中慢慢总结！