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()