zoukankan      html  css  js  c++  java
  • 2017年6月12号课堂笔记

    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>

    三、老师辛苦了!

  • 相关阅读:
    HashMap
    Spring事务异常回滚,捕获异常不抛出就不会回滚(转载) 解决了我一年前的问题
    脏读 不可重复读 幻读
    冒泡优化
    Class.forName的作用以及为什么要用它【转】
    java反射入门
    Java异常分类 转载
    转载 【CSS进阶】伪元素的妙用--单标签之美
    转载文章 利用旋转正方形与图形的组合实现爱心
    Three.js基础学习【修改版】
  • 原文地址:https://www.cnblogs.com/wsnedved2017/p/6992245.html
Copyright © 2011-2022 走看看