DOM
叫文档对象模型,是处理可扩展标记语言的标准编程接口。
DOM树
- 文档:一个页面就是一个文档,用document表示
- 元素,页面中的所有标签都是元素,用element表示
- 节点:网页中所有的内容都是节点(标签、属性、文本、注释等),用node表示
- DOM把以上内容都看做是对象
获取元素
根据id获取
使用getElementById()的方式获取带有ID的元素队对象
- id为字符串格式,注意大小写
- 存在返回字符串,不存在返回null
- 因为文档页面从上往下加载,所以先得有标签,所以script要写到标签下面
- 如:document.getElementById('98');
根据标签名获取
使用getElementsByTagName()的方法可以返回带有指定标签名的对象的集合
- 获取过来元素队形的集合,以伪数组的形式存储
- 如果页面中只有一个li,返回的仍然是伪数组的形式
- 想要一次打印里面的元素对象,可以采取遍历的方式
- 得到的元素是动态的,修改后仍然可以使用
- 如:getElementsByTagName('标签名');
- 可以获取父元素内部所有指定标签名的子元素,如element.getElementsByTagName('98');但是,父元素必须是单个对象(必须指明是那哪一个对象),获取的时候不包括父元素自己
根据H5新增的方法获取
- 通过类名:document.getElementsByClassName('类名');
- 通过选择器返回第一个元素:document.querySelector('选择器');如:.box,#nav
特殊元素获取
- 获取body元素:document.body
- 获取html元素:document.documentElement
事件基础
JS是我们有能力创建动态页面,而事件是可以被JS侦测到的行为。
简单理解:触发----响应机制
网页中的每个元素都可以产生某些可以触发JS的事件。
事件三要素
事件由三部分组成:事件源,事件类型,事件处理程序。
- 事件源:事件被触发的对象,谁被触发了,即按钮
- 事件类型:如何触发,如鼠标点击
- 事件处理程序:通过函数赋值的方式完成
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
常见鼠标事件
操作元素
改变元素内容
1.element.innerText:起始位置到终止位置,但不能识别html标签,空格、换行也会去掉
2.element.innerHTML:起始位置到终止位置的全部内容,可识别html标签,保留空格和换行
改变元素属性
如:
改变表单属性
- 表单里面的值,文字内容是通过value来修改的
- 如果想要某个表单被禁用,不能再点击,用disabled
改变样式属性
修改元素的大小、颜色、位置等。
- element.style 行内样式操作
- element.className 类名样式操作
注意:
- 采用驼峰命名法
- JS修改style样式操作,产生的是行内样式,css权重比较高
排他思想
- 先获取所有按钮
- 得到伪数组
- 遍历数组元素
自定义属性的操作
自定义属性的目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。
- 获取属性值
- element.属性
- element.getAttribute('属性')
- 区别:前者获取内置属性,后者主要获得自定义的属性
- 设置属性值
- element.属性='值',主要设置内置属性
- element.setAttribute('属性','值'),主要针对自定义属性
H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值,如:<div data-index = '1'></div>