DOM节点常用方法介绍02
1.替换节点
replaceChild()
把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
您喜欢的城市:<br>
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing"> 重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐<p>xxx</p></li>
<li id="ms" value="moshou">魔兽</li>
<li id="cq" value="chuanqi">传奇</li>
</ul>
<script language="javascript">
//点击北京节点，将被反恐节点替换
//改写北京节点的onclick方法
document.getElementById("bj").οnclick=function(){
//获取反恐节点
var fkElement=document.getElementById("fk");
//获取北京节点的父节点
var bjParentElement=this.parentNode;
//替换(反恐的子节点xxx也过去)
var oldElement=bjParentElement.replaceChild(fkElement,this);
//测试
alert(oldElement.getAttribute("value"));
}
</script>
</body>
</html>
2.查找属性节点
getAttribute()
返回一个给定元素的一个给定属性节点的值
var attributeValue = element.getAttribute(attributeName);
给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个空字符串.
通过属性获取属性节点
getAttributeNode(属性的名称)--Node
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
您喜欢的城市:<br>
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="xj" value="xingji">星际争霸</li>
</ul>
<script language="javascript">
//获取"星际争霸"节点的value值
var xjElement=document.getElementById("xj");
alert(xjElement.getAttribute("value"));
</script>
</body>
</html>
3.设置属性节点
setAttribute()
将给定元素节点添加一个新的属性值或改变它的现有属性的值。
element.setAttribute(attributeName,attributeValue);
属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在，它的值将被刷新；
如果不存在，setAttribute()方法将先创建它再为其赋值。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
您喜欢的城市:<br>
<ul>
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="xj" value="xingji">星际争霸</li>
</ul>
<script language="javascript">
//获取"星际争霸"节点，并增加一个name属性
var xjElement=document.getElementById("xj");
//获取当前属性
alert(xjElement.getAttribute("name"));
//增加属性
xjElement.setAttribute("name","xingjizhengba");
//获取增加后的属性
alert(xjElement.getAttribute("name"));
</script>
</body>
</html>
4.创建新元素节点
createElement()
按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.
var reference = document.createElement(element);
方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象.
var pElement = document.createElement("p");
5.创建文本节点
createTextNode()
创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
var textNode = document.createTextNode(text);
方法只有一个参数：新建文本节点所包含的文本字符串
方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性
var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);
6.插入节点1
appendChild()
为给定元素增加一个子节点：
var newreference = element.appendChild(newChild).
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素
4和5、6综合例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" value="beijing">北京</li>
<li id="sh" value="shanghai">上海</li>
<li id="cq" value="chongqing">重庆</li>
</ul>
您喜欢的游戏:<br>
<ul>
<li id="fk" value="fangkong">反恐</li>
<li id="ms" value="moshou">魔兽</li>
<li id="xj" value="xingji">星际争霸</li>
</ul>
<script language="javascript">
//增加城市节点<li id="tj" value="tianjing">天津</li>
//<li></li>
var liElement=document.createElement("li");
//设置属性<li id="tj" value="tianjing"></li>
liElement.setAttribute("id","tj");
liElement.setAttribute("value","tianjing");
//创建文本节点"天津"
var textElement=document.createTextNode("天津");
//增加文本节点"天津"到<li id="tj" value="tianjing"></li>形成<li id="tj" value="tianjing">天津</li>
liElement.appendChild(textElement);
//获取父节点
var cityElement=document.getElementById("city");
//添加<li id="tj" value="tianjing">天津</li>到父节点下
cityElement.appendChild(liElement);
</script>
</body>
</html>
刷新界面后多出了一个"天津"节点，但是我们查看源代码，发现没有"天津"节点，原因是因为我们用过js动态添加的代码通过浏览器的源码查看器是查看不出来的。如果是jsp转过来的是可以看到的。
4和5、6例子2:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<script language="javascript">
//增加节点<option value="大专">大专^^^^^</option>
//创建<option value="大专">大专^^^^^</option>
var optionElement=document.createElement("option");
optionElement.setAttribute("value","大专");
var textElement=document.createTextNode("大专^^^^^");
optionElement.appendChild(textElement);
//获取id="edu"节点
var eduElement=document.getElementById("edu");
//添加
eduElement.appendChild(optionElement);
</script>
</body>
</html>
7.插入节点2
insertBefore()
把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<ul>
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<script language="javascript">
// 插入新的节点 <li id="tj" name="tianjin">天津</li>
// 在 <li id="cq" name="chongqing">重庆</li>的前面
//创建 <li id="tj" name="tianjin">天津</li>
var tjElement=document.createElement("li");
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjing");
var textElement=document.createTextNode("天津");
tjElement.appendChild(textElement);
//获取重庆 <li id="cq" name="chongqing">重庆</li>
var cqElement=document.getElementById("cq");
//获取重庆节点的父节点
var ulElement=cqElement.parentNode;
//插入到重庆前
ulElement.insertBefore(tjElement,cqElement);
</script>
</body>
</html>
8.插入节点3
DOM 没有提供 insertAfter() 方法
我们用自己的实现方式去实现类似于insertAfter() 的方法
例子1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<ul>
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<script language="javascript">
// 插入新的节点 <li id="tj" name="tianjin">天津</li>
// 在 <li id="cq" name="chongqing">上海</li>的后面
//创建 <li id="tj" name="tianjin">天津</li>
var tjElement=document.createElement("li");
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjing");
var textElement=document.createTextNode("天津");
tjElement.appendChild(textElement);
//获取上海 <li id="cq" name="chongqing">重庆</li>
var shElement=document.getElementById("sh");
//获取上海节点的下一个兄弟节点重庆
var nextElement=shElement.nextSibling;
//获取上海节点的父亲节点
var shParentElement=shElement.parentNode;
//添加到上海节点的下一个兄弟节点重庆的前面
shParentElement.insertBefore(tjElement,nextElement);
</script>
</body>
</html>
例子2:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<ul>
<li id="cq" name="chongqing">重庆</li>
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
</ul>
<script language="javascript">
// 插入新的节点 <li id="tj" name="tianjin">天津</li> 到<li id="sh" name="shanghai">上海</li>这个节点
// 如上海节点是最后一个节点插入到该节点的<li id="sh" name="shanghai">上海</li>的后面，
// 否则插入到该节点的前面
//创建<li id="tj" name="tianjin">上海</li>节点
var liElement=document.createElement("li");
liElement.setAttribute("id","tj");
liElement.setAttribute("name","tianjin");
var textElement=document.createTextNode("天津");
liElement.appendChild(textElement);
//获取上海节点
var shElement=document.getElementById("sh");
//获取上海节点的父节点
var shParentElement=shElement.parentNode;
//获取上海节点的父节点中的最后一个子节点
var lastChildParentElement=shParentElement.childNodes[5];
//比对上海节点和上海节点的父节点中的最后一个子节点
if(shElement == lastChildParentElement){
//如果相等，表示上海节点是最后一个节点，此时插入上海节点的后面
shParentElement.appendChild(liElement);
}else{
//如果不相等，表示上海节点不是最后一个节点，此时插入上海节点的前面
shParentElement.insertBefore(liElement,shElement);
}
</script>
</body>
</html>
9.删除节点
removeChild()
从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<ul>
<li id="cq" name="chongqing">重庆</li>
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
</ul>
<script language="javascript">
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
//获取子节点
var bjElement=document.getElementById("bj");
//获取父节点
var cityElement=bjElement.parentNode;
//删除
var oldElement=cityElement.removeChild(bjElement);
//测试
alert("被删除的节点的id是:"+oldElement.getAttribute("id"));
</script>
</body>
</html>
10.遍历节点树
(1)遍历
ChildNodes：返回一个数组，这个数组由给定元素节点的子节点构成：
var nodeList = node.childNodes;
文本节点和属性节点都不可能再包含任何子节点，所以它们的 ChildNodes 属性永远会返回一个空数组。
如果想知道某个元素有没有子节点，可以用 hasChildNodes 方法。
如果想知道某个元素有多少个子节点，可以用 childNodes 数组的 length 属性。
childNodes 属性是一个只读属性。
(2)获取第一个子节点
firstChild：该属性返回一个给定元素节点的第一个子节点，返回这个节点对象的指针。
var reference = node.firstChild;
文本节点和属性节点都不可能包含任何子节点，所以它们的 firstChild 属性永远会返回 null。
某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点，即：
var reference = node.ChildNodes[0];
firstChild 属性是一个只读属性。
(2)获取最后一个子节点
lastChild：对应 firstChild 的一个属性。
nextSibling: 返回一个给定节点的下一个兄弟节点。
parentNode：返回一个给定节点的父节点。
parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。
previousSibling：返回一个给定节点的上一个兄弟节点
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<ul>
<li id="cq" name="chongqing">重庆</li>
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
</ul>
<script language="javascript">
//遍历节点树并输出每个节点的名称
//获取ul节点
var ulELement=document.getElementsByTagName("ul");
//获取ul节点的节点树
var ulChildNodes=ulELement[0].childNodes;
//遍历
for(var i=0;i< ulChildNodes.length;i++){
alert(ulChildNodes[i].nodeName);
}
</script>
</body>
</html>
11.innerHTML属性
浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。
例子:(在div层中插入 <h1>今天</h1>)
老方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<div id="city"></div>
<script language="javascript">
//在div层中插入 <h1>今天</h1>
//创建<h1>今天</h1>
var jintianElement=document.createElement("h1");
var textElement=document.createTextNode("今天");
jintianElement.appendChild(textElement);
//获取div节点
var divElement=document.getElementById("city");
//添加
divElement.appendChild(jintianElement);
</script>
</body>
</html>
使用innerHTML的方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<div id="city"></div>
<script language="javascript">
//在div层中插入 <h1>今天</h1>
document.getElementById("city").innerHTML="<h1>今天</h1>";
</script>
</body>
</html>
