JsDay16

DOM-下

一、操作

1. 属性操作

   • …

2. 样式操作

   • 设置

     • 什么时候会通过js设置样式？
       • 默认样式都在css中写了
       • 必然是和用户产生和交互的时候
       • 什么时候会和用户产生交互？
       • 至少至少是在项目写完了，上线之后，意味着css也写完了
       • 为了保证js（用户控制）的样式能够生效，至少得让js设置的样式，权重高一些
       • 至少，得是内联样式
       • 综上所述，在js中设置的样式，都是行内样式！
     • 方式
       • 可见的内置属性（html的属性）：style
     • 注意

       // 1.不允许出现中划线，改成小驼峰式
       obox.style.fontSize = "100px";
       // 2.样式的值，一般都是字符，某些属性可以写成数值
       obox.style.opacity = "0.5";
       // 3.样式中行高的设置，加不加单位，是不同的样式
       obox.style.lineHeight = "20px";
       // obox.style.lineHeight = "20";
       // 4.style可以直接设置某个css，也可以通过cssText设置多个css，没有设置部分，为空
       // obox.style.cssText = "width:100px;height:100px;"
       // 5.注意css中的复合属性，如果只设置一部分，其他会被清空
       obox.style.background = "red";
       

   • 获取

     • 行内：
       • 可见的内置属性（html的属性）：style
       • 不能获取非行内
     • 非行内：
       • 使用内置方法：getComputedStyle
       • 可以获取非行内，也能获取行内
       • 有兼容

       function getStyle(ele,attr){
           if(ele.currentStyle){
               return ele.currentStyle[attr];
           }else{
               return getComputedStyle(ele, false)[attr];
           }
       }
       

   • 使用习惯：

     • 设置样式：使用style属性
     • 获取样式：使用getComputedStyle及其兼容

   • 如果，就是不想通过js设置行内样式，也有解决方案

     • 可以通过修改class，id，实现样式切换

3. 尺寸类信息的快捷获取方法

    console.log(obox.clientHeight);     // cont + padding
    console.log(obox.clientWidth);      // cont + padding

    console.log(obox.offsetHeight);     // cont + padding + border
    console.log(obox.offsetWidth);      // cont + padding + border

    console.log(obox.scrollHeight);     // cont + padding + 可以滚动的距离
    console.log(obox.scrollWidth);      // cont + padding + 可以滚动的距离

    console.log(obox.offsetLeft);       // margin + position
    console.log(obox.offsetTop);        // margin + position
    // 以上都是只能获取，不能设置
    // 如果需要修改，得找设置样式

    document.onclick = function(){
        // 即可获取又可设置
        obox.scrollTop = 666;

        console.log(obox.scrollTop);
        console.log(obox.scrollLeft);
    }

4. 元素操作

• 元素是什么？标签操作

• 增：创建，通过js创建标签

  • 创建

    var p = document.createElement("p");
    

  • 插入

    obox.appendChild(p);
    

    // 插入到指定的元素的前面
    // 参数1：新元素
    // 参数2：哪个元素之前
    // obox.insertBefore(参数1,参数2)
    obox.insertBefore(p,span)
    

  • 一次创建只能得到一个元素，不会随着多次插入，出现多个元素

• 删：删除，通过js删除标签

  • 要删除的元素.remove()
  • 父元素.removeChild(要删除的子元素)
  • 一次只能删一条，不能删多个，循环遍历

• 改：修改，把div改成span；没有这种需求，但是有这种技术。

  • 获取或设置标签的全部内容，包括标签自身
    • outerHTML

• 查：选择器就是查询（获取）元素

  • 选择器

• 补充：

  • 创建文本节点
    • var ot = document.createTextNode("文字");
  • obj.cloneNode()
    • 克隆obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆
  • obj.replaceChild(新添加的节点 , 被替换的节点)
    • 替换子节点