一：定义
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>
先总结到这，后边再补充。。。