JavaScript-DOM节点操作下

1、创建节点

在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。

语法：

var e = document.createElement("元素名");

var txt = document.createTextNode("元素内容");

e.appendChild(t);    //把元素内容插入元素中去

2、插入节点

在JavaScript中，插入节点有2种方法：appendChild()和insertBefore()。

（1）appendChild()

在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。

语法：

1

obj.appendChild(new)

说明：

obj表示当前节点，new表示新节点。

（2）insertBefore()

在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。

语法：

obj.insertBefore(new,ref)

说明：

obj表示父节点；

new表示新的子节点；

ref指定一个节点，在这个节点前插入新的节点。

3、删除节点

在JavaScript中，我们可以使用removeChild()方法来删除当前节点下的某个子节点。

语法：

obj.removeChild(oldChild);

说明：

参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点。

4、复制节点

在JavaScript中，我们可以使用cloneNode()方法来实现复制节点。

语法：

1

obj.cloneNode(bool)

说明：

参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：

（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；

（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；

5、替换节点

在JavaScript中，我们可以使用replaceChild()方法来实现替换节点。

语法：

obj.replaceChild(new,old)

说明：

obj，表示被替换节点的父节点；

new，表示替换后的新节点；

old，需要被替换的旧节点。

6、innerHTML和innerText

在JavaScript中，我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。

innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。

7、JavaScript操作CSS样式

在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。

语法：

obj.style.属性名;

说明：

obj指的是DOM对象，也就是通过document.getElementById()等获取而来的DOM元素节点。