web API -- DOM、获取页面元素以及事件源知识

布兰妮甜

已于 2024-08-22 15:44:36 修改

阅读量858

点赞数 13

文章标签： javascript 开发语言前端

于 2024-08-22 15:39:39 首次发布

本文链接：https://blog.csdn.net/chaosweet/article/details/141429629

版权

接受所有的声音，打破所有的质疑，你永远来得及选择滚烫的人生

文章目录

javascript的组成

ECMAScript：javascript标准
BOM：浏览器对象模型
DOM：文档对象模型

API和web API

API：应用程序编程接口
webAPI：浏览器平台对外公开的提供操作浏览器和网页的接口 (BOM，DOM)

DOM介绍

目的：为了操作网页 (属性和方法)
概念：文档对象模型 document object model
DOM树
- 文档树：浏览器在加载html文件时，会把文档、文档中的标签、属性、文本、注释转换成对象，然后按照标签的关系(父子，兄弟，祖孙)以及树状结构存储到内存中
- 文档树中的对象，也被称为节点对象
- 节点对象的分类：文档(document)，元素(标签转换的对象)，文本，属性，注释

获取页面元素

获取body元素：document.body
```
var body = document.body
console.log(body)
```
注意：body是页面主体标签，有特殊性，可快速获取，但是div这类标签就不行了

通过id获取元素：document.getElementById('id名')

var box = document.getElementById('box')
console.log(box)

通过标签名获取元素：document.getElementsByTagName('标签名')
```
var inputs =  document.getElementsByTagName('input')
console.log(inputs)
```
注意：通过标签名获取到的数据是伪数组，不管标签是一个还是多个，返回的都是伪数组
根据选择器获取单个元素：document.querySelector('选择器')
根据选择器获取多个(一组)元素：document.querySelectorAll('选择器')
- 加了document.querySelectorAll之后就变成了伪数组
- 伪数组可以循环的注册事件
- 循环注册事件的时候，循环先执行完毕，而函数是触发事件的时候才执行
- 循环里面的i在函数中是不能直接使用的
- 如果要使用跟i相关的数据，可以在函数外面先存起来元素对象.属性 = i;
- 在函数里面可以使用this访问被注册了事件的对象
- this就是点的对象，该对象就可以访问存储在其身上的数据

事件

目的：我们通常要做某些操作之后，才会让元素发生变化，那么此时就需要事件驱动完成
概念：用于和用户交互的动作，尤其是鼠标的点击，键盘的输入回车等；本质为浏览器里面一种触发-响应的一种机制
事件三要素
- 事件源：被触发事件的元素 (如当按钮被操作)
- 事件类型：事件的触发方式 (如鼠标点击或键盘输入)
- 事件处理函数：事件触发要执行的代码 (如函数内让body变背景色)

元素注册事件

语法：事件源.事件类型 = 事件处理程序 function(){}
步骤
1. 获取元素
2. 注册事件，添加事件
3. 处理程序

// 获取元素
var btn = document.querySelector('input')  
// 注册事件,添加事件
btn.onclick = function () {
   // 处理程序
   alert('娃哈哈')
}
事件处理程序的本质：
  1.onclick本质上就是事件源这个对象中的某一个键值对而已，默认值是null，表示没有注册事件
  2.给事件源注册onclick事件，其实本质上就是给onclick赋值一个函数，所以onclick是事件源的一个方法而已
  3.点击按钮时，浏览器自动调用了btn.onclick()

事件处理程序中的this

在事件处理程序中，this代表的是当前事件源

// 1.获取元素
var btn = document.querySelector('input')
// 2.注册事件
btn.onclick = function () {
	// 事件处理程序 this 指的是当前事件源
	// 3.时间处理程序
	console.log(this)
	console.log(btn)
}
var div = document.querySelector('div')
div.onclick = function () {
	console.log(this)
	console.log(div)
}

扩展

数组和伪数组
- 相同点：都有索引和长度
- 不同点：伪数组不能够调用真正数组中内置的方法 (push，pop，sort…)

获取元素

<div id="box">
   <p>段落1</p>
   <p>段落2</p>
   <p>段落3</p>
   <p>段落4</p>
</div>
<div id="box2">
   <p class="c1">1</p>
   <p>2</p>
   <p>3</p>
</div>
<script>
  // 想办法缩小查找范围
  // 首先获取大盒子
  var box2 = document.getElementById('box2')
  // 再去查找盒子里面的p元素
  var ps = document.getElementsByTagName('p')
  console.log(ps)
</script>