Javascript DOM操作实例

      最近在学DOM，但是还是没有办法很好的记住API，想找些例子来练习，网上的例子将一个个DOM对象方法挨个举例，并没有集合在一起用，效果不尽人意。所以自己写一份实例，顺便巩固下学到的知识。

      这个例子很简单，主要就是操作ul下面的li，但是会贯穿很多DOM的对象方法。

      首先在body下面创建一个ul，注意<ul></ul> 之间不要有空格或回车，否则会造成文本节点。

```

<body>

    <ul id="fruit"></ul>

</body>

```

　　接下来就是Javascript代码了，首先我们需要通过id为“fruit”来获取ul这个节点。

```

    var oUl = document.getElementById("fruit");

```

　　通过getElementById()便可以获得ul这个节点了，之后我们要在ul节点下面创建子节点。通过createElement()创建li节点，然后再通过textContent属性来给新建的节点增加内容，最后在通过appendChild()将li节点绑定到ul上面。

```

var newNode1 = document.createElement("li");

newNode1.textContent = "第一个节点";

oUl.appendChild(newNode1);

var newNode2 = document.createElement("li");

newNode2.textContent = "第二个节点";

oUl.appendChild(newNode2);

```

　　这样我们的网页上就已经有两个节点了，看下网页效果。

Javascript DOM操作实例

　　接下来，我们要在“第二个节点”的前面插入“第三个节点”。所以我们需要先获取到“第二个节点”，可以通过childNode和nodeList实现，获取到之后在通过insertBefore()进行插入。

```

var nodeList = oUl.childNodes;

var newNode3 = document.createElement("li");

newNode3.textContent = "第三个节点";

oUl.insertBefore(newNode3,nodeList[1]);

```

　　效果如下：

Javascript DOM操作实例

　　现在，我打算用“第四个节点”替换掉“第一个节点”，这里需要用的replaceChild()函数以及获取第一个元素firstChild。

```

var newNode4 = document.createElement("li");

newNode4.textContent = "第四个节点";

oUl.replaceChild(newNode4,oUl.firstChild);

```

　　效果如下：

Javascript DOM操作实例

　　最后，我们来移除最后一个节点，也就是“第二个节点”，用到了lastChild，不过在移除之前，需要用hasChildNodes来判断oUl是否有子节点。

```

if(oUl.hasChildNodes){

    oUl.removeChild(oUl.lastChild);

}

```

Javascript DOM操作实例

　　至此，DOM简单的实例完成了。<br/>

　　这里是完整代码

```

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DOM</title>

<style>

body{background:#f1f1f1;}

</style>

<script>

window.onload = function(){

    var oUl = document.getElementById("fruit");//获取id为“fruit”的元素

    var newNode1 = document.createElement("li");//创建一个li节点

    newNode1.textContent = "第一个节点";//给新创建的li节点赋值

    oUl.appendChild(newNode1);//添加到oUl上

    var newNode2 = document.createElement("li");

    newNode2.textContent = "第二个节点";

    oUl.appendChild(newNode2);

    var nodeList = oUl.childNodes;

    var newNode3 = document.createElement("li");

    newNode3.textContent = "第三个节点";

    oUl.insertBefore(newNode3,nodeList[1]);//newNode3插入到nodeList[1]之前

    var newNode4 = document.createElement("li");

    newNode4.textContent = "第四个节点";

    oUl.replaceChild(newNode4,oUl.firstChild);//newNode4替换掉oUl的第一个子节点

    if(oUl.hasChildNodes){//如果oUl存在子节点

        oUl.removeChild(oUl.lastChild);//删除oUl的最后一个节点

    }

}

</script>

</head>

<body>

    <ul id="fruit"></ul>

</body>

</html>

```

秒客网

Javascript DOM操作实例

相关文章