JavascriptDOM操作实例
最近在学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>
```
优质内容筛选与推荐>>1、实验5
2、自然语言处理工具包HanLP的Python接口
3、12 缓存数据以提高性能
4、jQuery中常用正则表达式
5、使用 Styleneat 重新组织 CSS