JavaScript 系列笔记——DOM（贰）

最新推荐文章于 2024-08-05 22:43:05 发布

CN-浮幻

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量943

点赞数 3

分类专栏： JavaScript 文章标签：编程语言前端 javascript dom

本文链接：https://blog.csdn.net/weixin_50697957/article/details/119564496

版权

JavaScript 系列笔记：

JavaScript 系列笔记——目录

点击上方链接可查看更多笔记

DOM

1. DOM 简介

1.1 什么是 DOM

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

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

1.2 DOM 树

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

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

2. 获取元素

2.1 获取页面元素

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

2.2 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id')

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

2.3 根据标签名获取

使用 getElementsByName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByName('标签名')

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态

2.4 通过 HTML5 新增的方法获取

document.getElementsByClassName('类名')	// 根据类名返回元素对象集合
document.querySelector('选择器')			// 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器')		// 根据指定选择器返回

注意：

querySelector 和 querySelectofAll 里面的选择器需要加符号，比如：document.querySelector('#nav')

2.5 获取特殊元素（body，html)

// 获取body元素
document.body				// 返回body元素对象
// 获得html元素
document.documentElement	// 返回html元素对象

3. 事件基础

3.1 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解：触发--- 响应机制。

3.2 事件三要素

1. 事件源（谁）

2. 事件类型（什么事件）

3. 事件处理程序（做啥）

3.3 执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采用函数赋值形式）

// 1. 获取事件源
let btn = document.getElementById('btn')
// 2. btn.onclick 注册事件 
// 3. 添加事件处理程序
btn.onclick = function() {
    alter('你好')
}

3.4 常见的鼠标事件

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