2017-3-16(DOM操作)
DOM [document object model] 文档对象模型，操作[获取/新增插入/删除/修改/复制/替换] 文档中的节点(node)
元素节点/属性节点/文本节点/注释节点...
element.nodeType
1 元素节点
2 属性节点
3 文本节点
9 document节点
11 documentFragment文档碎片 (优化,减少dom操作引起的重绘和重画)
1.
document.getElementById() ID
document.getElementsByTagName() 表单的name
document.getElementsByClassName() IE9开始支持
document.querySelector(Selector) IE8开始支持
document.querySelectorAll() IE8开始支持
document.documentElement html元素
document.body元素
document.head元素
2.实时/非实时
实时DOM接口:
document.getElementsByTagName()
document.getElementsByName() //一般用来获取表单元素
document.getElementsByClassName() //IE9开始支持
3.获取元素节点的速度
ID > 非实时 > 实时
4.创建元素节点
document.createElement("div")
5.插入元素
(需要找到插入元素的父节点)
node可以是新创建的元素,也可以是已存在在页面上的元素
parentNode.appendChild(node); 添加元素到末尾
parentNode.insertBefore(node,targetchildrenNode);插入到某一个位置
//京东
document.body.insertBefore(shortcut.cloneNode(true),header)//克隆一个元素插入到header中
6.元素中的获取属性/添加属性/移除属性
获取属性 ele.getAttribute(name);
设置属性 ele.setAttribute(name,value);
移除属性 ele.removeAttribute(name);
7.重绘/重排 replain(颜色) reflow(宽高 padding margin border造成重排)
js优化,DOM操作特别消耗性能,尽可能的减少DOM操作,减少重绘重排
8.复制节点
node.cloneNode(false/true) 默认false 浅复制,不复制内部元素
node.cloneNode(true) 深复制 包含内部标签等内容
9.替换节点
node可以是新创建元素,也可以是存在在页面上的元素
parentNode.replaceChild(node,replaceNode);
10. 移除节点
parentNode.removeChild(node);
node
11.节点之间的关系
Dom树 (父子/兄弟)
parentNode.children 获取元素所有的子元素
parentNode.childNodes 获取元素所有的子节点
ele.nextSibling 下一个兄弟节点
ele.nextElementSibling 下一个兄弟元素节点
ele.previousSilbing 上一个兄弟节点
ele.previousElementSilbing 上一个兄弟元素节点
12.给元素设置文本/值
ele.innerHTML 用于一般元素
ele.innerTExt 用于一般元素
ele.value 用于表单元素
13.设置元素属性
ele.getAttribute("name") 获取
ele.setATtribute("name","value") 设置
ele.removeAttribute("name") 移除
作业:
1.九九乘法表 使用document.createElement/
table.insertRow() tr,insertCell()
2.新浪微博发布微博.
