JavaScript 基础操作总结（二）
1. 创建一个元素节点：
1). createElement()： 按照给定的标签名创建一个新的元素节点。
方法只有一个参数： 被创建的元素节点的名字，是一个字符串
方法的返回值：是一个指向新建节点的引用指针 。返回值是一个元素节点，
所以它的 nodeType 属性值等于 1.
**新元素节点不会自动添加到文档里，它只是一个存在于 JavaScript 上下文的对象
3. 为元素节点添加子节点：
1). appendChild():
var reference = element.appendChild(newChild);
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
4. 创建一个文本节点：
1). createTextNode(): 创建一个包含着给定文本的新文本节点。
这个方法的返回值是一个指向新建文本节点引用指针。
它是一个文本节点，所以它的 nodeType 属性等于 3.
方法只有一个参数：新建文本节点所包含的文本字符串。新元素节点不会自动添加到文档里
//1. document.createElement(elementTagName)
// 新创建一个元素节点，返回值为指向元素节点的引用
//<li></li>
var liNode = document.createElement("li");
// 创建"西安" 的文本节点
//<li>西安</li>
var xaNode = document.createTextNode("西安");
liNode.appendChild(xaNode);
var cityNode = document.getElementById("city");
//2. elementNode.appendChild(newChild): 为 element
// 新添加一个 newChild 子节点，该子节点将作为 elementNode 的最后一个子节点
cityNode.appendChild(liNode);
需求1：点击 submit 按钮时，检查是否选择 type，若没有选择给出提示："请选择类型"
检查文本框中是否有输入（可以除去前后空格），若没有输入，则给出提示："请输入内容"
若检查都通过，则在相应的 ul 节点中添加对应的 li 节点
需求2. 使包括新增的 li 都能响应 onclick 事件，弹出文本值
<script type="text/javascript">
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 submitBtn = document.getElementById("submit");
//2. 为 submitBtn 添加 onclick 响应函数
submitBtn.onclick = function(){
//4. 检查是否选择 type，若没有选择给出提示："请选择类型"
//4.1 选择所有的 name = "type" 的节点的 types
var types = document.getElementsByName("type");
//4.2 遍历 types，检查其是否有一个 type 的checked 属性存在，
var typeVal = null
for(var i = 0; i < types.length; i++){
//就可说明有一个 type 被选中:通过 if(元素节点.属性名) 来判断元素节点是否有该属性
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;
//7. 把 nameVal 和 "" 进行比较，若是 "" 说明只输入了空格，弹出"请输入内容"，方法结束 return false
if(nameVal == ""){
alert("请输入内容");
return false;
}
//8. 创建 li 节点
var liNode = document.createElement("li");
//9. 利用 nameVal 创建文本节点
var textNode = document.createTextNode(nameVal);
// 为新创建的 li 节点创建响应函数
liNode.onclick = function(){
showContent(this);
}
//10. 把 9 加为 8 的子节点
liNode.appendChild(textNode);
//11. 把 8 加为选择的type 对应的 ul 的子节点
document.getElementById(typeVal).appendChild(liNode);
//3. 在 onclick 响应函数的结尾添加 return false，就可以取消提交按钮的默认行为
return false;
}
}
</script>
<form action="dom-4.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>
5. 节点的替换
1). replaceChild(): 把一个给定父元素节点里的一个子节点替换为另个子节点
var reference = elementNode.replaceChild(newChile, oldChild);
返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能意外还有移动的功能。
3). 该方法只能完成单向替换，若需要使用双向替换需要自定义函数
// 自定义互换两个节点的函数
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);
}
}
*************************************************************************************
//需求： 为所有的 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);
//在克隆节点的同时交换 onclick 事件
aNode2.onclick = aNode.onclick;
//在克隆节点的同时交换 index 属性
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++){
liNodes[i].index = i;
liNodes[i].onclick = function(){
//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]);
}
}
}
6. 删除节点：
1). removeChild(): 从一个给定元素里删除一个字节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除
如果想删除某个节点，但不知道它的父节点时哪一个，parentNode 属性可以帮忙
// 为每个 li 节点 添加一个 confirm（确认对话框）：确定要删除 xx 信息吗
// 若确定，则删除
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
var flag = confirm("确定要删除" +
this.firstChild.nodeValue + "的信息吗？");
if(flag){
this.parentNode.removeChild(this);
}
}
}
<script type="text/javascript">
/*
* 为 #employeetable 的所有 a 节点添加 onclick 响应函数
* 1. 弹出确认对话框： 确定要删除 xx 的信息吗？ xx 为当前 a 节点所在的 td 所在的 tr 的第一个
* td 子节点的文本值，且要去除前后空格
* 2. 若点击 "确认"，则删除 a 节点所在的行
*
* 注意：
* 1. a 节点是一个超级链接，可以在其 onclick 事件中通过返回 false，来取消默认行为
* 2. tr 的之间父节点是 tbody，而不是 table
* 3. 可以把去除前后空格的代码写成一个 trim(str) 函数。
* 需求2： 为 #addEmpButton 添加 onclick 响应函数
*1. 获取 #name， #email， #salary 的文本框的值
*2. 利用 1 获取的文本值创建 3 个它的节点，再创建一个 tr 节点。并把以上的 3 个td 节点加为
* tr 节点的子节点
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
</tr>
*3. 再创建一个 td 节点：<td><a href="deletEmp?id=001">Delete</a></td>
*4. 把 3 创建的 td 也加为 tr 节点的子节点
*5. 再把 tr 加为 #employeetable 的 tbody 子节点的子节点
*6. 为新创建的 tr 的 a 子节点添加 onclick 响应函数，使其也具备删除的功能。
*/
window.onload = function(){
function removeTr(aNode){
var trNode = aNode.parentNode.parentNode;
var textContent = trNode.getElementsByTagName("td")[0]
.firstChild.nodeValue;
//消除前后空格
textContent = trim(textContent);
var flag = confirm("确定要删除" + textContent + "的信息吗？");
if(flag){
trNode.parentNode.removeChild(trNode);
}
return false;
}
//设置 delete 的行为（删除的是 tr）
var aNodes = document.getElementById("employeetable")
.getElementsByTagName("a");
for(var i = 0; i < aNodes.length; i++){
aNodes[i].onclick = function(){
removeTr(this);
return false;
}
}
//***************************新增功能2
document.getElementById("addEmpButten").onclick = function(){
//value: 用于获取 HTML 表单元素的值；nodeValue：只用于获取文本节点的文本值
var nameVal = document.getElementById("name").value;
var emailVal = document.getElementById("email").value;
var salaryVal = document.getElementById("salary").value;
var nameTd = document.createElement("td");
nameTd.appendChild(document.createTextNode(nameVal));
var emailTd = document.createElement("td");
emailTd.appendChild(document.createTextNode(emailVal));
var salaryTd = document.createElement("td");
salaryTd.appendChild(document.createTextNode(salaryVal));
var tr = document.createElement("tr");
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
var aNode = document.createElement("a");
aNode.href = "deletEmp?id=xxx";
aNode.appendChild(document.createTextNode("Delete"));
var aTd = document.createElement("td");
aTd.appendChild(aNode);
tr.appendChild(aTd);
aNode.onclick = function(){
removeTr(this);
return false;
}
document.getElementById("employeetable")
.getElementsByTagName("tbody")[0]
.appendChild(tr);
}
//去除前后空格
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
}
}
</script>
<body>
<center>
<br></br>添加新员工<br></br>
name:<input type="text" name="name" id="name"/>
email:<input type="text" name="email" id="email"/>
salary:<input type="text" name="salary" id="salary"/>
<br></br>
<button id="addEmpButten" value="abc">Submit</button>
<br></br>
<hr>
<br></br>
<table id="employeetable" border="1" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deletEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deletEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>15000</td>
<td><a href="deletEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>