JavaScript day8（DOM操作属性）

普通属性

dom对象.属性名 = 值
selected  布尔属性
selectedIndex  选中项的下标值

1. 某些表单元素可以获取到不存在的属性  select.value  textarea.value

2. 某些属性与标识符有冲突，被更换属性名(for -> htmlFor、 class-》className)

自定义属性

html5建议使用自定义属性，使用```data-*```自定义一个属性
dom对象.dataset.属性名

删除自定义属性

1. removeAttribute(属性名)
2. delete dom.dataset.属性名

操作元素的内容

innerHTML：获取和设置元素内部HTML文本
innerText： 获取和设置元素内部的纯文本，
textContent：获取和设置元素内部的纯文本,得到内部源代码中的文本(保留空格和换行)

元素的结构重构

1. 父元素.appendChild(子元素)  在某个元素的内部末尾追加一个元素
2. 父元素.inserBefore(待插入的子元素,哪个元素之前)  
3. 父元素.repalceChild(替换的元素,被替换的元素)

更改页面的结构效率非常低，尽量少用。

创建和删除元素

创建

document.createElement("标签名");
document.createDocumentFragument()  创建文档片段


删除元素

他杀：
父元素.removeChild(子元素)

自杀：
元素自身.remove()
子元素.parentElement.remove()

dom元素样式

控制行内样式

1. 获取样式

dom对象.style  得到一个样式表对象
dom对象.style.fontSize   

2. 设置样式

dom对象.style.fontSize  = "值"

3. 获取元素计算后的样式

window.getComputedStyle(元素,"伪元素")

控制类样式

dom.className = '值'

classList

1. add  用于添加一个类名
2. remove  删除一个指定的类名
3. contanis  返回boolean  判断当前dom上有没有某个类名
4. toggle  用于添加或者删除一个类名