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>
```

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

java计算集合对称差

两个集合的对称差是只属于其中一个集合,而不属于另一个集合的元素组成的集合。 集合A和B的对称差通常表示为AΔB,对称差的符号在有些图论书籍中也使用符号⊕来表示。...

1013
来自专栏云霄雨霁

数据结构----背包

1770
来自专栏Golang语言社区

Golang语言断言

golang中的所有程序都实现了interface{}的接口,这意味着,所有的类型如string,int,int64甚至是自定义的struct类型都就此拥有了i...

31611
来自专栏乐享123

Python编程实战 - 笔记1

1939
来自专栏王硕

原 对于PostgreSQL中Datum的解释

34910
来自专栏高性能服务器开发

(四)sds字符串

今天分析的是Redis源码中的字符串操作类的代码实现。有了上几次的分析经验,渐渐觉得我得换一种分析的方法,如果每个API都进行代码分析,有些功能性的重复,导致分...

38410
来自专栏你不就像风一样

java过滤掉字符串中的html标签、style标签、script标签

1402
来自专栏前端新视界

TypeScript 之类型判断

在使用 Angular 做项目的时候,对 TypeScript 的类型判断不太熟练,为了方便查找,特意对 TypeScript 的类型判断做了简单梳理。

3050
来自专栏Fundebug

10个JavaScript常见BUG及修复方法

1305
来自专栏文武兼修ing——机器学习与IC设计

栈与栈的实现栈栈的基本操作栈的实现

栈 栈是一种基础的数据结构,只从一端读写数据。基本特点就”后进先出“,例如顺序入栈1,2,3,4,5,再顺序出栈是5,4,3,2,1 栈的基本操作 栈的基本操作...

3155

扫码关注云+社区

领取腾讯云代金券