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>

    三、老师辛苦了!

  • 相关阅读:
    【转】logback logback.xml常用配置详解(三) <filter>
    【转】logback logback.xml常用配置详解(二)<appender>
    【转】logback logback.xml常用配置详解(一)<configuration> and <logger>
    webhook: requestbin
    Docker: repository, image, container
    Python 知识点
    MySql: 常见sql语句
    MySql: 常见错误
    Linux 网络命令必知必会之 tcpdump,一份完整的抓包指南请查收!
    这些好用的 Chrome 插件,提升你的工作效率
  • 原文地址:https://www.cnblogs.com/wsnedved2017/p/6992245.html
Copyright © 2011-2022 走看看