js学习笔记33----DOM操作
前面有讲过一些DOM的基本概念。
今天来说一下DOM 的一些基本操作，主要有创建节点，追加节点，删除节点。
1.创建DOM元素：
createElement(标签名) —— 创建一个节点
appendChild(节点) —— 追加一个节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 操作</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
var oTxt = document.getElementById("txt1");
oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<input type="text" id="txt1" />
<input type="button" name="btn1" id="btn1" value="创建li" />
<ul id="ul1"></ul>
</body>
</html>
2.插入元素：
insertBefore(节点, 原有节点) —— 在已有元素前插入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 操作</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
var oTxt = document.getElementById("txt1");
var aLi = document.getElementsByTagName("li"); oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
if(aLi.length > 0){
oUl.insertBefore(oLi, aLi[0]);
}else{
oUl.appendChild(oLi);
} }
}
</script>
</head>
<body>
<input type="text" id="txt1" />
<input type="button" name="btn1" id="btn1" value="创建li" />
<ul id="ul1"></ul>
</body>
</html>
3.删除节点：
removeChild(节点) —— 删除一个节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 操作</title>
<script type="text/javascript">
window.onload = function(){
//删除节点
var oUl = document.getElementById("ul1");
var aA = document.getElementsByTagName("a"); for(var i=0;i<aA.length;i++){
aA[i].onclick = function(){
oUl.removeChild(this.parentNode);
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>第一条 <a href="javascript:;">删除</a></li>
<li>第二条 <a href="javascript:;">删除</a></li>
<li>第三条 <a href="javascript:;">删除</a></li>
</ul>
</body>
</html>
4.文档碎片（只能提升低级浏览器的性能，稍作了解即可）：
createDocumentFragment
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档碎片</title>
<script type="text/javascript">
window.onload = function(){ var oUl = document.getElementById("ul1");
var oFrag = document.createDocumentFragment(); //创建文档碎片 for(var i=0;i<10000;i++){
var oLi = document.createElement("li");
oFrag.appendChild(oLi);
} oUl.appendChild(oFrag);
}
</script>
</head>
<body>
<ul id="ul1"> </ul>
</body>
</html>
js学习笔记33----DOM操作的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- js学习笔记2---HTML属性操作
1.HTML属性操作:读.写 属性名 属性值 2.属性读操作:获取.找到 a) 语法:元素.属性名 如:document.getElementById(“btn”).value; b) 字符串的连 ...
- js学习笔记9----时间操作
1.时间操作函数如下: new Date(); //获取系统时间 getFullYear(); //年 getMonth()+1; //月,初始值为0 getDate(); //日 getDay( ...
- js学习笔记21----表格操作
1.获取表格元素: tHead : 表格头 tBody : 表格主体内容 tFoot : 表格尾 rows : 表格行 cells : 表格列 如获取表格第一行第一列的数据: <script ...
- js学习笔记11----表单操作
1.复选框选中 var aInput = document.getElementsByTagname('input'); aInput[0].checked=true;
- js学习笔记--dom部分(一)
js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
随机推荐
- 1.Java基础-面向对象编程思想（封装继承多态接口）
封装: 1.定义:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别. 2.封装的目的是:增强安全性和简化编程,使用者不必了解具体的实现细节,而只是要通过外部接口,一特定的 ...
- LevelDB场景分析4--BackgroundCompaction
1.DBImpl::Open uint64_t new_log_number = impl->versions_->NewFileNumber(); WritableF ...
- ps可选颜色
RGB模式和CMYK模式 青色加红色是黑色->颜料,而蓝色绿色(它们合起来是青色)加红色却是白色->加光 可调整的原色(主色)可调整的主色分为三组RGB三原色:红色.绿色.蓝色CMY三原色 ...
- 《Effective Java》读书笔记六（方法）
No38 检查参数的有效性 对于公有的方法,要用Javadoc的@throws标签(tag)在文档中说明违反参数值时会抛出的异常.这样的异常通常为IllegalArgumentException.In ...
- 【Android】11.2 通过重写对应的方法保存和恢复实例的状态
分类:C#.Android.VS2015: 创建日期:2016-02-21 一.简介 通过重写(也叫回调)对应的方法来管理Activity的生命周期,比如用户旋转屏幕时应用程序要能自动保存和恢复实例的 ...
- hdu 1532 最大流
#include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...
- atitit.ajax上传文件的实现原理 与设计
atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2. 传统的html4 + ajax 是无法直 ...
- [转帖]cocos2d-x 3.0rc开发指南：Windows下Android环境搭建
原文请看:http://blog.csdn.net/linzhengqun/article/details/21663341 鲜红字体请注意:文中红色字体乃是本文博主阳光下的蒲公英添加.红色字体部分造 ...
- css 点点加载demo
content字符生成配合CSS3 animation的点点点loading效果实例 代码: CSS代码: dot { display: inline-block; height: 1em; line ...
- LeetCode: Roman to Integer 解题报告
Roman to IntegerGiven a roman numeral, convert it to an integer. Input is guaranteed to be within th ...