DOM (document Object Model)

1、什么是DOM ？

DOM 是一项 W3C (World Wide Web Consortium) 标准。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

对象的 HTML DOM 树：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

• JavaScript 能改变页面中的所有 HTML 元素
• JavaScript 能改变页面中的所有 HTML 属性
• JavaScript 能改变页面中的所有 CSS 样式
• JavaScript 能删除已有的 HTML 元素和属性
• JavaScript 能添加新的 HTML 元素和属性
• JavaScript 能对页面中所有已有的 HTML 事件作出反应
• JavaScript 能在页面中创建新的 HTML 事件

2、获取元素对象的方式

在进行dom操作的时候，我们要先找到对应的元素，找到文档对象的元素有下面几种方式：

（1） 根据ID获取

（2）根据class获取

返回的结果是一个伪数组：

（3）根据标签名获取


（4）根据name获取


（5）querySelector

获取指定选择器的第一个元素，参数就是选择器的名称


（6）querySelectorAll

获取指定选择器的所有的元素，参数就是选择器的名称

3、事件

（1）事件三要素

• 事件源:触发(被)事件的元素
• 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
• 事件处理程序:事件触发后要执行的代码(函数形式)

（2）onload事件

• 当用户进入页面时，会触发 onload事件。

• onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

• 获取dom对象的语句应该放在body代码之后，比如以下代码
  
  这样是可以保证在执行dom操作的代码时，页面加载完毕。如果按下面的代码来写，会有问题。
  
  
  因为在执行dom获取元素的操作时，元素还没有被加载，获取不到。我们可以这样改进：
  
  然后就不会有问题啦！😊😊😊😊

4、属性操作

（1）表单属性

• disable：在标签中，只要指定了disabled属性，无论有值没值，都代表这个input是被禁用的。在dom中，是一个布尔类型的属性，值为false（禁用）和true（不禁用）

• type：指定了input框的类型，在DOM对象中，也同样有type属性，这个type属性的取值和标签是一样的，是一个字符串
  

• value：在标签中，value属性指定了input框的值，在DOM对象中，也同样有value属性，我们可以通过DOM对象中的value属性来指定input框的值
  

• selected：在option标签中，只要指定了selected属性，说明这个option被选中。在DOM对象中，selected的属性是一个布尔类型的属性，值只有true或者false。
  

• checked：在标签中，只要指定了checked属性，说明这个checkbox被选中。在DOM对象中，checked的属性是一个布尔类型的属性，值只有true或者false。
  

（2）非表单属性

比如：href、title、id、src、className、 width、 height 等。

（1）添加src属性值显示图片

（2）改变图片大小

imgBox.width = 750;
imgBox.height = 500;

（3）通过style给div添加边框

5、innerText

6、innerHtml

通过 innerHtml 属性可以设置值，也能识别标签。