DOM:独立于平台和语言的标准、规范、接口。（主要作用：动态改变节点）
W3C DOM
- 核心 DOM:针对任何结构化文档的标准模型
- XML DOM:针对 XML 文档的标准模型
- HTML DOM:针对 HTML 文档的标准模型
节点
- 文档节点：整个文档
- 元素节点：HTML元素
- 文本节点：元素内的文本
- 属性节点：元素的属性
- 注释节点：注释
节点属性
parentNode
说明：得到父节点childNodes
说明：得到所有的子节点attributes
说明：得到所有的属性节点
节点方法
createElement(“p”)
说明：创建一个元素节点p,就是标签对createTextNode()
说明：创建一个文本节点，就是文本内容a.appendChild(b)
说明：把b添加到a的末尾a.insertBefore(b,c)
说明：把b添加到a中c的前面a.removeChild(b)
说明：删除a中的ba.replace(b,c)
说明：把a中的c替换成b
实例
创建节点
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建节点</title>
<script type="text/javascript">
window.onload = function(){/*加载完成再执行本段代码*/
var p = document.createElement("p");/*创建元素节点*/
var c = document.createTextNode("创建的第一个节点");/*创建文本节点*/
p.appendChild(c);/*将文本节点添加到元素节点中去*/
document.body.appendChild(p);/*把创建的那个元素节点添加到body中去*/
}
</script>
</head>
<body>
</body>
</html>插入节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入节点</title>
<style type="text/css">
#element {width:200px;}
</style>
<script type="text/javascript">
function addList(){
/*创建用户要求的节点并且添加内容*/
var sign = document.getElementById("sign").value;/*获取id=sign的文本框的内容*/
var signNode = document.createElement(sign);
var content = document.getElementById("content").value;/*获取id=content的文本框的内容*/
var contentNode = document.createTextNode(content);
signNode.appendChild(contentNode);
/*插入*/
var element = document.getElementById("element").value;/*获取id=element的文本框的内容*/
var list = document.getElementById("list");/*获取id=list的元素*/
if("" != element){/*添加到指定位置*/
var listChildren = list.childNodes;
for(i in listChildren){
if(element == listChildren[i].innerHTML){
list.insertBefore(signNode,listChildren[i]);
return;/*跳出函数，中断执行*/
}
}
}
list.appendChild(signNode);/*若是没有找到指定的位置，添加在末尾*/
}
</script>
</head>
<body>
<div>
<ol id="list">
<li>java</li>
<li>ios</li>
<li>web</li>
</ol>
</div>
<hr/>
<div>
<input placeholder="请输入标签类型" value="" id="sign"></input><br/><br/>
<input placeholder="请输入文本内容" value="" id="content"></input><br/><br/>
<input placeholder="选择添加的位置,默认添加在末尾" value="" id="element"></input><br/><br/>
<input type="button" value="添加" onclick="addList();"></input>
</div>
</body>
</html>替换节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>替换节点</title>
<script type="text/javascript">
function replaceNode(){
var p = document.getElementById("p_2");
/*创建一个新的节点*/
var newNode = document.createElement("lable");
var newContent = document.createTextNode("新的一段");
newNode.appendChild(newContent);
var d = document.getElementById("content");
d.replaceChild(newNode,p);/*替换*/
}
</script>
</head>
<body>
<div id="content">
<p>第一段</p>
<p id="p_2">第二段</p>
<p>第三段</p>
</div>
<div>
<input type="button" value="替换第二段" onclick="replaceNode();"></input>
</div>
</body>
</html>删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除节点</title>
<script type="text/javascript">
function replaceNode(){
var p = document.getElementById("p_2");
var d = document.getElementById("content");
d.removeChild(p);/*删除*/
}
</script>
</head>
<body>
<div id="content">
<p>第一段</p>
<p id="p_2">第二段</p>
<p>第三段</p>
</div>
<div>
<input type="button" value="删除第二段" onclick="replaceNode();"></input>
</div>
</body>
</html>
