javaScript - DOM

1 元素的各种操作

1.1 获取元素

1. 根据元素的ID名
   document.getElementById()  返回 null 或者元素对象
2. 根据元素的标签名
   document.getElementsByTagName()	 返回HTMLCollection类型的数据（伪数组）	
   element.getElementsByTagName()
3. 根据元素的类名
   document.getElementsByClassName()  返回HTMLCollection类型的数据（伪数组）	
   element.getElementsByClassName()
4. 根据元素的name属性值
   document.getElementsByName()	返回 NodeList 类型的数据（伪数组）
5. 使用 CSS 选择器获取元素
   document.querySelector()		返回元素对象或null
   document.querySelectorAll()	返回NodeList类型的对象（伪数组）
   elmeent.querySelector()		返回元素对象或null
   element.querySelectorAll()	返回NodeList类型的对象（伪数组）
6. 获取所有的元素
   document.all			得到HTMLCOllection类型的对象

1.2 根据文档关系获取元素

节点树：
	childNodes		值是一个NodeList类型的对象（伪数组）
	firstChild
	lastChild
	parentNode
	previousSibling
	nextSibling

元素树：
	children			值是一个HTMLCollection类型的对象（伪数组）
	firstElementChild
	lastElementChild
	parentElement
	previousElementSibling
	nextElementSibling

1.3 读写元素的属性

1. 读写元素的内置属性
   元素对象.属性名; // 可读可写
   
2. 读写元素的自定义属性
   元素对象.getAttribute()
   元素对象.setAttribute()
   
3. data-形式的自定义属性
   元素对象.dataset.属性名 （自动转为小驼峰）

1.4 读写元素的CSS样式

1. 读写元素的行内样式
   元素对象.style.属性名;  可读可写，自动转为小驼峰
   元素对象.style['属性名']
   
2. 读取元素的计算样式（只读）
   getComputedStyle(元素对象).属性名    
   
3. 操作元素的类型实现设置样式的目的
   元素对象.className; 可读可写
   元素对象.classList  add()/remove()/toggle()

1.5 读写元素中的文本内容

innerHTML
outerHTML
innerText
textContent

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

offsetWidth / offsetHeight		内容+padding+border
clientWidth / clientHeight		内容+padding
scrollWidth / scrollHeight		client基础上，加上溢出部分的尺寸

getBoundingClientRect().width
                       .height

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

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

getBoundingClientRect() .left    视口上的位置
                        .top
                        .x
                        .y
                        .right
                        .bottom

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

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

注意： 设置元素的 scrollLeft 和 scrollTop 的前提条件是，给元素设置 css 属性 overflow 的值不为 visible。

// 获取页面在视口中垂直滚动的距离 可读可写
document.documentElement.scrollTop || document.body.scrollTop;

3 节点（元素）的创建添加删除替换克隆

3.1 创建元素节点

document.createElement('标签名');    // 返回新创建的元素对象

3.2 添加子节点

① 在最后面添加子节点

父元素.appendChild(新的子元素);

② 指定位置添加子节点

父元素.insertBefore(新的子元素, 旧的子元素);    // 新的子元素会插入到旧子元素的前面

3.3 删除子节点

父元素.removeChild(要删除的元素);

3.4 替换子节点

父元素.replaceChild(新元素, 旧元素);

3.5 节点克隆

元素.cloneNode()；  // 方法返回克隆好的元素
                   // 参数默认是 false，表示浅克隆
				   // 设置参数为 true，表示深度克隆，元素以及元素的后代和文本内容都被克隆

4 documnt 对象

document.all			  获取文档中所有的元素，只读
document.body			  获取body元素，只读
document.documentElement  获取html元素，只读
document.lastModified     获取文档的最后一次修改时间，只读
document.title			  读写页面标题，可读可写

document.write()
document.getElementById()
document.getElementsByTagName()
document.getElemenetsByClassName()
document.getElementsByName()
document.querySelector()
document.querySelecotrAll()
document.createElement()
document.appendChild()
document.insertBefore()
document.removeChild()
document.replaceChild()
document.cloneNode()

5 documentFragment 对象

5.1 创建 documentFragment 对象

document.createDocumentFragment();		// 返回一个 documentFragmeng 类型的对象

5.2 documentFragment 对象的特点

1）documentFragment 也是一类节点， nodeType 是 11，并不是元素，它通常作为其他节点的一个临时的容器。

2）可以给 documentFragment 对象添加子节点，documentFragment 节点也可以作为其他节点（元素）的子节点。

3）documentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。

5.3 documentFragment 对象的应用

1）如果连续给一个元素添加多个子元素，可以先把子元素添加到 documentFragment 对象中，最后把 documentFragment 对象添加到父元素中，减少浏览器渲染次数。

2）利用 documentFragment 实现对一组元素进行倒序排列。