Article Directory
Continued articles, DOM node query
First, the method CRUD
1.1 create a node (increase)
Creates an element node object
- document.createElement()
- Masterpiece tag parameters, and returns the object
Create a text node object
- document.createTextNode()
- Text as a parameter, create a text node based on the content
For example:
//创建li元素对象
var li = document.createElement("li");
//创建广州文本节点
var gzTevxt=document.createTextNode("广州");
1.2 Adding a child node to the parent node
appendChild()
- Syntax: parent .appendChild (child node);
- For text node: parent node .innerHTML = "Content";
For example
//将广州文本节点设置为li的字节点
li.appendChild(gztext)；
//效果:<li>广州</li>
1.3 Replacement Node
replaceChild()
- Syntax: parent .replaceChild (new node, old node)
//获取北京节点
var bj = document.getElementById("bj");
//获取city父节点
var city = document.getElementById("city");
//广州替换北京节点
city.replaceChild(li,bj);
1.4 Delete Node
removeChild()
- Parent .removeChild (child node)
or
- Child node .parentNode.removeChild (child node)
//父节点删除子节点
city.removeChild(bj);
//自己删除自己
bj.parentNode.removeChild(bj);
1.5 summary
- Create a node for the document calls
- The remaining parent node method invocation
Second, exercise
2.1 Topic
2.2 Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
// 创建一个"广州节点",添加到#city下
myClick("btn01",function(){
//创建广州节点<li>广州</li>
//创建li元素节点
/**
* document.createElement()
* - 可以用于创建一个元素节点对象
* - 它需要一个标签名作为参数,将会根据该标签名创建节点对象
* - 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建广州文本节点
/**
* document.createTextNode()
* - 创建一个文本节点对象
* - 需要一个文本内容作为参数，根据内容创建文本节点
* - 将新的节点返回
*/
var gzText=document.createTextNode("广州");
//将gzText设置li的子节点
/**
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法:父节点.appendChild(子节点);
*
*/
li.appendChild(gzText);
//获取id为city的节点
var city =document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
// 将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建一个广州节点
var li =document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取北京节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/**
* insertBefore()
* - 可以在指定子节点插入新的字节点
* - 语法:父节点.insertBefore(新子节点,旧子节点)
*/
city.insertBefore(li,bj)
})
// 将"广州"节点替换#bj节点
myClick("btn03",function(){
//创建一个广州节点
var li =document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取北京节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/**
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法:父节点.replaceChild(新节点,旧节点);
*
*/
city.replaceChild(li,bj);
})
// 删除#bj节点
myClick("btn04",function(){
//获取北京的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/**
* removeChild()
* - 可以删除一个子节点
* - 语法:父节点.removeChild(子节点);
*
* 子节点.parentNode.removeChild(子节点)
*/
//city.removeChild(bj);
bj.parentNode.removeChild(bj);
})
// 读取#city内的HTML代码
// 设置#bj内的HTML代码
//向#city增加一个广州
myClick("btn07",function(){
//向city中添加广州
var city = document.getElementById("city");
/**
* 使用innerHTML也可以完成DOM的增删改操作
* 一般我们会两种方式结合使用
*/
//city.innerHTML +="<li>广州</li>"
//创建一个<li>
var li = document.createElement("li");
//向li中设置文本
li.innerHTML="广州";
//将li添加到city中
city.appendChild(li);
})
}
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick=fun;
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市？
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州节点",添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">将"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">向#city添加一个广州</button></div>
</div>
</body>
</html>
