Node节点对象?
HTML文档中的每一个标签都是一个节点对象,节点对象具有自己的属性和方法。
Node节点对象作用?
可以动态的添加、修改(替换)、删除、克隆html元素节点。
如何操作节点?
Node节点对象的属性和方法解决。
1. 查 ==>> 后面需要用到,先学
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select class="testLei" id="city">
<option value="cd">成都</option>
<option value="cq">重庆</option>
<option value="km">昆明</option>
</select>
<script type="text/javascript">
//1.常用的Node对象的属性:
/*
parentNode 父节点
firstChild 列表中的第一个节点
firstElementChild 第一个元素节点
lastChild 列表中的最后一个节点
lastElementChild 最后一个元素节点
childNodes 所有子节点的集合
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟元素节点
nextSibling 下一个兄弟节点
nextElementSibling 下一个兄弟元素节点
nodeName 节点名称
nodeValue 节点值
nodeType 节点类型
getAttributeNode("属性的名称") 获取属性节点
*/
var city=document.getElementById("city");
var ops=city.options;
//option的父亲是select
console.log(ops[0].parentNode);
//找大儿子,文本或子元素
console.log(city.firstChild);
console.log(city.firstElementChild);
//找幺儿子,文本或子元素
console.log(city.lastChild);
console.log(city.lastElementChild);
//找所以的儿子的集合
console.log(city.childNodes);
var sons=city.childNodes;
for (var i = 0; i < sons.length; i++) {
console.log(sons[i]);
}
//找兄弟
console.log(ops[1].nextSibling);
console.log(ops[1].nextElementSibling);
//------------------------------------------------------------------
//输出元素节点名称、值、类型
//city 是一个元素节点
console.log(city.nodeName,city.nodeValue,city.nodeType);
//输出文本节点名称、值、类型
var textNode=city.firstElementChild.firstChild;//第一option的文本,即“成都”
console.log(textNode.nodeName,textNode.nodeValue,textNode.nodeType);
//输出属性节点名称、值、类型
var shuxingNode=city.getAttributeNode("class");
console.log(shuxingNode.nodeName,shuxingNode.nodeValue,shuxingNode.nodeType);
//-------------------------------------------------------------------
/*
nodeName nodeValue nodeType
Element(元素) 标签名称 null 1
Attribute(属性) 属性的名称 属性的值 2
Text(文本) #text 文本的内容 3
*/
</script>
</body>
</html>
2. 增
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
1.增加的操作:
createElement("标签名称") 创建一个元素节点
createTextNode("文本的内容") 创建文本节点
setAttribute("属性名称","属性的值") 设置属性(创建属性节点)
父元素.appendChild("子元素节点") 在父元素的末尾添加一个儿子节点
父元素.insertBefore("新的节点", "指定位置的节点") 在父元素的指定位置插入一个新的节点
*/
//添加一个a标签,href属性为http://www.itsource.cn,内容为”源码时代教育”,添加到网页的body中
//添加节点的五部曲:
//(1)创建元素节点
var a=document.createElement("a");
//(2)创建文本节点
var aText=document.createTextNode("源码时代教育");
//(3)创建属性节点
a.setAttribute("href","http://www.itsource.cn");
//(4)文本值A的儿子
a.appendChild(aText);
//(5)把创建的所有元素(标签,属性,文本)添加到指定位置
document.body.appendChild(a);
</script>
<select class="testLei" id="city">
<option value="cd">成都</option>
<option value="cq">重庆</option>
<option value="km">昆明</option>
</select>
<script type="text/javascript">
//在重庆的前面加入一个选项是贵州
//(1)找父亲
var city=document.getElementById("city");
//(2)创建一个option标签
var op=document.createElement("option");
//(3)创建一个文件节点 贵州
var opText=document.createTextNode("贵州");
//(4)设置option的value属性
op.setAttribute("value","gz");
op.setAttribute("selected","selected")
//(5)把文本添加到选项里面
op.appendChild(opText);
//(6)添加到结尾就用appendChild,添加到自定位置就用insertBefore
city.insertBefore(op,city.options[1]);
</script>
</body>
</html>
3. 改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select class="testLei" id="city">
<option value="cd">成都</option>
<option value="cq">重庆</option>
<option value="beijing">beijing</option>
<option value="tianjin">天津111</option>
<option value="wh">武汉</option>
<option value="km">昆明</option>
</select>
<script type="text/javascript">
//replaceChild(newnode, oldnode) 将childNodes中的oldnode替换成newnode
var city=document.getElementById("city");
var ops=city.options;
//方法1 直接修改属性的值
//ops[2].text="北京";
ops[2].innerText="北京";
ops[2].value="bj";
ops[2].setAttribute("name","测试");
//方法2
//创建一个新的节点
var op=document.createElement("option");
var opText=document.createTextNode("天津");
op.appendChild(opText);
op.setAttribute("value","tj");
op.setAttribute("selected","selected");
//用新的节点替换旧的节点
city.replaceChild(op,ops[3]);
</script>
</body>
</html>
4. 删
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select class="testLei" id="city">
<option value="cd">成都</option>
<option value="cq">重庆</option>
<option value="beijing">beijing</option>
<option value="tianjin">天津111</option>
<option value="wh">武汉</option>
<option value="km">昆明</option>
</select>
<script type="text/javascript">
//removeChild(node) 从childNodes中删除node
//remove() 找到自己干掉自己
//hasChildNodes() 当有子节点时返回真true,否则为假false
//删除单个指定的节点--武汉
//city.removeChild(ops[4]);
ops[4].remove();
//删除所的节点
//最简单的方法(推荐)
//city.innerHTML="";
//用while循环来删除所有
//只要有儿子,就依次干掉儿子
while (city.hasChildNodes()){
city.removeChild(city.firstChild);
}
</script>
</body>
</html>
文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出