一、作用
提供操作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关键字,表示当前点击的选项