前端基础之DOM对象

查找dom树：

1)	Document
2)	Documen.documentElement --> html
3)	Document.head -->head
4)	Documen.body -->body

元素树：（不包含看不见的空字符，不会受空字符的干扰）

父子：
1)	elem.parentElement      elem的父元素
2)	elem.children            elem的所有直接子元素
3)	elem.firstElementChild    elem的第一个直接子元素
4)	elem.lastElementChild     elem的最后一个直接子元素

兄弟：
1)	elem.previousElementSibling    elem的前一个兄弟元素
2)	elem.nextElementSibling        elem的后一个兄弟元素

按HTML查找：
1)	document.getElementById(“id”)  
2)	parent.getElementsByTagName(‘tag’) 返回类数组对象;不仅查找子级，且查找所有后代

1)	document.getElementsByName(‘name’) 返回类数组对象
2)	parent.getElementsByClassName(‘class’) 返回类数组对象；不仅查找子级，且查找所有后代

按选择器查找：

parent.querySelector(‘选择器’)
parent.querySelectorAll(‘选择器’) 返回一个非动态集合

修改3种：

1)	innerHTML    HTML代码片段
2)	textContent   获取或修改纯文本内容
3)	.value        获取或修改表单元素的值

按属性操作：

1)	elem.attributes[‘属性名’].value   获取属性值（按节点方式）
2)	elem.getAttribute(‘属性名’)      获取属性值（按属性方式）
3)	elem.setAttribute(‘属性名’,’值’)   修改属性值
4)	elem.hasAttribute(‘属性名’)      判断是否包含某个属性名
5)	elem.removeAttribute(‘属性名’)   删除属性

按属性操作的简化：

①elem.属性、②elem.属性 = “值”、③elem.属性 != “”、④elem.属性 = ””
class属性，必须更名为.className

状态属性：

enabled disabled checked selected

• 不能用get/setAttribute操作
• 只能用HTML DOM只能打.操作

自定义扩展属性：
dataset会自动收集所有data-*属性
//html

<div id="box" data-index="0" i="0"></div>

//js

var box = document.getElementById('box');
console.log(box.dataset) //返回一个对象,里面包含了所有当前标签上用data-定义的属性
console.log(box.dataset.index) //返回data-index 的值

样式操作：

elem.style.属性 = “值”       修改样式
getComputedStyle(elem).属性 获取css样式

以上所有的css属性都必须改为驼峰法

插入DOM元素

1. 创建空元素：
   var A = document.createElement(“a”)
2. 设置关键属性

A.href = ‘http://www.baidu.com’
A.innerHTML = “百度”
	// 将元素加入到dom树上
  parent.appendChild(A)  将A追加到parent元素的子元素末尾
  parent.insertBefore(A,child) 将A插入到child之前
  parent.replaceChild(A,child) 用A替换child

减少dom树重排重绘的次数、使用虚拟dom树

1. 创建文档片段
   var frag = document.createDocumentFragment();
2. 将子元素添加到frag中
   frag.appendChild(frag)
3. 将frag一次性添加到DOM树
   parent.appendChild(frag)

image对象

创建：img = new Image();
parent.appendChild(img)

selsect对象（通过查找dom操作获取）
属性：

• .selectedIndex 获取当前选中项的位置
• .options 获得select下所有option的集合
• .length => .options.length 获得option的个数
• .value 获得当前选中的option的value值

如果option上面没有value，用innerHTML代替

方法：

• add(option)向select中追加一个新的option

• remove(i)移除i位置的option

• option事件：代表select下一个option元素

创建：var opt = new Option(text,value);

Table 对象方法

• createCaption() 为表格创建一个 caption 元素。
• createTFoot() 在表格中创建一个空的 tFoot 元素。
• createTHead() 在表格中创建一个空的 tHead 元素。
• deleteCaption() 从表格删除 caption 元素以及其内容。
• deleteRow() 从表格删除一行。
• deleteTFoot() 从表格删除 tFoot 元素及其内容。
• deleteTHead() 从表格删除 tHead 元素及其内容。
• insertRow() 在表格末尾插入一个新行
• insertRow(0) 在表格开头插入一个新行
• table.tHead() 获取表头
• table.tBodies[i]
• table.tFoot