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”> ...
随机推荐
- Oracle 字符集的查看和修改 -转
一.什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系.ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储,处理,检索数据.它使数据库 ...
- 从 mian 函数开始一步一步分析 nginx 执行流程（二）
如不做特殊说明,本博客所使用的 nginx 源码版本是 1.0.14,[] 中是代码所在的文件! 上一个博客中我们将 main 函数执行流程分析完,到最后一步调用 ngx_master_process ...
- 【转】LaTeX 符号命令大全
函数.符号及特殊字符 声调 语法 效果 语法 效果 语法 效果 \bar{x} \acute{\eta} \check{\alpha} \grave{\eta} \breve{a} \ddot{y} ...
- Android学习笔记（三）Application类简介
每次运行APP时,Application类都保持实例化状态.与Activity不同,配置改变不会导致应用程序重启.通过继承Application类,可以完成一下3项工作: · 对Android运行时广 ...
- SDH，WDM， OTN， MSTP，Ethernet， PTN， IP RAN
概要:对带宽的需求,加上IP化严重,光通信技术不断地进化.最早的技术就是SONET.SDH,后来的技术都是在此技术上不断地改进和发展,以太网技术是一种局域网技术. SDH带宽小,提高带宽出现了WDM波 ...
- springMVC能做什么，做j2ee时候要考虑什么
转载: http://jinnianshilongnian.iteye.com/category/231099 [置顶] 跟我学SpringMVC目录汇总贴.PDF下载.源码下载 博客分类: 跟开涛学 ...
- HDU 4414 Finding crosses (DFS + BFS)
题意:在N*N的图中,找出孤立存在的十字架的个数.十字架要求为正十字,孤立表示组成十字架的‘#的周围的一格再无’#‘. dfs找出在中心的‘#’(周围四格也为‘#'),则缩小了搜索范围,再bfs找出是 ...
- 国内maven 仓库
国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用.osChina 貌似仓库一年前关闭了 repo2<mirror> <id>re ...
- hdu 2824 The Euler function（欧拉函数）
如果打表的话会超内存,我想到了一种方法解决这个问题.题目给出的数据时3000000,我将三百万分成300个数据,将整万的数据存储下来,计算的时候,先计算x和y之间整万的数据,然后再计算零散数据. 想法 ...
- 无法将类型“System.Collections.Generic.IEnumerable<EmailSystem.Model.TemplateInfo>”隐式转换为“System.Collections.Generic.List<EmailSystem.Model.TemplateInf
List<Model.Template> templateList = templateBLL.RecommendTemplateByOrder(modelEbay); List<M ...