『笔记』JavaScript基础学习笔记 5 — DOM(文本对象模型)
侧边栏壁纸
  • 累计撰写 61 篇文章
  • 累计收到 1,246 条评论

『笔记』JavaScript基础学习笔记 5 — DOM(文本对象模型)

六六丶
2021-11-16 / 0 评论 / 353 阅读 / 正在检测是否收录...
广告
温馨提示:
本文最后更新于2021年11月18日,已超过65天没有更新,若内容或图片失效,请留言反馈。

DOM(文档对象模型)

1、DOM的简介

(1)什么是DOM:

DOM:文档对象模型(Document Object Model)

kvukmhks.png

(2)模型:

kvulff2c.png

kvulhcxn.png

(3)节点:

kvuliqgp.png

节点的类型
kvulkgun.png

节点的属性
kvulpnys.png

例:

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
      /*
      浏览器已经提供了文档节点对象,这个对象是window属性
      可以在页面直接使用,文档节点代表的是整个网页
      */
      console.log(document);

      //获取到button对象
      var btn = doucument.getElementById("btn");
      //修改按钮的文字
      console.log(btn.innerHTML);
      btn.innerHTML = "I'm Button";
    </script>
  </body>
</html>
(4)事件(Event)

事件:就是用户和浏览器之间的交互行为

kvuz11rk.png

  1. 可以在事件对应的属性中设置一些js代码,当事件被触发时,这些代码将会执行
  2. onclick 点击一次、ondblclick点击两次
  3. 可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时,其对应的函数将会被调用
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <!--结构和行为耦合,不推荐使用-->
    <!-- <button id="btn" onclick="alert('你点我干嘛!');">我是一个按钮</button> -->
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
      //获取到button对象
      var btn = doucument.getElementById("btn");
      //可以为按钮的对应事件绑定处理函数的形式来响应事件
      //这样当事件被触发时,其对应的函数将会被调用
      
      //绑定一个单击事件
      //为单击事件绑定的函数,称为单击响应函数
      btn.onclick = function(){
        alert("单击时触发");
      };
      btn.ondblclick = function(){
        alert("双击才会出现");
      };
    </script>
  </body>
</html>
(5)文档的加载
  1. 浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行
  2. 将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码
  3. onload事件会在整个页面加载完毕后才触发
  4. 可以为window绑定一个onload事件,可以确保代码执行时所有的DOM对象都已经加载完毕了
<head>
  <script type="text/javascript">
    //为window绑定一个onload事件
    window.onload = function(){
      //获取id为btn的按钮
      var btn = document.getElementById("btn");
      //为按钮绑定一个单击响应函数
      btn.onclick = function(){
        alert("hello");
      };
    };
  </script>
</head>
<body>
  <button id="btn">点我一下</button>
  <!-- <script type="text/javascript">
    //将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码
    //获取id为btn的按钮
    var btn = document.getElementById("btn");
    //为按钮绑定一个单击响应函数
    btn.onclick = function(){
      alert("hello");
    };
  </script> -->
</body>

2、DOM查询

(1)获取元素节点

kvxqo1hy.png

window.onload = function(){
  //为id为btn01的按钮绑定一个单击响应函数
  var btn01 = document.getElementById("btn01");
  btn01.onclick = function(){
    var bj = document.getElenmentById("bj");
    //打印bj
    //innerHTML 通过这个属性可以获取到元素内部的html代码
    alert(bj.innerHTML);
  };

   //为id为btn01的按钮绑定一个单击响应函数
  var btn02 = document.getElementById("btn02");
  btn02.onclick = function(){
    //查找所以li节点
    //getElementsByTagName()可以根据标签名来获取一组元素节点对象
    //这个方法会返回一个类数组对象,所有查询到的元素都会封装到对象中
    //即使查询到的元素只有一个也会封装到一个对象中
    var lis = document.getElenmentsByTagName("li");
    //打印lis
    //alert(lis);
    //变量lis
    for(var i=0; i<lis.length; i++){
      alert(lis[i].innerHTML);
    }
  };

  //为id为btn03的按钮绑定一个单击响应函数
  var btn03 = document.getElementById("btn03");
  btn03.onclick = function(){
    //查找name=gender的所有节点
    var inputs = document.getElenmentsByNmae("gender");
    //alert(inputs.length);
    for(var i=0; i<inputs.length; i++){
      //对于自结束标签,innerHTML无效
      //alert(inputs[i].innerHTML);
      //如果需要读取元素节点属性直接使用:元素.属性名
      //class属性不能采用这种方式,读取class属性时需要使用:元素.className
      alert(inputs[i].value);
      alert(inputs[i].name);
      alert(inputs[i].className);
    }
  };
};

kvxvxyqx.png

