创建一个元素节点
1).createElement():按照给定的标签名创建一个新的元素节点。
方法只有一个参数:被创建的元素节点的名字，是一个字符串。方法的返回值:是一个指向新建节点的引用指针。返回值是一个元素节点，所以他的nodeType属性值等于1.
新文档节点不会自动添加到文档里，他只是一个存在于JavaScript上下文中的对象，活在内存中。
var liNode = docuemnt.createElement("li");
var cityNode = document.getElement
创建一个文本节点
1).createTextNode():创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新节点的引用。方法只有一个参数:新建文本节点所包含的文本字符串，新元素节点不会自动添加到文档里。
为元素节点添加子节点
1）.appendChild():
var reference = element.appendChild(newChild):
给定子节点newChild将成为给定元素节点element的最后一个子节点。
方法的返回值是一个指向子节点的引用指针。
节点的替换：
1).replaceChild():把一个给定父元素里的一个节点替换为另外一个子节点。
##实例代码
需求1: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: “请选择类型”;
// 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: “请输入内容”;
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
//需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
<!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>Insert title here</title>
<script type="text/javascript">
//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
// 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
//需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
window.onload = function(){
function showContent(liNode){
alert("^_^#" + liNode.firstChild.nodeValue);
}
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
showContent(this);
}
}
//1. 获取 #submit 对应的按钮 submitBtn
var submit = document.getElementById("submit");
//2. 为 submitBtn 添加 onclick 响应函数
submit.onclick = function(){
//4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"
//4.1 选择所有的 name="type" 的节点 types
var types = document.getElementsByName("type");
//4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明
//有一个 type 被选中了: 通过 if(元素节点.属性名) 来判断某一个元素节点是否有
//该属性.
var typeVal = null;
for(var i = 0; i < types.length; i++){
if(types[i].checked){
typeVal = types[i].value;
break;
}
}
//4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束:
//return false
if(typeVal == null){
alert("请选择类型");
return false;
}
//5. 获取 name="name" 的文本值: 通过 value 属性: nameVal
var nameEle = document.getElementsByName("name")[0];
var nameVal = nameEle.value;
//6. 去除 nameVal 的前后空格.
var reg = /^\s*|\s*$/g;
nameVal = nameVal.replace(reg, "");
//使 name 的文本框也去除前后空格.
nameEle.value = nameVal;
//6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
//方法结束: return false
if(nameVal == ""){
alert("请输入内容");
return false;
}
//7. 创建 li 节点
var liNode = document.createElement("li");
//8. 利用 nameVal 创建文本节点
var content = document.createTextNode(nameVal);
//9. 把 8 加为 7 的子节点
liNode.appendChild(content);
//11. 为新创建的 li 添加 onclick 响应函数
liNode.onclick = function(){
showContent(this);
}
//10. 把 7 加为选择的 type 对应的 ul 的子节点
document.getElementById(typeVal)
.appendChild(liNode);
//3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的
//默认行为.
return false;
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<form action="dom-7.html" name="myform">
<input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏
name: <input type="text" name="name"/>
<input type="submit" value="Submit" id="submit"/>
</form>
</body>
</html>
节点的替换
1).replaceChild():把一个给定元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针(oldChild)
2).该节点除了替换功能以外还有移动的功能。
3).该方法只能完成单向替换，若需要使用双向替换，需要自定义函数：
???疑问，replaceChild实现两个节点替换的思路怎么和a，b两个值替换的不一样
答：你就把replace当成移动，我复制我自己，我把复制的移动到他，他再移动到我。
//自定义互换两个节点的函数
function replaceEach(aNode, bNode){
//1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
var aParent = aNode.parentNode;
var bParent = bNode.parentNode;
if(aParent && bParent){
//2. 克隆 aNode 或 bNode
var aNode2 = aNode.cloneNode(true);
//3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
//方法实现节点的互换
bParent.replaceChild(aNode2, bNode);
aParent.replaceChild(bNode, aNode);
//??????????????????????我觉得这两行代码换一下才对头，找不到源码不知道为什么
}
}
ex-4
需求: 为所有的 li 节点添加 onclick 响应函数
实现 city 子节点和 game 子节点对应位置的元素的互换
<!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>Insert title here</title>
<script type="text/javascript">
//需求: 为所有的 li 节点添加 onclick 响应函数
//实现 city 子节点和 game 子节点对应位置的元素的互换
window.onload = function(){
//自定义互换两个节点的函数
function replaceEach(aNode, bNode){
//1. 获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
var aParent = aNode.parentNode;
var bParent = bNode.parentNode;
if(aParent && bParent){
//2. 克隆 aNode 或 bNode
var aNode2 = aNode.cloneNode(true);
//克隆 aNode 的同时, 把 onclick 事件也复制.
aNode2.onclick = aNode.onclick;
//克隆 aNode 的同时, 把 onclick 事件也复制. 不这么做的话换完一次就不能换第二次。
aNode2.index = aNode.index;
//3. 分别调用 aNode 的父节点和 bNode 的父节点的 replaceChild()
//方法实现节点的互换
bParent.replaceChild(aNode2, bNode);
aParent.replaceChild(bNode, aNode);
}
}
//1. 获取所有的 li 节点
var liNodes = document.getElementsByTagName("li");
//2. 为每一个 li 节点添加 Onclick 响应函数
for(var i = 0; i < liNodes.length; i++){
//手动为每个 li 节点添加一个 index 属性
liNodes[i].index = i;
liNodes[i].onclick = function(){
//alert("index: " + this.index);
//3. 找到和当前节点对应的那个 li 节点
var targetIndex = 0;
if(this.index < 4){
targetIndex = 4 + this.index;
}else{
targetIndex = this.index - 4;
}
//交换 index 属性.
var tempIndex = this.index;
this.index = liNodes[targetIndex].index;
liNodes[targetIndex].index = tempIndex;
//4. 互换.
replaceEach(this, liNodes[targetIndex]);
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<form action="dom-7.html" name="myform">
<input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏
name: <input type="text" name="name"/>
<input type="submit" value="Submit" id="submit"/>
</form>
</body>
</html>
可以看出要交换两个节点，要交换onclick，index，节点。
删除节点
removeChild():从一个给定元素删除里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。某个节点被remove()方法删除时,这个节点包含的所有节点都同时被删除。
如果想删除某个节点，但不知道它的父节点是哪一个，parentNode属性可以帮忙。
innerHTML属性:
浏览器几乎都支持该属性，但不是DOM标准的组成部分。innerHTML属性可以用来读，写某个元素里的HTML内容
插入节点:
insertBefore(newNode,refNode)
若newNode是文档中的节点,也具有移动节点的功能
1760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
