Dom元素操作

元素事件：某个元素发生了一件事情(click点击、mouseenter移入、mouseout移出)

注册事件：元素.onclick 事件处理函数：当事件触发后就执行一段代码

操作标签的属性

dom对象.属性名 = 值 细节： input的value默认为 "" div value name 布尔属性在dom对象中，得到值是boolean

操作属性

自定义属性

dom对象.属性名 = 值

selected 布尔属性 selectedIndex 选中项的下标值

.checked 多选框的布尔属性

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(替换的元素,被替换的元素) 更改页面的结构效率非常低，尽量少用。

dom元素样式

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

2. 设置样式 dom对象.style.fontSize = "值"

3. 获取元素计算后的样式 window.getComputedStyle(元素,"伪元素")

控制类样式

1. add 用于添加一个类名

2. remove 删除一个指定的类名

3. contanis 返回boolean 判断当前dom上有没有某个类名

4. toggle 用于添加或者删除一个类名

dom事件

事件：发生一件事情

事件类型：点击、鼠标按下、鼠标松开、键盘按下 事件处理程序：函数

事件注册：将一个事件处理程序和事件进行关联

事件解绑

dom0:重新给事件赋值为空 null undefined

dom1:removeEventListener('事件类型',事件处理程序)

事件注册

1.on

btn.onmousedown = function(){}

1.1解绑

btn.onmousedown = null;

2.事件监听

addEventListener('事件类型',处理程序,false)

2.1解绑

removeEventListener('事件类型',解绑的处理程序);