【27】DOM（文档结构、元素的属性操作、元素的样式操作、读写元素的文本内容/尺寸/位置/内容位置）

1 文档结构（元素关系）

1.1 节点树

childNodes              获取所有子节点组成的集合，是个Nodelist类型的对象，成员可以有文本注释
firstChild              获取第一个子节点
lastChild               获取最后一个子节点
parentNode              获取父节点
previousSibling         获取前一个兄弟节点
nextSibling             获取后一个兄弟节点

1.2 元素树

children                获取所有子元素组成的集合，是个HTMLCollection类型的对象，成员只能有元素
firstElementChild       获取第一个子元素
lastElementChild        获取最后一个子元素
parentElement           获取父元素
previousElementSibling   获取前一个兄弟元素
nextElementSibling       获取后一个兄弟元素

注：document是 html的父节点但不是父元素，因为document不是元素；其他对象的父节点=父元素。

2 元素的属性操作

2.1 读写内置属性

元素对象.属性;    //可读可写

注：HTML标签有什么内置属性，元素对象也有什么属性。（是HTML的属性，不是CSS属性！）

2.2 读写自定义属性

//获取属性值
元素对象.getAttribute('属性名');

//修改属性的值  如果是不存在的属性会添加到标签上
元素对象.setAttribute('属性名','属性值');

注：getAttribute和setAttribute本质上是读写写在HTML标签上的属性，不管是内置属性还是自定义属性，都可以读写。

2.3 data-*形式的自定义属性（W3C规定）

// 可读可写，自动转为小驼峰，对应HTML中的-语法
imgNode.dataset.name;
imgNOde.dataset.userAddress;  

3 元素的CSS样式操作

3.1 读写行内样式

//可读可写，只能读取行内的样式，使用该方式设置css样式也会设置到行内。
元素对象.style.属性名;     

3.2 读取计算样式

//只读，.window可省，行内、内嵌、外链式都可读取，如果在多处设置了同一种样式，则根据优先级计算读取哪个
window.getComputedStyle(元素对象);            //返回值是一个对象，对象中的属性和属性值是作用在该元素对象上的所有样式（即使没有设置某样式，也会返回其默认值）
window.getComputedStyle(元素对象).属性名;      //单独读取某样式

/**
   * 兼容性写法， 兼容IE8
   * @param  element ele 要获取样式的元素对象
   * @param  string attrName CSS属性名
   * @return attrName的值
*/      
function getStyle(ele, attrName) {
    // 判断是否支持 getComputedStyle
    if (window.getComputedStyle) {
        // 非IE 和 IE9+
        return getComputedStyle(ele)[attrName];
    } else if (ele.currentStyle) {
        // IE8 以及以下
        return ele.currentStyle[attrName];
    }
}

3. 3 通过设置元素的类名操作样式

当样式较多时，推荐将样式设置在CSS类名选择器中，再通过JavaScript给元素对象添加类名或删除类名来控制元素样式。

① className

元素对象.className;     //可读可写，对应HTML元素的内置属性class

② classList

元素对象.classList;         //得到一个类数组对象，是该元素所有class值的列表，该属性专门用于操作元素的类名
元素对象.classList.add();   //添加一个类名
元素对象.classList.remove();//删除一个类名
元素对象.classList.toggle();//切换一个类名（有则删除，没有则添加）

4 读写元素的文本内容（可读可写）

innerHTML           读写元素内部的文本内容和html代码
outerHTML           读写元素本身以及元素内部的文本内容和html代码
innerText           读写元素内部的文本内容（不包括html代码）
textContent         相比于innerText，会保留原文本的缩进格式

5 读取元素的尺寸（只读）

属性：
offsetWidth/offsetHeight        获取元素总宽高（内容+内边距+边框）
clientWidth/clientHeight        获取元素宽高（内容+内边距）
scrollWidth/scrollHeight        获取元素宽高（在clientWidth/clientHeight基础上加上溢出内容的大小）
方法：
getBoundingClientRect()          返回一个对象，其中有 width 和 height 属性，能够获取元素的总宽高，同                                 offsetWidht/offsetHeight

6 读取元素的位置（只读）

属性：
offsetLeft/offsetTop            获取相对于第一个定位的祖先元素的位置，如果其祖先元素都没有定位，则相对于整个页面
clientLeft/clientTop            获取元素左边框宽/上边框宽
方法：
getBoundingClientRect()          返回一个对象，对象中与位置有关的属性有（坐标原点是视口左上角）：
                               left / top ：可获取元素左上角在视口上的位置，与祖先元素是否定位无关
                               x / y : 同上
                               right / bottom : 可获取元素右下角在视口上的位置
                               

7 读写元素中内容的滚动距离（可读可写）

前提：内容溢出，且给元素设置CSS属性overflow的值不为visible。

scrollLeft          设置或获取元素内容向左滚动的距离（值越大向左滚动得越多）
scrollTop           设置或获取元素内容向上滚动得距离（值越大向上滚动得越多）

//获取页面在视口中的垂直滚动距离(documentElement适用于Chrome，body适用于IE）：
document.documentElement.scrollTop || document.body.scrollTop