1. 程式人生 > >09.05 javascript 屬性 內置屬性 自定義屬性 DOM文檔對象模型

09.05 javascript 屬性 內置屬性 自定義屬性 DOM文檔對象模型

html for 對象模型 ase 元素 tco 內容 textarea 1-1

# 屬性
### 內置屬性
* 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
* add() 新增選項

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

技術分享

09.05 javascript 屬性 內置屬性 自定義屬性 DOM文檔對象模型