一、DOM概述
1、DOM分层
<!DOCTYPE html>
<html lang="zh">
<head>
<title>标题内容</title>
</head>
<body>
<h3>三号标题</h3>
<b>加粗内容</b>
</body>
</html>每一个对象都可以称为一个节点。
二、DOM对象节点属性
1、常用的节点属性
- nodeName 节点的名称
- nodeValue 节点的值，通常只用于文本节点。
- nodeType 节点的类型
- parentNode 返回当前节点得父节点
- childNodes 子节点列表
- firstChild 返回当前节点的第一个子节点
- lastChild 返回当前节点的最后一个子节点
- previousSibling 返回当前节点的前一个兄弟节点
- nextSibling 返回当前节点的后一个兄弟节点
- attributes 元素的属性列表
2、访问指定节点
- nodeName属性 节点的名称
- nodeValue 节点的值，通常只用于文本节点。
- nodeType 节点的类型；返回值为1为元素节点，2为属性节点，3为文本节点。
<body id="b1">
<h3>三号标题</h3>
<b>加粗内容</b>
<script>
var by = document.getElementById("b1");
var str;
str = "节点名称：" + by.nodeName +"\n";
str += "节点类型：" + by.nodeType +"\n";
str += "节点值：" +by.nodeValue +"\n";
alert(str);
</script>
</body>3、遍历文档树
- parentNode 返回当前节点得父节点
- childNodes 子节点列表
- firstChild 返回当前节点的第一个子节点
- lastChild 返回当前节点的最后一个子节点
- previousSibling 返回当前节点的前一个兄弟节点
- nextSibling 返回当前节点的后一个兄弟节点
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body id="b1">
<h3>三号标题</h3>
<b>加粗内容</b>
<form name="frm" action="#" method="get">
节点名称：<input type="text" id="na" /><br>
节点类型：<input type="text" id="ty" /><br>
节点的值：<input type="text" id="va" /><br>
<input type="button" value="父节点" onclick="txt=nodeS(txt,'parent');" />
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,'firstChild');" />
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,'lastChild');" />
<input type="button" value="前一个兄弟节点" type="button" onclick="txt=nodeS(txt,'previousSibling');" />
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,'nextSibling');" />
<input type="button" value="返回根节点" onclick="txt=document.documentElement:txtUpdate(txt,'parent');" />
</form>
<script>
function txtUpdate(txt){
window.document.frm.na.value = txt.nodeName;
window.document.frm.ty.value = txt.nodeType;
window.document.frm.va.value = txt.nodeValue;
}
function nodeS(txt,nodeName){
switch(nodeName){
case "previousSibling":
if(txt.previousSibling){
txt = txt.previousSibling;
}else
alert("无兄弟节点");
break;
case "parent":
if(txt.parentNode){
txt = txt.parentNode;
}else
alert("无父节点");
break;
case "firstChild":
if(txt.hasChildNodes()){
txt = txt.firstChild;
}else
alert("无子节点");
break;
case "lastChild":
if(txt.hasChildNodes()){
txt = txt.firstChild;
}else
alert("无子节点");
break;
}
txtUpdate(txt);
return txt;
}
var txt = document.documentElement;
txtUpdate(txt);
function ar(){
var n = document.documentElement;
alert(n.length);
}
</script>
</body>
</html>4、节点
1、创建节点
三个方法：
createElement（）方法 创建新的元素
createTextNode() 方法 创建文本节点
appendChild()方法 将新的子节点添加到当前节点的末尾
appendChild()方法语法格式 =》 obj.appendChild(newChild) 在该节点末尾插入新的节点。
<body onload="createChild()">
<script>
function createChild(){
var b = document.createElement("b");
var txt = document.createTextNode("创建新节点");
b.appendChild(txt);
document.body.appendChild(b);
}
</script>
</body>2、创建多个节点
创建多个节点通过使用循环语句，利用createElement()和createTextNode()方法生成新元素并生成文本节点，最后通过使用appendChild()方法将创建的新节点添加到页面上。
<script>
function dc(){
var aText = ["第一个节点","第二个节点","第三个节点",
"第四个节点","第五个节点","第六个节点","第七个节点",]
for(var i = 0;i<aText.length;i++){
var ce = document.createElement("p");
var cText = document.createTextNode(aText[i]);
ce.appendChild(cText);
document.body.appendChild(ce);
}
}
</script>createDocumentFragment()方法用来创建文件碎片节点
<body onload="dc()">
<script>
function dc(){
var aText = ["第一个节点","第二个节点","第三个节点",
"第四个节点","第五个节点","第六个节点","第七个节点",];
var cdf = document.createDocumentFragment();
for(var i = 0;i<aText.length;i++){
var ce = document.createElement("b");
var cb = document.createElement("br");
var cText = document.createTextNode(aText[i]);
ce.appendChild(cText);
cdf.appendChild(ce);
cdf.appendChild(cb);
document.body.appendChild(cdf);
}
}
</script>3、插入和追加节点
插入节点通过使用insertBefore()方法来实现。
语法格式：obj.insertBefore(new,ref)
<script>
function crNode(str){
var newP = document.createElement("p");
var newTxt = document.createTextNode(str);
newP.appendChild(newTxt);
return newP;
}
function insertNode(nodeId,str){
var node = document.getElementById(nodeId);
var newNode = crNode(str);
if(node.parentNode) //是否拥有父节点
node.parentNode.insertBefore(newNode,node);
}
</script>
</head>
<body onload="dc()">
<h2 id="h">在上面插入节点</h2>
<form id="frm" name="frm">
输入文本：<input type="text" name="txt" />
<input type="button" value="前插入" onclick="insertNode('h',document.frm.txt.value);" />
</form>
</body>4、节点复制
复制节点可以使用cloneNode（）方法来实现；
<script>
function AddRow(b1){
var sel = document.getElementById("sexType");
var newSelect = sel.cloneNode(b1);
var b = document.createElement("br");
di.appendChild(newSelect);
di.appendChild(b);
}
</script>
</head>
<body>
<form>
<hr />
<select name="sexType" id="sexType">
<option value="%">请选择性别：</option>
<option value="0">0</option>
<option value="1">女</option>
</select>
<hr>
<div id="di"></div>
<input type="button" value="复制" onclick="AddRow(false)" />
<input type="button" value="深度复制" onclick="AddRow(true)" />
</form>5、删除与替换节点
删除节点通过使用removeChild（）方法，动态删除页面中所选的文本。
<script>
function delNode(){
var deleteN = document.getElementById("di");
if(deleteN.hasChildNodes()){
deleteN.removeChild(deleteN.lastChild);
}
}
</script>
</head>
<body>
<h1>删除和替换节点</h1>
<div id="di">
<p>第一行文本</p>
<p>第二行文本</p>
<p>第三行文本</p>
</div>
<input type="button" value="删除" onclick="delNode();" />
</body>替换节点通过使用replaceChild（）方法。
语法格式：obj.replaceChild(new,old)
new表示要替换的新节点，old表示被替换的旧节点
function repN(str,bj){
var rep = document.getElementById("b1");
if(rep){ //如果元素存在,就创建一个新元素
var newNode = document.createElement(bj);
newNode.id = "b1";
var newText = document.createTextNode(str);
newNode.appendChild(newText);
rep.parentNode.replaceChild(newNode,rep);
}
}
</script>
</head>
<body>
<b id="b1">可以替换的文本内容</b>
<br>
输入标记：<input type="text" id="bj" size="15"/><br />
输入文本：<input type="text" id="txt" size="15" /><br>
<input type="button" value="替换" onclick="repN(txt.vaue,bj.value);" />
</body>6、获取文档中的指定元素；
通过元素的id属性来获取元素；
如：获取文档中id属性为userId的节点，document.getElementById("userId");
通过元素的name属性来获取元素；
使用document对象的getElementsByName（）方法
<script>
var len = document.getElementsByName("i"); //获取name属性值为i的元素
var pos = 0; //定义变量值为0;
function changeimage(){
len[pos].style.display = "none"; //影藏元素
pos++; //变量值加i
if(pos == len.length) pos = 0;//变量值重新定义为0;
len[pos].style.display = "block"; //显示元素
}
setInterval("changeimage()",3000);//每隔3秒执行一次changeimage()函数.
</script>
</head>
<body>
<div id="tabs">
<a name="i" href="#"><img src="img/me.jpg" width="100%" height="320"></a>
<a name="i" href="#"><img src="img/prpject.jpg" width="100%" height="320"></a>
</div> 
