标签：nts 获取 nodetype getattr 文档 innerhtml 小强 访问 div
2017年6月12号 星期一 多云 空气质量：中度污染
内容：JavaScriptDOM对象：访问并操作节点，节点的增删改
备注：
1、代课老师李老师
2、上周五6月9号是刘老师讲课
一、访问并操作节点
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问节点</title>
<script type="text/javascript">
/*
* nodeName:
* 元素节点显示的是标签名称
* 属性节点显示的是属性名称
* 文本节点显示的是 #text
* 文档节点显示的是#document
* nodeValue;
* 文本节点显示的是文本
* 属性节点显示的是属性值
*
* nodeType:
* 1 元素节点
* 2 属性节点
* 3 文本节点
* 8 注释
* 9 文档
* */
window.onload=function(){
var ul= document.getElementsByTagName("ul")[0];
/* alert("节点名称："+ul.nodeName);
alert("节点类型："+ul.nodeType);*/
/*获取ul中的第一个li*/
var li=ul.firstElementChild;
alert("节点名称："+li.nodeName);
alert("节点类型："+li.nodeType);
alert("节点内容："+li.childNodes[0].nodeValue);
/*改变小猫咪图片的宽度*/
var image=document.getElementsByName("cat")[0];
image.setAttribute("width","200px");
//获取src的值
alert(image.getAttribute("src"));
}
</script>
</head>
<body>
<ul>
<li>小强1</li>
<li>小强2</li>
<li>小强3</li>
</ul>
<img src="images/cat.jpg" name="cat">
</body>
</html>
二、节点的增删改
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问节点</title>
<script type="text/javascript">
window.onload=function(){
var ul= document.getElementsByTagName("ul")[0];
/*新增节点*/
var newLi= document.createElement("li");
newLi.innerHTML="小黑";
ul.appendChild(newLi);
/*获取ul第三个li*/
var second= ul.getElementsByTagName("li")[2];
ul.insertBefore(newLi,second);
/*clone*/
var ul2= document.getElementsByTagName("ul")[0].cloneNode(true);
document.getElementById("d").appendChild(ul2);
/*删除节点*/
var reNode= ul.getElementsByTagName("li")[0];
// ul.removeChild(reNode);
/*替换节点*/
ul.replaceChild(newLi,reNode);
}
</script>
</head>
<body>
<ul>
<li>小强1</li>
<li>小强2</li>
<li>小强3</li>
</ul>
<div id="d">
</div>
</body>
</html>
三、老师辛苦了！
标签：nts 获取 nodetype getattr 文档 innerhtml 小强 访问 div
原文地址：http://www.cnblogs.com/wsnedved2017/p/6992245.html
