替换节点：
- replaceChild()
- 把一个给定父元素里的一个子节点替换为另外一个子节点
- var reference = element.replaceChild(newChild,oldChild);
- 返回值是一个指向已被替换的那个子节点的引用指针。
- 如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</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>
xxxxxx
</p>精英
</li>
<li id="ms" value="moshou">
魔兽
</li>
<li id="cq" value="chuanqi">
传奇
</li>
</ul>
</body>
<script language="JavaScript">
//点击北京节点， 将被反恐节点替换
// var bj = document.getElementById("bj");
// bj.onclick = function(){
// var fk = document.getElementById("fk");
// var parentNode = bj.parentNode;
// parentNode.replaceChild(fk,bj);
// }
//点击北京节点， 将被反恐节点替换
document.getElementById("bj").onclick = function(){
var oldChild = this;
var newChild = document.getElementById("fk");
//获取北京的父节点
var bjParent = oldChild.parentNode;
var index = bjParent.replaceChild(newChild, oldChild);
alert(index.id);//返回是一个已被替换的节点的引用指针(bj)
}
</script>
</html>
查找属性节点：
- getAttribute() 返回一个给定元素的一个给定属性节点的值
- var attributeValue = element.getAttribute(attributeName);
- 给定属性的名字必须以字符串的形式传递给该方法。
- 给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个空字符串.
- 通过属性获取属性节点
- getAttributeNode(属性的名称)--Node
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="tname" value="传智播客5周年_1" id="tid_1">
<br>
<input type="text" name="tname" value="传智播客5周年_2" id="tid_2">
<br>
<input type="text" name="tname" value="传智播客5周年_3" id="tid_3">
<br>
<input type="button" name="ok" value="保存1"/>
</form>您喜欢的城市:
<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="xingjixxxxx">
星际争霸
</li>
</ul>
</body>
<script language="JavaScript">
//<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
var xj = document.getElementById("xj");
alert(xj.getAttribute("value"));
</script>
</html>设置属性节点：
- setAttribute()将给定元素节点添加一个新的属性值或改变它的现有属性的值。
- element.setAttribute(attributeName,attributeValue);
- 属性的名字和值必须以字符串的形式传递给此方法
- 如果这个属性已经存在，它的值将被刷新；
- 如果不存在，setAttribute()方法将先创建它再为其赋值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</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>
</body>
<script language="JavaScript">
//给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
var xj = document.getElementById("xj");
alert(xj.getAttribute("name"));//null
//测试
xj.setAttribute("name", "xingjizhengba");
alert(xj.getAttribute("name"));
</script>
</html>
创建新元素节点：
- createElement()：按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.
- var reference = document.createElement(element);
- 方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。
- 新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象.
- var pElement = document.createElement("p");
创建新文本节点 ：
- createTextNode()
- 创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
- var textNode = document.createTextNode(text);
- 方法只有一个参数：新建文本节点所包含的文本字符串
- 方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.
- 新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性
插入节点（1）：
- appendChild()为给定元素增加一个子节点：
- var newreference = element.appendChild(newChild).
- 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
- 方法的返回值是一个指向新增子节点的引用指针。
- 该方法通常与 createElement() 、createTextNode() 配合使用
- 新节点可以被追加给文档中的任何一个元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</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>
</body>
<script language="JavaScript">
//增加城市节点 <li id="tj" v="tianjin">天津</li>
//创建元素节点li
//<li></li>
var li = document.createElement("li");
// <li id="tj" v="tianjin"></li>
li.setAttribute("id","tj");
li.setAttribute("v","tianjin");
//天津
var text = document.createTextNode("天津");
//<li id="tj" v="tianjin">天津</li>
li.appendChild(text);
//获取城市节点
var city = document.getElementById("city");
city.appendChild(li);
</script>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
</body>
<script language="JavaScript">
//增加<option value="大专">大专^^^^^</option>
//创建<option>
var option = document.createElement("option");
//<option value="大专"></option>
option.setAttribute("value", "大专");
//<option value="大专">大专^^^^^</option>
var text = document.createTextNode("大专^^^^^");
option.appendChild(text);
//获取edu的select元素
var edu = document.getElementById("edu");
edu.appendChild(option);
</script>
</html>
插入节点（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">
<html>
<head>
<title>insertBefore.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul>
<li id="bj" name="beijing">
北京
</li>
<li id="sh" name="shanghai">
上海
</li>
<li id="cq" name="chongqing">
重庆
</li>
</ul>
</body>
<script language="JavaScript">
// 插入新的节点 <li id="tj" name="tianjin">天津</li>
var tj = document.createElement("li");
tj.setAttribute("id", "tj");
tj.setAttribute("name", "tianjin");
//创建文本节点
var text = document.createTextNode("天津")
tj.appendChild(text);
// 在 <li id="cq" name="chongqing">重庆</li>的前面
//获取重庆的节点
var cq = document.getElementById("cq");
//获取重庆的父节点
var parent = cq.parentNode;
parent.insertBefore(tj, cq);
</script>
</html>
插入节点（3）：
- DOM 没有提供 insertAfter() 方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>insertBefore.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul>
<li id="bj" name="beijing">
北京
</li>
<li id="sh" name="shanghai">
上海
</li>
<li id="cq" name="chongqing">
重庆
</li>
</ul>
</body>
<script language="JavaScript">
// 插入新的节点 <li id="tj" name="tianjin">天津</li>
var tj = document.createElement("li");
tj.setAttribute("id", "tj");
tj.setAttribute("name", "tianjin");
//创建文本节点
var tjText = document.createTextNode("天津");
tj.appendChild(tjText);
// 在 <li id="sh" name="shanghai">上海</li>的后面
//获取上海的节点
var sh = document.getElementById("sh");
//获取上海的父节点
var shParent = sh.parentNode;
//获取上海的下一个兄弟节点
var shNext = sh.nextSibling;
shParent.insertBefore(tj, shNext);
</script>
</html>
练习：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>insertBefore.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul>
<li id="cq" name="chongqing">重庆</li>
<li id="sh" name="shanghai">上海</li>
</ul>
</body>
<script language="JavaScript">
//插入新的节点 <li id="tj" name="tianjin">天津</li> 到<li id="sh" name="shanghai">上海</li>这个节点
// 如上海节点是最后一个节点插入到该节点的<li id="sh" name="shanghai">上海</li>的后面，
// 否则插入到该节点的前面
//创建天津节点
var tj = document.createElement("li");
tj.setAttribute("id","sh");
tj.setAttribute("name","shanghai");
var tjText = document.createTextNode("天津");
tj.appendChild(tjText);
//获取上海的节点
var sh = document.getElementById("sh");
//获取上海的父节点
var shParent = sh.parentNode;
//判断上海节点的父节点的最后一个子节点是否是上海（sh）节点
//方法一：
// if(shParent.lastChild.id=="sh"){
// shParent.appendChild(tj);
// }else{
// shParent.insertBefore(tj,sh);
// }
//上海是最后一个子节点
//方法二：
if(sh.nextSibling==null){
shParent.appendChild(tj);
}else{
shParent.insertBefore(tj,sh);
}
</script>
</html>删除节点：
- removeChild()：从一个给定元素里删除一个子节点
- var reference = element.removeChild(node);
- 返回值是一个指向已被删除的子节点的引用指针。
- 某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
- 如果想删除某个节点，但不知道它的父节点是哪一个，parentNode 属性可以帮忙。
<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul> var liElement=document.getElementById("beijing"); var parentElement=liElement.parentNode; parentElement.removeChild(liElement);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>insertBefore.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
</body>
<script language="JavaScript">
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
//获取北京的元素节点
var bj = document.getElementById("bj");
//获取北京的父节点
var bjParent = bj.parentNode;
//删除北京
var index = bjParent.removeChild(bj);
alert(index.id);
</script>
</html>
遍历节点树：
- ChildNodes：返回一个数组，这个数组由给定元素节点的子节点构成：
- var nodeList = node.childNodes;
- 文本节点和属性节点都不可能再包含任何子节点，所以它们的 ChildNodes 属性永远会返回一个空数组。
- 如果想知道某个元素有没有子节点，可以用 hasChildNodes 方法。
- 如果想知道某个元素有多少个子节点，可以用 childNodes 数组的 length 属性。
- childNodes 属性是一个只读属性。
获取第一个子节点：
- firstChild：该属性返回一个给定元素节点的第一个子节点，返回这个节点对象的指针。
- var reference = node.firstChild;
- 文本节点和属性节点都不可能包含任何子节点，所以它们的 firstChild 属性永远会返回 null。
- 某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点，即：
- var reference = node.ChildNodes[0];
- firstChild 属性是一个只读属性。
获取最后一个子节点：
- lastChild：对应 firstChild 的一个属性。
- nextSibling: 返回一个给定节点的下一个兄弟节点。
- parentNode：返回一个给定节点的父节点。
- parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
- document 节点的没有父节点。
- previousSibling：返回一个给定节点的上一个兄弟节点
innerHTML属性：
- 浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
- innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script language="JavaScript">
window.onload = function(){
var city = document.getElementById("city");
//读取div中的文本fff的值
alert(city.innerHTML);
//在div层中插入 <h1>今天</h1>
city.innerHTML = "<h1><font color='red'>今天</font></h1>";
//innerHTML和innerText的区别
//innerHTML可以解析HTML标签
//innerText不能解析HTML标签
city.innerText = "<h1><font color='red'>今天</font></h1>";
}
</script>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="city">
fff
</div>
</body>
</html>
user.xml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加用户</title>
</head>
<body>
<center>
<br><br>
添加用户:<br><br>
姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
<button id="addUser">提交</button>
<br><br>
<hr>
<br><br>
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=Tom">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=Jerry">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
<script language="JavaScript">
//当文档加载完毕， 才执行该函数体的内容
window.onload = function(){
document.getElementById("addUser").onclick = function(){
/*
姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <input type="text" name="tel" id="tel" /><br><br>
*/
//获取相应的值
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var tel = document.getElementById("tel").value;
/*
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=Jerry">Delete</a></td>
</tr>
*/
//创建4个td和1个tr
//第一个td <td>Jerry</td>
var tdName = document.createElement("td");
var textName = document.createTextNode(name);
tdName.appendChild(textName);
var tdEmail = document.createElement("td");
var textEmail = document.createTextNode(email);
tdEmail.appendChild(textEmail);
var tdTel = document.createElement("td");
var textTel = document.createTextNode(tel);
tdTel.appendChild(textTel);
//<td><a href="deleteEmp?id=Jerry">Delete</a></td>
var tdDelete = document.createElement("td");
var aE = document.createElement("a");
aE.setAttribute("href","deleteEmp?id="+name);
var textDelete = document.createTextNode("Delete");
aE.appendChild(textDelete);
tdDelete.appendChild(aE);
//创建一个tr,并将4个td添加到tr中
var tr = document.createElement("tr");
tr.appendChild(tdName);
tr.appendChild(tdEmail);
tr.appendChild(tdTel);
tr.appendChild(tdDelete);
/*
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
*/
//将tr添加到tbody中
//获取table对象
var usertable = document.getElementById("usertable");
//获取table中的tbody
//该方法，IE浏览器支持，火狐浏览器不支持
// var tbody = usertable.firstChild;
//将tr添加到tbody中
// tbody.appendChild(tr);
//即让IE浏览器支持，火狐浏览器也支持
//创建一个tbody
var tbody = document.createElement("tbody");
//在创建的tbody中添加tr
tbody.appendChild(tr);
usertable.appendChild(tbody);
//处理删除，将添加的一行删除
aE.onclick = function(){
return deleteTr(this);
}
}
function deleteTr(aE){
/*
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=Jerry">Delete</a></td>
</tr>
*/
var name = aE.parentNode.parentNode.firstChild.firstChild.nodeValue;
var flag = window.confirm("您确定要删除["+name+"]吗？");
if(flag){
//查找tbody
var tbody = aE.parentNode.parentNode.parentNode;
//查找tr
var tr = aE.parentNode.parentNode;
//tbody删除tr
tbody.removeChild(tr);
}
return false;
}
}
</script>
</html>
1407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
