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”> ...
随机推荐
- sort merge join,hash join,netsloop join
Join Operations ? SORT-MERGE JOIN – Sorts tables on the join key and then merges them together – Sor ...
- Linux Shell编程（14）——内部变量
内建变量影响Bash脚本行为的变量.$BASHBash二进制程序文件的路径 bash$ echo $BASH /bin/bash$BASH_ENV该环境变量保存一个Bash启动文件路径,当启动一个脚本 ...
- 【转】ByteBuffer 到底怎么用？网络编程中一点总结！--不错
原文网址:http://cuisuqiang.iteye.com/blog/1443212 做tcp网络编程,要解析一批批的数据,可是数据是通过Socket连接的InputStream一次次读取的,读 ...
- 转-----实现基本的Ajax和Json请求
前面已经封装好了一个方法ajax(),通过这个方法可以实现Ajax请求,接下来就是给出 例程来测试这个方法和实现简单的功能. 视图的部分代码如下: 1 2 3 4 5 6 7 8 9 <bo ...
- activity+fragment多次切换出现页面空白问题
刚上手一个项目 懒的用viewpager+fragment模式,尽管在后面的项目中还是用到viewpager+fragment.先说说问题,多次切换fragment的时候页面出现空白,刚开始以为传递的 ...
- C#调用C++动态库（dll）
在实际软件开发过程中,由于公司使用了多种语言开发,在C#中可能需要实现某个功能,而该功能可能用其他语言已经实现了,那么我们可以调用其他语言写好的模块吗?还有就是,由于C#开发好的项目,我们可以利用re ...
- Microsoft JScript 运行时错误: Automation 服务器不能创建对象
var WshShell = new ActiveXObject('WScript.Shell') WshShell.SendKeys( '{F11}'); 问题: ...
- C_FORCE_ROOT linux环境变量设置
nano /etc/profile gedit 也可以 结尾追加 export C_FORCE_ROOT="true"
- Java IO复习(一)
package com.zyw.file; import java.io.*; /** * Created by zyw on 2016/3/10. */ public class IOTest { ...
- C# SQL 整表插入 分类： C# 2014-09-17 16:18 369人阅读 评论(2) 收藏
说明: (1)表A的一部分数据插入到表B (2)DataAccess 类,是放在DAL层下的底层类; da.StrConnection 写在DataAccess类中; //整表插入方法 private ...