(2)图片切换的练习
<html>
  <head>
    <mata charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        margin:0;
        padding:0;
      }
      #outer{
        width:500px;
        margin:50px auto;
        padding:10px;
        background-color:yellowgreen;
        /* 设置文本居中 */
        text-align:center;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        // 点击按钮切换图片
        // 获取两个按钮
        var prev = document.getElementById("prev");
        var naxt = document.getElementById("naxt");

        // 获取img标签
        var img = docunments.getElementsByTagName("img")[0];

        //创建一个数组,用来保存图片的路径
        var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]

        //创建一个变量来保存当前正在显示的图片的索引
        var index = 0;

        //获取id为info的p元素来修改提示文字
        var info = document.getElementById("info");
        //设置提示文字
        info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张"
        
        // 分别为两个按钮绑定单击响应函数
        prev.onclick = function(){
          //alert("上一张");
          // 切换到上一张,索引自减
          index--;
          //判断index是否小于0,小于0则改变为0
          if(index<0){
            //index = 0;
            //让图片可以循环
            index = imgArr.length - 1;
          };
          img.src = imgArr[index];
          //当点击按钮以后,重新设置信息
          info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张"
        };
        
        next.onclick = function(){
          //alert("下一张");
          //切换图片就是修改img的src属性
          //要修改一个元素的属性元素:元素.属性 = 属性值
          // 切换到下一张,索引自增
          index++;
          //判断index是否大于最后一个索引,最后一个索引为imgARrr.length - 1
          if(index>imgArr.length - 1){
            //index = imgArr.length - 1;
            //让图片可以循环
            index = 0;
          };
          img.src = imgArr[index];
          //当点击按钮以后,重新设置信息
          info.innerHTML = "一共"+imgArr.length+"张图片,当前第"+(index+1)+"张"
        };
      }
    </script>
  </head>
  <body>
    <div id="outer">
      <p id="info"></p>
      <img src="img/1.jpg" alt="冰棍" />
      
      <button id="prev">上一张</button>
      <button id="next">下一张</button>
    </div>
  </body>
</html>
(3)获取元素节点的子节点

kvxvme6x.png

window.onload = function(){
  //为id为btn04的按钮绑定一个单击响应函数
  var btn04 = document.getElementById("btn04");
  btn04.onclick = function(){
    //获取id为city的元素
    var city = document.getElementById("city");
    //查找#city下所有的li节点
    var lis = city.getElementsByTagName("li");
    for(var i=0; i<lis.length; i++){
      alert(lis[i].innerHTML);
    }
  };

  //为id为btn05的按钮绑定一个单击响应函数
  var btn05 = document.getElementById("btn05");
  btn05.onclick = function(){
    //返回id为city的节点
    var city = document.getElementById("city");
    //返回#city下所有子节点
    //childNodes属性会获取包括文本节点在内的所有节点
    //根据DOM标准,标签与标签之间的空白也会当成文本节点
    //但是IE8及以下的浏览器,不会将空白文本当成子节点
    var cns = city.childNodes;
    //alert(cns.length);
    // for(var i=0; i<cns.length; i++){
    //   alert(cns[i]);
    // }
    //children属性可以获取当前元素的所有子元素
    var cns2 = city.chileren;
    alert(cns2.length);
  };

  //为id为btn06的按钮绑定一个单击响应函数
  var btn06 = document.getElementById("btn06");
  btn06.onclick = function(){
    //获取id为phone的元素
    var phone = document.getElementById("phone");
    //返回#phone的第一个子节点
    //phone.childNodes[0];
    //firstChild属性可获取到当前元素的第一个子节点(包括空白文本节点)
    var fir = phone.firstChild;
    //firstElementChild属性可以获取当前元素的第一个子元素,IE8及以下不支持
    // fir = phone.firstElementChild;
    alert(fir.innerHTML);
  };
};

kvxvxyqx.png

(4)获取元素节点的父节点和兄弟节点

kvxwt6uy.png

//定义一个函数,专门为指定的元素绑定单击函数
/* 参数
 idStr 要绑定单击响应函数的对象的id属性值
 fun 事件的回调函数,当单击元素时,该函数将会被触发
*/ 
function myClick(idStr,fun){
  var btn = document.getElementById("idStr");
  btn.onclick = fun;
};

window.onload = function(){
   //为id为btn07的按钮绑定一个单击响应函数
  myClick("btn07",function(){
    // 获取id为bj的节点
    var bj = document.getElementById("bj");
    // 返回#bj的父节点
    var pn = bj.parentNode;
    // alert(pn.innerHTML);
    // innerText 该属性可以获取到元素内部的文本内容,会去除html标签
    alert(pn.innerText);
  });

  //为id为btn08的按钮绑定一个单击响应函数
  myClick("btn08",function(){
    // 获取id为Android的元素
    var and = document.getElementById("android");
    //返回id为Andrid的前一个兄弟元素(也可能获取到空白文本)
    var ps = and.previousSibling;
    // 获取前一个元素兄弟(不包含空白文本),IE8以下不支持
    var pe = and.previousElementSibling
    alert(ps.innerHTML);
    alert(pe.innerHTML);
  });

  // 读取#username的value属性值
  myClick(btn09,function(){
    // 获取id为username的元素
    var um = document.getElementById("username");
    // 读取um的value属性值
    // 文本框的value属性值,就是文本框中填写的内容
    alert(um.value);
  });

   // 读取#username的value属性值
  myClick(btn10,function(){
    // 获取id为username的元素
    var um = document.getElementById("username");
    // 设置um的value属性值
   um.value = "今天天气真不错";
  });

  // 返回#bj的文本值
  myClick(btn11,function(){
    // 获取id为bj的元素
    var bj = document.getElementById("bj");
    // alert(bj.innerHTML);
    // alert(bj.innerText);
    // 获取bj中的文本
    // var fc = bj.firstChild;
    // alert(fc.nodeValue);
    // 与上面相同
    alert(bj.firstChild.nodeValue);
  });
};

kvyssbjg.png

3

打赏

评论 (0)

取消