DOM学习笔记（一）

DOM获取元素

getElementById()

• id重复了会获取第一个
• 在IE6~7中会把name当作id使用
• 上下文只能是document

getElementsByName()

• 在IE浏览器中只对表单元素的name起作用

get​Elements​ByClass​Name()

• IE6~8中不兼容

get​Elements​ByTagName()

• 获取当前上下文中，所有子子孙孙中标签名是xxx的元素

query​Selector()
query​SelectorAll()

• 不兼容IE6~8
• 没有DOM映射

document.body
document.head
document.document​Element
…

表述节点与节点之间关系的属性

	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
文本节点	2	#text	文本注释
注释节点	3	#comment	注释内容
文档节点	4	#document	null

childNodes: 所有子元素
children：所有元素子节点（IE6~8中会把注释当作元素节点）
parentNode： 父节点
previousSibling： 当前节点的哥哥节点
previousElementSibling：当前元素的哥哥元素节点
nextSibling/nextElementSibling：当前元素下一个节点/元素节点
firstChild/last​Child：读取第一个/最后一个子节点，若无返回null

动态操作DOM

createElement()：创建元素
createDocumentFragment()：创建文档碎片
appendChild：追加元素
insertBefore()：插入节点
cloneNode(true)：true深克隆，false浅克隆
removeChild：移除节点
set/get/removeAttribute：操作自定义元素

xxx.style.xxx=xxx：设置样式
xxx.style.xxx=xxx：获取样式
xxx.className=‘xxx’：设置类
xxx.οnclick=function(){} ：注册事件