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>
```
- 【Java数据结构学习笔记之三】Java数据结构与算法之队列(Queue)实现
- Comparison of Apache Stream Processing Frameworks: Part 2
- 2017 Multi-University Training Contest - Team 9 1005&&HDU 6165 FFF at Valentine【强联通缩点+拓扑排序】
- 2017 Multi-University Training Contest - Team 9 1004&&HDU 6164 Dying Light【数学+模拟】
- Python3选择排序
- 【DeepMind 公开课-深度强化学习教程代码实战01】迭代法评估4*4方格世界下的随机策略
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861C Did yo
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861B Which
- 信用卡安全问题:被用户忽视的识别码
- Python3快速排序
- Python3插入排序
- Python3冒泡排序
- Python Selenium设计模式-POM
- 【Python学习笔记之一】Python关键字及其总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- YAML,另一种标记语言?不止是标记语言!
- Canal binlog 日志管理器与GTID简介
- RNA-Seq的Counts和FPKM数据如何转换成TPM?
- Java代码审计基础之反射
- 手把手教你用Python开发“剪刀石头布”小游戏【附源码】
- For语句
- 使用go语言制作dll封装Sprintf函数给VBA使用
- 同事埋了个坑:Insert into select语句把生产服务器炸了
- VBA使用API_01:读取文件
- 从0到1,撸一个IDEA插件,So Easy!
- VBA调用外部对象02:FileSystemObject
- VCS与Verdi的联合仿真
- ADC数据接入到AXI-Steam Interface
- Java面试必问:ThreadLocal终极篇 淦!
- BERT文本摘要