首页 > 代码库 > 2017年6月12号课堂笔记

2017年6月12号课堂笔记

2024-10-04 22:34:39   219人阅读

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="http://www.mamicode.com/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>

三、老师辛苦了！

技术分享

 

2017年6月12号课堂笔记


联系
我们