DOM（文档对象模型）

节点关系

父子

父节点 parentElement
所有子节点 children
第一个子节点 firstElementChild
最后个子节点 lastElementChild

兄弟
上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling

 

属性操作

getAttribute 获取属性
setAttribute 设置属性
removeAttribute 移除属性

节点信息

 节点操作

创建节点
document.createElement(tag)

删除节点：
elem.remove()
elem.parentElment.removeChild(elem) 

 

复制节点
var elem2 = elem.cloneNode(false)

 

插入节点
1.parent.insertBefore(新的节点，相关节点)   把新的节点插入到 相关节点的前面

2.parent.appendChild(elem) 将elem插入到parent最后面
 

替换节点
parent.replaceChild(新的节点，被替换的节点)

表格操作

创建行：row = table.insertRow(index)

创建列：col = row.insertCell(index)

设置列的内容：col.innerText="xxx"

选择第一行：table.firstElementChild.fristElementChild

 

select下拉框

创建一个option   var option = new Option(text,value)

插入一个option   select.add(option,before)

事件的监听

01 事件响应写在html标签属性里面

02 在js对象的属性中监听（和html分离）

03 通过addEventListener 注册 (可以注册多个)

Style对象

HTML元素.style.样式属性＝"值"

className属性

HTML元素.className="类名"

常用事件

获取类样式的方法

getComputedStyle()   全局方法

currentStyle     ie专有的方法

让滚动条滚动

 scroll()     scrollTo()      scrollBy()

三个方法类似，都是将x,y坐标传入，即实现让滚动轮滚动到当前位置 区别，scrollBy会在之前数据上做累加。