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”> ...
随机推荐
- java中执行js代码
要在java中执行js代码,首先明白,java不支持浏览器本身的方法.支持自定义的js方法,否则会报错 先新建一个js文件:jsss.js 内容如下: function aa(a,b){ return ...
- error: /lib64/libc.so.6: symbol _dl_starting_up, version GLIBC_PRIVATE not defined in file ld-linux-x86-64.so.2 with link time reference
]$ sudo yum install libnotify*Loaded plugins: fastestmirror, refresh-packagekit, securitySetting up ...
- 【转】MFC界面更新实现方法
原文网址:http://www.cnblogs.com/skywatcher/p/3572311.html 1.更新窗口 即采用UpdateWindow()函数立即发送WM_PAINT消息更新整个窗口 ...
- PowerDesigner将PDM导出生成WORD文档--温习老知识
转:http://www.cnblogs.com/wudiwushen/archive/2010/05/13/1734812.html 今天的温习老知识,是如何将一个PD设计的PDM来导出WORD文档 ...
- [转]Ubuntu上的包管理：dpkg，apt和aptitude
一直以来对于ubuntu的包管理的概念就是apt-get,偶尔手动装个包就是dpkg -i,现在觉得是要系统地了解一下这几个包管理的命令. 原文转自: http://zhouliang.pro/201 ...
- ifndef系列
文件中的#ifndef 头件的中的#ifndef,这是一个很关键的东西.比如你有两个C文件,这两个C文件都include了同一个头文件.而编译时,这两个C文件要一同编译成一个可运行文件,于是问题来了, ...
- 一个可视化的retrospective网站
IdeaBoardz - Brainstorm, Retrospect, Collaborate是一个可视化的retrospective,brainstorm的网站,比较简单易用,可以导出pdf和ex ...
- cocos2d-x3.0 ListView
.h #include "cocos2d.h" #include "cocos-ext.h" #include "ui/CocosGUI.h" ...
- delphi tidhttp 超时的解决方案
现在delphi都发布到xe10.1了,tidhttp还有缺陷,那就是超时设置在没有网络或者连不上服务器的时候是无效的,不管你设置为多少都要10-20秒.connectTimeout和readTime ...
- [TypeScript] Understanding Generics with RxJS
Libraries such as RxJS use generics heavily in their definition files to describe how types flow thr ...