Javascript DOM操作实例

用户1624346

发布于 2018-04-10 08:24:32

94200

代码可运行

文章被收录于专栏：calmoundcalmound

运行总次数：0

代码可运行

最近在学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); ``` 　　这样我们的网页上就已经有两个节点了，看下网页效果。

　　接下来，我们要在“第二个节点”的前面插入“第三个节点”。所以我们需要先获取到“第二个节点”，可以通过childNode和nodeList实现，获取到之后在通过insertBefore()进行插入。 ``` var nodeList = oUl.childNodes; var newNode3 = document.createElement("li"); newNode3.textContent = "第三个节点"; oUl.insertBefore(newNode3,nodeList[1]); ``` 　　效果如下：

　　现在，我打算用“第四个节点”替换掉“第一个节点”，这里需要用的replaceChild()函数以及获取第一个元素firstChild。 ``` var newNode4 = document.createElement("li"); newNode4.textContent = "第四个节点"; oUl.replaceChild(newNode4,oUl.firstChild); ``` 　　效果如下：

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

　　至此，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>
```