js:元素的样式操作、样式获取的兼容封装、尺寸获取、创建元素 - 第十一天

# 一、复习

DOM的概念和特点介绍

    - document

    - 是网页的抽象

    - 树状结构

    - 每个组成部分都是节点，每个节点的数据类型都是对象

        - 元素、文本、注释、属性、根元素

2、选择器

    - 元素节点

        - id，className，tagName.....

    - 其他节点

        - childNodes，prove，next，first，last，，attributes，document

3、属性操作

    - html属性：写在html标签内的属性

        - 内置

            - get/set/removeAttribute()

        - 自定义

            - get/set/removeAttribute()

    - js属性：没有写在html标签内的属性

4、内容操作

    - 容器元素

        - 解析标签：元素，innerHTML

        - 不能解析标签:元素，inner  text

    - 表单元素  

        -

# 三、样式操作

1、样式的位置

    - 行内样式：通过html标签的style属性操作

        - 元素.style.xxx

    - 非行内样式

        - getComputedStyle(obox).fontSize

2、操作方式

    - 获取

        - 行内样式设置(高权重保证样式生效)

    - 设置

        - 设置指定值

        - 清空（重置）样式

3、获取样式找非行内样式

 兼容问题：

// 获取样式的兼容封装

    function getStyle(ele, cssName){

        if(ele.currentStyle){

            return (ele.currentStyle[cssName]);

        }else{

            return (getComputedStyle(ele)[cssName]);

        }

    }

4、设置行内样式操作

5、获取非行内样式的封装

# 四、尺寸类的快速获取属性

1. cont + padding + border

    - offsetWidth/Height

2. cont + padding

    - clientWidth/Height

3. 相对于包含块偏移的位置

    - offsetLeft/Top

4. 包含可滚动区域的宽或高

    - scrollWidth/Height

5. 滚动条滚走了的距离（即可获取，又可设置）

    - scrollTop/Left

6. 获取包含块元素：

    - offsetParent

7、提示：只是快速获取某些数值的属性，不能代替获取非行内样式的方法

```

// cont+padding+border

    console.log(box1.offsetWidth);

    console.log(box1.offsetHeight);

 

    // cont + padding

    console.log(box1.clientWidth);

    console.log(box1.clientHeight);

    // cont

    console.log(getComputedStyle.width)

    // 包含快：相对于当前元素具有定位的父元素，如果没有这样的包含快，根元素就是包含快

    // 相对于包含快的位置

    console.log(box1.offsetLeft);

    // 包含可滚动的区域的宽高

    console.log(box3.scrollWidth);

    console.log(box3.scrollHeight);

    // 可滚动区域的宽高

    // 滚动条的滚走的距离，可以获取和改变

    console.log(box3.scrollTop);

    console.log(box3.scrollLeft);

    // 根元素，不是根节点

    console.log(document.documentElement);

    console.log(document);

```

# 五、元素操作

1、增：

    - 创建元素：document.createElement（'div'）

    - 插入到指定父级：父元素.appendChild（div）

2、删：

    - 当前元素.remove（）

    - 父元素.removeChild（要删除子元素）

3、改：

    - 元素.outerHTML='<span></span>'

4、查：选择器

# 六、补充

1、文本节点的创建

    - document.createTextNode（’hello‘）

2、插入到指定父元素

3、插入到指定位置

    - 父元素insertBefore（新节点，老节点）；