JavaScript - DOM

1 文档结构（元素关系）

1.1 节点树

childNodes		获取所有子节点组成的集合，是个NodeList类型的对象
firstChild		获取第一个子节点
lastChild		获取最后一个子节点

parentNode		获取父节点

previousSibling	获取前一个兄弟节点
nextSibling		获取后一个兄弟节点

1.2 元素树

children				获取所有子元素组成的集合，是个HTMLCollection类型的对象
firstElementChild		获取第一个子元素
lastElementChild		获取最后一个子元素

parentElement			获取父元素

previousElementSibling	获取上一个兄弟元素
nextElementSibling		获取下一个兄弟元素

2 元素的属性操作

2.1 读写内置属性

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

HTML 标签有什么内置属性，元素对象也有什么属性！

2.2 读写自定义属性

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

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

总结： getAttribute() 和 setAttribute() 本质山是读写写在 HTML 标签上的属性，不论是内置的还是自定义。

2.3 data-* 形式的自定义属性

<img data-name="" data-user-address="">

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

3 元素的样式操作

3.1 读写行内样式

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

注意： 只能读取行内的样式； 使用该方式设置css样式也会设置到行内。

3.2 读取计算样式

window.getComputedStyle(元素对象).属性名;

注意：

1. 不论以何种方式设置的样式，只要是作用在元素上都可以读取，没有设置的样式也会读取默认值。
2. 该方式只能读取无法设置

/**
   * 兼容性写法， 兼容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 通过设置元素的类名操作样式

① className

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

② classList

元素.classList;  得到一个对象，专门用于操作元素的类名

元素.classList.add();  添加一个类名
元素.classList.remove();  删除一个类名
元素.classList.toggle();  切换一个类名（有就删除，没有就添加）

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

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

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

offsetWidth / offsetHeight			获取元素的总宽高（内容+padding+border）
clientWidth / clientHeight			获取元素的宽高（内容+内边距）
scrollWidth / scrollHeight			在 clientWidth/clientHeight 的基础上加上溢出内容的大小

getBoundingClientRect()  该方法返回一个对象，对象中有 width 和 height 属性，能够获取元素的总宽高，同 							offsetWidht/offsetHeight

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

offsetLeft / offsetTop	 获取元素在第一个定位的祖先元素上的位置，都没有定位就是在整个页面上的位置
clientLeft / clientTop	 获取元素左边框宽和上边框宽

getBoundingClientRect()	  该方法返回一个对象，对象与位置有关的属性 
						  left / top: 元素在视口上的位置 （与祖先元素定位与否无关）
						  x / y: 同上
						  right / bottom：元素右下角在视口上的位置，坐标原点是视口左上角