Dom基础-创新互联

目录

创新互联建站专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管，支持按月付款！我们的承诺：贵族品质、平民价格，机房位于中国电信/网通/移动机房，德阳服务器托管服务有保障！

1.1  Dom简介

1.2 Dom树

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

2   获取元素

2.1  根据ID获取元素

语法：document.getElementById(id)

2.2  根据标签名获取元素

2.3  其他方式获取元素 

2.4  获取特殊元素

3  事件基础

3.1 事件基础

3.2  事件三要素  （重点）

3.3  事件执行步骤

获取事件源

3.4  鼠标事件

4  操作元素

4.1  操作元素内容

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

4.2 属性操作

4.3  表单元素属性操作

4.4   样式属性操作

4.5  排他思想

---

1.1  Dom简介

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

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

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

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

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

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

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

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

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

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

2   获取元素 2.1  根据ID获取元素

1. 语法：document.getElementById(id)

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

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

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

2.2  根据标签名获取元素

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

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

3. 参数：标签名

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

2.3  其他方式获取元素 

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

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

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

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

2.4  获取特殊元素

1. 获取body元素：document.body

2. 获取html元素：document.documentElement

3  事件基础 3.1 事件基础

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

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

3.2  事件三要素  （重点）

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

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

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

3.3  事件执行步骤

1. 获取事件源

2. 注册事件

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

3.4  鼠标事件

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

4  操作元素 4.1  操作元素内容

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

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

innerText和innerHTML的区别

1. 获取内容时的区别：

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

2. 设置内容时的区别：

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

4.2 属性操作

1. src

2. href

3. id

4. alt

5. title

语法：

1. 获取属性值

   元素对象.属性名

2. 设置属性值

   元素对象.属性名 = 值

4.3  表单元素属性操作

1. type

2. value

3. checked

4. selected

5. disabled

语法：

1. 获取属性的值

   1. 元素对象.属性名

2. 设置属性的值

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

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

4.4   样式属性操作

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

1. 常用方式

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

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

2. 操作style属性

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

3.     操作className属性

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

注意：

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

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

4.5  排他思想

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

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

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

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

文章标题：Dom基础-创新互联
文章起源：http://cqcxhl.cn/article/ggcoi.html