一、DOM
DOM(Document Object Model) 文档对象模型
操作文档
元素=标签=节点
DOM树(节点关系)
oEle.tagName 获取元素的名字
节点:
标签节点
文本节点
判断节点类型
oEle.nodeType
1 标签节点
3 文本节点
9 document
二、获取元素
通过id获取一个元素
document.getElementById()
通过标签名获取一个元素
oEle.getElementsByTagName()
通过class获取一个元素
oEle.getElementsByClassName()
html
document.documentElement
body
document.body
通过节点关系获取
获取子节点
获取第一层子节点
oParent.children
获取标签和文本节点
oParent.childNodes(不推荐)
获取父节点
获取结构上父级
obj.parentNode
最大是document，再往上是null
获取定位上父级
obj.offsetParent
最大是body，再往上是null
获取兄弟节点
上一个兄弟节点
兼容高级浏览器
oEle.previousElementSibling
兼容IE678
oEle.previousSibling
兼容写法
oEle.previousElementSibling||oEle.previousSibling
下一个兄弟节点
兼容高级浏览器
oEle.nextElementSibling
兼容IE678
oEle.nextSibling
兼容写法
oEle.nextElementSibling||oEle.nextSibling
获取首尾子节点
获取首子节点
兼容高级浏览器
oParent.firstElementChild
兼容IE678
oParent.firstChild
兼容写法
var oFirst = oParent.firstElementChild||oParent.firstChild;
oParent.children[0];
获取尾子节点
兼容高级浏览器
oParent.lastElementChild
兼容IE678
oParent.lastChild
兼容写法
var oFirst = oParent.lastElementChild||oParent.lastChild;
oParent.children[oParent.children.length-1]
三、创建、添加、删除、克隆
元素
创建
document.createElement('标签名');
添加
添加到父级的最后
父级.appendChild(子级);
在某个元素之前插入
父级.insertBefore(要插入的元素,谁之前);
删除
父级中删除子级
父级.removeChild(子级);
克隆
oEle.cloneNode(); 克隆元素
只有标签，没有内容。
oEle.cloneNode(true); 深度克隆
所有东西全都克隆
