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

　　接下来，我们要在“第二个节点”的前面插入“第三个节点”。所以我们需要先获取到“第二个节点”，可以通过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>
```

posted @ 2015-11-05 10:35 calmound 阅读(1445) 评论(5) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）

程序员三木

Javascript DOM操作实例

搜索

常用链接

积分与排名

随笔分类

阅读排行榜