5.12 dom的元素获取和设置

# DOM-下
## 一、操作
1. 属性操作
    - ....
2. 样式操作
    - 设置
        - 什么时候会通过js设置样式?
            - 默认样式都在css中写了
            - 必然是和用户产生和交互的时候
            - 什么时候会和用户产生交互?
            - 至少至少是在项目写完了,上线之后,意味着css也写完了
            - 为了保证js(用户控制)的样式能够生效,至少得让js设置的样式,**权重高一些**
            - 至少,得是内联样式
            - 综上所述,在js中设置的样式,都是行内样式!
        - 方式
            - 可见的内置属性(html的属性):style
        - 注意
            ```js
            // 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
            - 可以获取非行内,也能获取行内
            - 有兼容
            ```js
            function getStyle(ele,attr){
                if(ele.currentStyle){
                    return ele.currentStyle[attr];
                }else{
                    return getComputedStyle(ele, false)[attr];
                }
            }
            ```
    - 使用习惯:
        - 设置样式:使用style属性
        - 获取样式:使用getComputedStyle及其兼容
    - 如果,就是不想通过js设置行内样式,也有解决方案
        - 可以通过修改class,id,实现样式切换
3. 尺寸类信息的快捷获取方法
```js
    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创建标签
    - 创建
        ```js
        var p = document.createElement("p");
        ```
    - 插入
        ```js
        obox.appendChild(p);
        ```
        ```js
        // 插入到指定的元素的前面
        // 参数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(新添加的节点 , 被替换的节点)
        - 替换子节点

相关推荐