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.οnlοad=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.οnlοad=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> 三、老师辛苦了！
