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