226节---------6月18日

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. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

常见鼠标事件

---

操作元素

改变元素内容

1.element.innerText：起始位置到终止位置，但不能识别html标签，空格、换行也会去掉

2.element.innerHTML：起始位置到终止位置的全部内容，可识别html标签，保留空格和换行

改变元素属性

如：

改变表单属性

• 表单里面的值，文字内容是通过value来修改的
• 如果想要某个表单被禁用，不能再点击，用disabled
• 

改变样式属性

修改元素的大小、颜色、位置等。

• element.style                  行内样式操作
• element.className        类名样式操作

注意：

• 采用驼峰命名法
• JS修改style样式操作，产生的是行内样式，css权重比较高

排他思想

1. 先获取所有按钮
2. 得到伪数组
3. 遍历数组元素

自定义属性的操作

自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。

• 获取属性值
  • element.属性
  • element.getAttribute('属性'）
  • 区别：前者获取内置属性，后者主要获得自定义的属性
• 设置属性值
  • element.属性='值'，主要设置内置属性
  • element.setAttribute('属性'，'值')，主要针对自定义属性

H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值，如：<div data-index = '1'></div>

---