09.05 javascript 属性 内置属性 自定义属性 DOM文档对象模型

Posted 2020-10-05 说一是二

# 属性
### 内置属性
* 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()  新增选项