DOM基础

1.1 DOM 介绍

1.1.1 DOM简介

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

1.1.2 DOM树

DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面

• 文档：一个页面就是一个文档，表示的是整个 html文档，DOM中使用document表示

• 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），用node表示

• 标签节点：表示的是 html 中的标签，又叫元素节点，简称元素，用element表示

• 属性节点，表示的是 html 标签中的属性

• 文本节点，表示的是 html 标签中的内容文本

• 注释节点，表示的是 html 文档中的注释

• DOM把以上内容都看做是对象

1.2. 获取元素

• 为什么要获取页面元素

  • 因为要操作页面上的元素

1.2.1 根据ID获取元素

1. 语法：document.getElementById(id)

2. 作用：根据ID获取元素对象

3. 参数：id值，区分大小写的字符串

4. 返回值：元素对象 或 null

案例代码

  
2019-9-9

1.2.2 根据标签名获取元素

1. 语法：document.getElementsByTagName('标签名')

2. 作用：根据标签名获取元素对象

3. 参数：标签名

4. 返回值：元素对象集合（伪数组，数组元素是元素对象）

案例代码

  

    
知否知否，应是等你好久11
    
知否知否，应是等你好久12
    
知否知否，应是等你好久13
  
  

    
生僻字1
    
生僻字2
    
生僻字3
  
  
  

1.2.3 其它方式获取元素

1. 根据类名返回元素对象集合：document.getElementsByClassName('类名');

2. 根据指定选择器返回第一个元素对象：document.querySelector('选择器');

3. 根据指定选择器返回：document.querySelectorAll('选择器');

   注意：querySelector和querySelectorAll选择器需要加符号,如：document.querySelector('#id')

案例代码

  
盒子1
  
盒子2

  

    

      
首页
      
产品
    
  

  

1.2.4 获取特殊元素

1. 获取body元素：document.body

2. 获取html元素：document.documentElement

1.3 事件基础

1.3.1 事件概述

1. 事件是可以被 JavaScript 侦测到的行为。

2. 例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

1.3.2 事件三要素

• 事件源（谁）：触发事件的元素

• 事件类型（什么事件）： 例如 click 点击事件

• 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

案例代码

  唐伯虎
  

1.3.3 执行事件步骤

1. 获取事件源

2. 注册事件

3. 添加事件处理程序 (函数)

1.3.4 鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onmousemove	鼠标点击移动触发
onmouseup	鼠标抬起触发
onmousedown	鼠标按下触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发

  

  登入
  

1.4 操作元素

操作元素来改变元素里面的内容、属性等。

1.4.1 操作元素内容

1. element.innerText：从起始位置到终止位置的内容，会去除html标签，同是空格和换行也会去掉

2. element.innerHTML：从起始位置到终止位置的全部内容，包括html标签，同是保留空格和换行

  

    我是文字
  

  

innerText和innerHTML的区别

1. 获取内容时的区别：

   1. innerText会去除空格和换行，而innerHTML会保留空格和换行

2. 设置内容时的区别：

   1. innerText不会识别html，而innerHTML会识别

  按钮
  
我是一段文字，我很好看！
  

1.4.2 属性操作

1. src

2. href

3. id

4. alt

5. title

语法：

1. 获取属性值

   元素对象.属性名

2. 设置属性值

   元素对象.属性名 = 值

  
  

    上午好
  
  

1.4.3 表单元素属性操作

1. type

2. value

3. checked

4. selected

5. disabled

语法：

1. 获取属性的值

   1. 元素对象.属性名

2. 设置属性的值

   1. 元素对象.属性名 = 值

   2. 表单元素中有一些属性如：disabled、checked、selected，这些属性值是布尔类型

body>
  
  
    上海
    深圳
  

  

1.4.4 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、等样式。

1. 常用方式

   1. 行内样式操作：element.style

   2. 类名样式操作：element.className

2. 操作style属性

   1. 语法：元素对象.style.样式属性 = 值;

  
 我是一个div 

  

操作className属性

1. 语法：元素对象.className = 值;

  
文本
  

注意：

1. class是个保留字，因此使用className来操作元素类名属性

2. className会直接更改元素的类名，会覆盖原先类名

1.5 排他操作

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1. 所有元素全部清除样式（一定要先 干掉所有人）

2. 给当前元素设置样式 （最后 复活自己）

  按钮1
  按钮2
  按钮3
  按钮4
  按钮5