DOM--简单版

DOM

• nodeType 节点类型
• nodeName 节点名
• nodeValue 节点值
• 元素节点 类型为1 属性节点 类型为2 文本节点 类型为3 文档节点 类型为11

节点的查找

• document.getElementById() 通过id查找
• document.getElementsByClassName() 通过class
• document.getElementsByTagName() 通过标签名查找
• document.getElementsByName() 通过name
• document.querySelector() css选择器
• document.querySelectorAll() css选择器多个
• document.body
• document.header
• document.links
• document.forms

节点创建

• document.createElement() 元素节点
• document.createTextNode() 文本节点
• document.createAttribute() 属性节点
• setAttributeNode 设置属性节点

节点关系

父节点

• parentNode父节点
• parentElement 父元素
• offsetParent定位 元素父节点或 body 表格 表单 ul td tr

子节点

• childNodes所有的子节点
• firstChild 第一个子节点
• lastChild 最后一个子节点
• firstElementChild第一个元素节点
• lastElementChild 最后一个元素节点

兄弟节点

• previousElementSibling 上一个元素节点
• previousSibling 上一个节点

节点操作

删除

• remove() 删除自己
• removeChild() 删除子元素

追加

• appendChild 插入子节点
• append 可插入多个子节点

复制

• cloneNode(true)克隆 带true 复制所有

替换

• replaceChild(new,old)替换

插入

• insertBefore(new,old)

获取节点rect

• getBoundingClientRect 浏览器视口的
• bottom
• height
• left
• right
• top
• width
• x
• y