javascript DOM小结
一：定义
dom：文档对象模型。
dom是针对HTML和XML文档的一个API。dom描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面的某一部分。
1：childNodes（返回当前节点的子节点列表）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom1</title>
<style>
li{
height: 30px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul id="uls">
<li></li>
<li></li>
</ul>
</body>
<script>
var uls = document.getElementsByTagName("ul")[0];
//chrome:5 ,ie>=9 :5; ie<=8 :2
alert(uls.childNodes.length);
</script>
</html>
chrome弹出5（），为什么是5？如图：
3个文本节点（红，蓝，黑），2个元素节点（方框圈起来的）。ie5-8弹出2，说明其中节点并不包含文本节点。
如果如下写法会报错（文本节点不能设置background）：
for(var i = 0; i <= uls.childNodes.length; i++){
uls.childNodes[i].style.background = "red";
}
兼容写法：当节点为元素节点的时候设置其背景色
for(var i = 0 ; i <= uls.childNodes.length ; i++){
//nodeType -->1元素节点
if(uls.childNodes[i].nodeType == 1){
uls.childNodes[i].style.background = "red";
}
}
2：children（该属性返回节点的子元素--不包含文本节点）
alert(uls.children.length); //chrome和ie 都为2
for(var i = 0 ; i <= uls.children.length ; i++){
uls.children[i].style.background = "red";
}
注意：不论是children、childNodes，子节点只算第一层的，子节点中的元素不算在其中（那个是孙子节点）。
3：parentNode（返回指定节点的父节点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom1</title>
<style>
li{
height: 30px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul id="uls">
<li></li>
<li></li>
</ul>
</body>
<script>
var uls = document.getElementById("uls");
alert(uls.parentNode);
</script>
</html>
4：offsetParent（返回最近的祖先定位元素）
定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom1</title>
<style>
#wrapper{
position: relative;
width: 200px;
height: 200px;
}
#inner{
position: absolute;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="noPosition">
<div id="inner"></div>
</div>
</div>
</body>
<script>
var sonNode = document.getElementById("inner");
alert(sonNode.offsetParent.id);
</script>
</html>
如果容器元素未设置css定位，则返回body或html
5：firstChild (firstElementChild)
兼容问题：
ie6~8： firstChild
其他浏览器： firstElementChild
兼容写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom1</title>
</head>
<body>
<ul id="uls">
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
var uls = document.getElementById("uls");
if(uls.firstElementChild){
uls.firstElementChild.style.background = "red";
}else{
uls.firstChild.style.background = "red";
}
</script>
</html>
6：lastChild (lastElementChild)
兼容问题：
ie6~8： lastChild
其他浏览器： lastElementChild
用法同firstChild。
7：nextSibling（nextElementSibling）
兼容问题：
ie6~8： nextSibling
其他浏览器： nextElementSibling
用法同上
8：previousSibling（previousElementSibling）
兼容问题：
ie6~8： previousSibling
其他浏览器： previousElementSibling
用法同上
9：getAttribute，setAttribute，removeAttribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
</head>
<body>
<input type="text" id="btn1" />
<input type="button" value="按钮" id="btn2" name="2" />
</body>
<script>
// 用dom的方式操纵元素属性
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
// btn1.value = "1234";
// btn1["value"] = "1234"
var btn2Value = btn2.getAttribute('value');
alert(btn2Value);
btn1.setAttribute("value",btn2Value);
btn2.removeAttribute("value");
}
// 获取：getAttribute(属性名称)
// 设置：setAttribute(属性名称，值)
// 删除：removeAttribute(属性名称)
</script>
</html>
10：createElement（创建元素节点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="uls"> </ul>
<input type="button" value="创建li" />
</body>
<script>
var uls = document.getElementsByTagName("ul")[0];
var btns = document.getElementsByTagName("input")[0];
btns.onclick = function(){
var lis = document.createElement("li");
uls.appendChild(lis);
// 父级.appendChild(创建的元素);
}
</script>
</html>
11：createTextNode（创建文本节点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="main">
</div>
</body>
<script>
var main = document.getElementById("main");
var textNode = document.createTextNode("<h1>wefwedf</h1>");
main.appendChild(textNode);
</script>
</html>
结果：
12：appendChild（指定元素节点的最后一个子节点之后添加节点）
父级.appendChild(子节点)。
用法见上
13：insertBefore（在已有的子节点前插入一个新的子节点）
父级.insertBefore(子节点,在谁之前)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" />
<input type="button" value="插入元素" />
<ul> </ul>
</body>
<script>
var txt = document.getElementsByTagName("input")[0];
var btn = document.getElementsByTagName("input")[1];
var uls = document.getElementsByTagName("ul")[0];
// btn.onclick = function(){
// var lis = document.createElement("li");
// lis.innerHTML = txt.value;
// uls.appendChild(lis);
// }
// 父级.appendChild(子节点);
// 父级.insertBefore(子节点,在谁之前)；
btn.onclick = function(){
var lic = document.createElement("li");
var lis = document.getElementsByTagName("li");
lic.innerHTML = txt.value;
uls.insertBefore(lic,lis[0]);// ie下会报错，因为初始时没有li。
}
</script>
</html>
解决上面的栗子初始化时ie8及以下报错，兼容写法：
btn.onclick = function(){
var lic = document.createElement("li");
var lis = document.getElementsByTagName("li");
lic.innerHTML = txt.value;
if(lis.length == 0){
uls.appendChild(lic);
}else{
uls.insertBefore(lic,lis[0]);
}
}
14：removeChild（删除父元素中的子节点）
父级.removeChild(子节点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom9</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<ul id="uls">
<li>jdjdjdjd<span>删除</span></li>
<li>jdsdcsd<span>删除</span></li>
<li>jdcsdsddjd<span>删除</span></li>
<li>12123<span>删除</span></li>
<li>343434jdjd<span>删除</span></li>
</ul>
</body>
<script>
var uls = document.getElementById("uls");
var spans = document.getElementsByTagName("span");
for(var i = 0; i<= spans.length; i++){
spans[i].onclick = function(){
uls.removeChild(this.parentNode);
}
}
// removeChild 删除父元素中的子节点。
</script>
</html>
15：cloneNode（复制当前节点或复制当前节点及其子节点）
复制的节点.cloneNode(false) -->复制当前节点
复制的节点.cloneNode(true) -->复制当前节点及其子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background: red;
}
#div1{
width: 200px;
height: 200px;
border: 5px solid #000;
}
</style>
</head>
<body>
<div id="box">
这个是box
</div>
<div id="div1">
这个是div1
</div>
<input type="button" value="复制" id="btn" />
</body>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var div1 = document.getElementById("div1");
btn.onclick = function(){
var clonbox = box.cloneNode(false);
div1.appendChild(clonbox);
// var clonbox1 = box.cloneNode(true);
// div1.appendChild(clonbox1);
}
16：replaceChild（替换当前父节点中的指定子节点）
父节点.replaceChild(新插入的节点，要替换的节点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换节点</title>
</head>
<body>
<div id="main">
<div></div>
<div></div>
<div></div>
</div>
</body>
<script>
var main = document.getElementById("main");
var spans = document.createElement("span");
// replaceChild()方法替换节点
// 参数一：新插入的节点；
// 参数二：要替换的节点；
// 父节点.replaceChild(新插入的节点，要替换的节点)
main.replaceChild(spans,main.children[1])
</script>
</html>
先总结到这，后边再补充。。。
javascript DOM小结的更多相关文章
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM操作之 querySelector,querySelectorAll
javascript DOM操作之 querySelector,querySelectorAll
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
随机推荐
- WordPress BackWPup插件‘tab’参数跨站脚本漏洞
漏洞名称: WordPress BackWPup插件‘tab’参数跨站脚本漏洞 CNNVD编号: CNNVD-201308-353 发布时间: 2013-08-26 更新时间: 2013-08-26 ...
- 导航软件 CH Round #57 - Story of the OI Class
题目:http://ch.ezoj.tk/contest/CH%20Round%20%2357%20-%20Story%20of%20the%20OI%20Class/导航软件 题解:刚开始看见题目, ...
- Google Map API 学习六-设置infoWindow的长宽
- 几款常用Eclipse java插件
以下是我最近常用的几款Eclipse java插件: ADT Plugin https://dl-ssl.google.com/android/eclipse/ WindowBuilder Pro ...
- Android 2D绘图初步
Android是通过graphics类来显示2D图形的.其中graphics中包括了Canvas.Paint.Color.Bitmap等类.graphics具有绘制点.线.颜色.2D几何图形.图像处理 ...
- ZOJ 3761 Easy billiards 月赛E DFS
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3761 题目大意:给定n个位置的小球,小球的运动方向只能是水平或者 ...
- jsp文件中的alert等等
<script type="text/javascript"> alert("aa: ${message}") </script>
- java对Ldap操作4
applicationContext.xml <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE ...
- Oracle中trunc函数、round 函数、ceil函数和floor函数的使用
Oracle中trunc函数.round 函数.ceil函数和floor函数的使用 1.1trunc函数处理数字 trunc函数返回处理后的数值,其工作机制与ROUND函数极为类似,只是该函数不对指定 ...
- mac 别名 ll
在 Linux 下习惯使用 ll.la.l 等ls别名的童鞋到 mac os 可就郁闷了~~ 其实只要在用户目录下建立一个脚本“.bash_profile”, vim .bash_profile 并输 ...