DAY10JS学习--DOM文档对象模型

一、作用

提供操作html文档、html标签元素能力

二、document 文档对象

三、属性和方法

1、常用方法

1.1伪数组和Array区别

伪数组不能使用Array的常用方法

伪数组可以遍历，可以使用[]访问元素

1.2获取标签元素的方法

（1）getElementById('id名')  返回唯一元素

（2）getElementsByClassName('类名')  返回一个伪数组

（3）getElementsByTagName('标签名') 返回一个伪数组

（4）getElementsByName('name名') 返回一个伪数组

1.3通过选择器获取标签元素的方法

（1）querySelector('选择器')  重复只会获得一个----伪数组

（2）querySelectorAll(’选择器‘)  重复会获得多个---伪数组

2、操作内容

2.1操作非表单元素

（1）标签.innerHTML 获取内容

（2）标签.innerHTML=" 新内容"   //设置内容

（3）标签.innerText='新内容'  //设置内容

（4）innerHTML和innerText区别

innerText 以纯文本形式显示，不会解析标签

innerHTML会解析标签

2.2 value操作表单内容

（1）input.value 获取内容

（2）input.value=" 新内容"

3、操作样式

3.1获取行内样式

（1）标签.style.样式名

（2）赋值

标签.style.样式名=’440px等属性值内容‘

注意：JS代码操作样式名，样式名用驼峰命名-fontSize

3.2类样式（添加class类名）

（1）标签.className='类名' -----添加一个类名

注意：后面类名会覆盖前面类名

（2）添加多个类名

标签.classList.add(’类名1‘)

标签.classList.add(’类名2‘)

3.3获取非行间样式

window.gerComputedStyle(”标签“).样式名

4、操作属性--JS代码动态获取属性值和设置属性

4.1获取属性值

（1）标签.getAttribute(属性名)

（2）标签.属性名----必须是本身拥有的属性

4.2设置属性

（1）标签.setAttribute(属性名，属性值)

（2）标签.属性名=属性值-----必须是本身拥有的属性

4.3移除属性

标签.removeAttribute(属性名)

4.4自定义属性

data-属性名

获取自定义属性值

标签.dataSet.属性名

四、操作事件

1、给元素绑定点击时间（属性事件）

（1）直接给元素添加onclick属性实现

（2）元素和事件分离

b标签.οnclick=function(){

执行的代码

}

this关键字，表示当前点击的选项