• 文档对象模型


    DOM:文档对象模型

    1.DOM

    • DOM:文档对象模型,DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构,目的其实是为了能让js操作heml元素而制定的一个规范

    • DOM就是由节点组成: heml加载完毕,渲染引擎会在内存中把HTML文档生成一个DOM树

    • 由上图可知,在HTML中一切都是节点非常重要

      • 元素节点: HTML标签

      • 文本节点: 标签中的文字(比如标签之间的空格,换行)

      • 属性节点: 标签的属性

      • 整个html文档就是一个文档节点所有节点都是Object

    • 利用DOM可以完成

      • 找对象(元素节点)

      • 设置元素的属性值

      • 设置元素的样式

      • 动态创建和删除元素

      • 事件的触发响应: 事件源,事件,事件的驱动程序

    2.节点查找

    • DOM节点的获取方式其实就是获取事件源的方式

    • 直接查找:

      •  var div1 = document.getElementById("box1");      //方式一:通过id获取单个标签
         var arr1 = document.getElementsByTagName("div1");     //方式二:通过 标签名 获得 标签数组,所以有s
         var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s
         //其中方式二、方式三获取的是标签数组,那么习惯性是先遍历之后再使用。
      • 特殊情况

      •  即便如此,这一个值也是包在数组里的。这个值的获取方式如下:
         document.getElementsByTagName("div1")[0];   //取数组中的第一个元素
         document.getElementsByClassName("hehe")[0]; //取数组中的第一个元素
    • 间接查找

      • DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对他们进行访问,节点的访问呢关系是以属性的方式存在的

      • 获取父节点

        •   节点.parentNode
      • 获取兄弟节点

        • 总结:为了获取下一个元素节点,我们可以这样做:在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling

        • 为了获取前一个元素节点,我们可以这样做:在IE678中用previousSibling,在火狐谷歌IE9+以后用previousElementSibling

        • 随意兄弟节点

          •  节点自己.parentNode.children[index];  //随意得到兄弟节点
      • 获取子节点

        • 单个子节点

          • 总结:为了获取第一个子元素节点,我们可以这样做:在IE678中用firstChild,在火狐谷歌IE9+以后用firstElementChild

          • 总结:为了获取最后一个子元素节点,我们可以这样做:在IE678中用lastChild,在火狐谷歌IE9+以后用lastElementChild

        • 所有子节点

          •  子节点数组 = 父节点.childNodes;   //获取所有节点。
          •  子节点数组 = 父节点.children;   //获取所有节点。用的最多。
          •  nodeType == 1 表示的是元素节点(标签) 。记住:元素就是标签。
             
             nodeType == 2 表示是属性节点 了解
             
             nodeType == 3 是文本节点 了解

    3.节点操作

    • 节点本身操作

      • 创建节点

        •  新的标签(元素节点) = document.createElement("标签名");
        • 比如,创建一个li标签,或者创建一个不存在的adg标签,可以这样做

          •  <script type="text/javascript">
                 var a1 = document.createElement("li");   //创建一个li标签
                 var a2 = document.createElement("adbc");   //创建一个不存在的标签
             
                 console.log(a1);
                 console.log(a2);
             
                 console.log(typeof a1);
                 console.log(typeof a2);
             </script>
      • 插入节点

         父节点.appendChild(新的子节点);//方式1:父节点的最后插入一个新的子节点。 
         父节点.insertBefore(新的子节点,作为参考的子节点);//方式2:在参考节点前插入一个新的节点。如果参考节点为null,那么他将在父节点最后插入一个子节点。
      • 删除节点

         父节点.removeChild(子节点);//用父节点删除子节点。必须要指定是删除哪个子节点。
         node1.parentNode.removeChild(node1);//删除自己这个节点
      • 复制节点(克隆节点)

         要复制的节点.cloneNode();       //括号里不带参数和带参数false,效果是一样的。不带参数/带参数false:只复制节点本身,不复制子节点。
         要复制的节点.cloneNode(true);   //带参数true:既复制节点本身,也复制其所有的子节点。
      • 替换节点

         父节点.replaceChild(newnode, 某个节点);   //找到这个父标签里面的要被替换的子标签,然后用新的标签将该子标签替换掉
    • 节点的属性操作

      • 获取节点属性值

        •  元素节点.属性;
           元素节点[属性];
        •  元素节点.getAttribute("属性名称");
      • 设置节点属性值

        •      myNode.src = "images/2.jpg"   //修改src的属性值
              myNode.className = "image2-box"; //修改class的name
        •   元素节点.setAttribute(属性名, 新的属性值);
      • 删除节点的属性

        •    元素节点.removeAttribute(属性名);
    • 节点文本操作

      • 获取文本节点的值

        •  var divEle = document.getElementById("d1")
           divEle.innerText #输入这个指令,一执行就能获取该标签和内部所有标签的文本内容
           divEle.innerHTML #获取的是该标签内的所有内容,包括文本和标签
      • 设置文本节点的值

        •  var divEle = document.getElementById("d1")
           divEle.innerText="1"  
           divEle.innerHTML="<p>2</p>" #能识别成一个p标签
    • 获取值的操作

      • elemenNode.value ; 适用于以下标签 ,用户输入或者选择类型的标签: input,select,textarea

        •  var iEle = document.getElementById("i1");
           console.log(iEle.value);
           var sEle = document.getElementById("s1");
           console.log(sEle.value);
           var tEle = document.getElementById("t1");
           console.log(tEle.value);
    • class的操作

      •  className  获取所有样式类名(字符串)
         首先获取标签对象
         标签对象.classList.remove(cls) 删除指定类
         classList.add(cls) 添加类
         classList.contains(cls) 存在返回true,否则返回false
         classList.toggle(cls) 存在就删除,否则添加,toggle的意思是切换,有了就给你删除,如果没有就给你加一个
    • 指定css的操作

      •  obj.style.backgroundColor="red"
      • 对于没有中横线的css属性直接用style.属性名即可,如:

        •  obj.style.margin
           obj.style.width
           obj.style.left
           obj.style.position
      • 对于含有中横线的css属性,将中横线后面的第一个字母换成大写即可,如

        •  obj.style.marginTop
           obj.style.borderLeftWidth
           obj.style.zIndex
           obj.style.fontFamily

    4.事件

    • JS是以事件驱动为核心的一门语言

    • 事件三要素

      • 事件源,事件,事件驱动程序

    • 代码书写步骤

      •  (1)获取事件源:document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
         (2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
         (3)书写事件驱动程序:关于DOM的操作
    • 常见事件如下

    • 获取事件源

      •  var div1 = document.getElementById("box1");      //方式一:通过id获取单个标签
         var arr1 = document.getElementsByTagName("div1");     //方式二:通过 标签名 获得 标签数组,所以有s
         var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s 
    • 绑定事件的方式

      • 直接绑定匿名函数

      •  <div id="box1" ></div>
         
         <script type="text/javascript">
             var div1 = document.getElementById("box1");
             //绑定事件的第一种方式
             div1.onclick = function () {
                 alert("我是弹出的内容");
            }
         </script>
      • 先单独定义函数,再绑定

      •  <div id="box1" ></div>
         
         <script type="text/javascript">
             var div1 = document.getElementById("box1");
             //绑定事件的第二种方式
             div1.onclick = fn;   //注意,这里是fn,不是fn()。fn()指的是返回值。
             //单独定义函数
             function fn() {
                 alert("我是弹出的内容");
            }
         </script>
        • 注意上方代码的注释,绑定的时候,是fn,不是写fn(),fn代表的是整个函数,fn()代表的是返回值

      • 行内绑定

      •  <!--行内绑定-->
         <div id="box1" onclick="fn()"></div>
         
         <script type="text/javascript">
         
             function fn() {
                 alert("我是弹出的内容");
            }
         
         </script>
    • 事件驱动程序

      •  <style>
                 #box {
                      100px;
                     height: 100px;
                     background-color: pink;
                     cursor: pointer;
                }
             </style>
         </head>
         
         <body>
         
         <div id="box" ></div>
         
         <script type="text/javascript">
             var oDiv = document.getElementById("box");
             //点击鼠标时,原本粉色的div变大了,背景变红了
             oDiv.onclick = function () {
                 oDiv.style.width = "200px";   //属性值要写引号
                 oDiv.style.height = "200px";
                 oDiv.style.backgroundColor = "red";   //属性名是backgroundColor,不是background-Color
            }
         </script>
      • 注意事项:

        • 在js里写属性值时,要用引号

        • 在js里写属性名时,是backgroundColor,不是CSS里面的background-Color。记得所有的像css属性的text-,line-、backgroun-*等在js中都写成驼峰

    • onload事件

      • 当页面加载文本和图片完毕后,触发onload事件

      • 有一点我们要知道:js的加载是和html同步加载的。因此,如果使用元素在定义元素之前,容易报错。这个时候,onload事件就能派上用场了,我们可以把使用元素的代码放在onload里,就能保证这段代码是最后执行。

        建议是:整个页面上所有元素加载完毕在执行js内容。所以,window.onload可以预防使用标签在定义标签之前。

      • onload事件(屏幕可视区域)

        •  <!DOCTYPE html>
           <html>
               <head>
                   <meta charset="UTF-8">
                   <title></title>
               </head>
               <body>
               </body>
               <script type="text/javascript">
                   
                   // 屏幕的可视区域
                   window.onload = function(){
                       
                       // document.documentElement 获取的是html标签
                       console.log(document.documentElement.clientWidth);
                       console.log(document.documentElement.clientHeight);
                       // 窗口大小发生变化时,会调用此方法
                       window.onresize = function(){    
                           console.log(document.documentElement.clientWidth);
                           console.log(document.documentElement.clientHeight);
                      }
                 
                       
                  }
               </script>
           </html>
      • onload事件(offset系列)

        •  <!DOCTYPE html>
           <html>
               <head>
                   <meta charset="UTF-8">
                   <title></title>
                   <style type="text/css">
                      *{
                           padding: 0;
                           margin: 0;
                      }
                   </style>
                   
               </head>
               <body style="height: 2000px">
                   <div>
                       <div class="wrap" style=" 300px;height: 300px; color: rgb(153, 153, 119);">>
                           <div id="box" style=" 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">            
                           </div>
                       </div>
                   </div>
               </body>
               <script type="text/javascript">
                   window.onload = function(){
                       var box = document.getElementById('box')
                       /*
                        offsetWidth占位宽 内容+padding+border
                        offsetHeight占位高
                        * offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的top值
                        * offsetLeft: 如果盒子没有设置定位 到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值
                       
                        * */
                       console.log(box.offsetTop)
                       console.log(box.offsetLeft)
                       console.log(box.offsetWidth)
                       console.log(box.offsetHeight)
                       
                  }
                   
               </script>
           </html>
    • onscroll事件

  • 相关阅读:
    简单讲解Asp.Net Core自带IOC容器ServiceCollection
    C#配置文件configSections详解
    学习Linq之前必须知道的几种语法糖
    学习Linq之前必须要了解的扩展方法
    学习学习学习学习!!!!!!!!!!!!
    SpringBoot自动配置原理
    OAuth2
    微服务搭建学习笔记(一) 认证中心搭建
    Vue 学习记录
    Vue实例(1)
  • 原文地址:https://www.cnblogs.com/W-Y-C/p/11354467.html
Copyright © 2020-2023  润新知