DOM 文档对象模型
节点
节点类型
- element
- text
- attr
- comment
- document
属性
- nodeName
- nodeValue
- nodeType
获取元素
ID
- getElementById()
- 自动创建与id同名的全局变量
通过Name
- getElementsByName()
- IE的兼容性
通过标签名
- getElementsByTagName()
- document.images
- document.links
- document.forms
- document.anchors
通过类名
- getElementsByClassName()
- IE9+
document.all
- 获取页面中所有的元素
- 判断是否是IE浏览器
根据选择器 (IE8+)
- querySelector()
- querySelectorAll()
属性
内置属性
- js对象和html标签有映射关系
自定义属性
- getAttribute()
- setAttribute()
- hasAttribute()
- removeAttribute()
H5新增的自定义属性操作操作
- HTML：
<tag data-attr=""> - JS ： element.dataset.attr
把属性当做属性节点
- getAttributeNode(attrname)
元素的内容
作为HTML的元素内容
- innerHTML
- outerHTML
作为纯文本的元素内容
- innerText 会忽略多余的空格
- textContent IE9+
作为Text节点操作
元素操作（节点）
创建元素
- document.createElement(tagName)
添加元素（给父元素添加子元素）
- appendChild(node)
- insertBefore(newNode, oldNode)
删除元素
- removeChild(node)
替换元素
- replaceChild(newNode, oldNode)
克隆节点
- cloneNode(false)
元素的尺寸大小
元素的位置
- getBoundingClientRect()
- offsetLeft/offsetTop
- clientLeft/clientTop
- offsetParent
元素的尺寸
- getBoundingClientRect()
- offsetWidth/offsetHeight
- clientWidth/clientHeight
- scrollWidth/scrollHeight
滚动距离
- scrollLeft
- scrollTop
docuemnt
属性
- URL 只读
- domain 只读
- referrer 只读
- lastModified 文档的最后一次修改时间 只读
- location 对location对象引用
- title 文档标题
方法
- write()
- writinln()
表单DOM
Form元素
- submit()
- reset()
- elements
按钮(submit reset button)
- click()
- blur()
- focus()
单选/复选
- click()
- blur()
- focus()
文本(input textarea)
- blur()
- focus()
- select()
Select
- options
- add()
- remove()
Table
属性
- rows
- cells
方法
- createCaption()
- deleteCaption()
- createTHead()
- deleteTHead()
- createTFoot()
- deleteTFoot()
- insertRow() 添加一个tr
- deleteRow(index) 删除一行
tr
属性
- rowIndex
- cells
方法
insertCell()
deleteCell()
