JS学习日记(webAPI—DOM)

前言

接下来,我们正式进入了JS的正片,没想到一转眼更新这么多了,最开始写这些是为了回顾自己学习的知识,也为了供各位想学习的人提供便利,总之,感谢各位的关注和喜爱,我会继续努力更新的!今天的内容是对webAPI的一些简单介绍,喜欢就点赞关注吧,欢迎在评论区讨论学习

什么是webAPI

JavaScript Web APIs 是一组由浏览器提供的接口,允许开发者使用 JavaScript 与浏览器和用户设备进行交互。这些 API 提供了对浏览器功能(如 DOM 操作、事件处理、HTTP 请求等)的访问,使得开发者能够创建动态和交互式的网页应用。

DOM

DOM (Document Object Model) API,DOM API 允许 JavaScript 访问和操作网页的文档结构。通过 DOM API,开发者可以创建、修改和删除 HTML 元素和属性,以及响应用户事件,是JavaScript里非常重要的API

JavaScript 复制代码
// 获取元素
const element = document.getElementById('myElement');

// 修改内容
element.textContent = 'Hello, World!';

// 添加事件监听器
element.addEventListener('click', () => {
  alert('Element clicked!');
});

简单来说DOM就是让你通过js的方式操控浏览器内容(比如监听事件,这就是DOM能做到的,很多网页特效都是用DOM做的)

DOM树

DOM树(Document Object Model Tree)是浏览器用来表示和操作HTML或XML文档的树形数据结构。DOM树将文档的每个元素、属性、文本片段等表示为一个节点(Node),这些节点按照文档的层级结构组织成树形结构。

DOM树的结构

1.文档节点(Document Node):树的根节点,代表整个文档。

2.元素节点(Element Node):代表HTML或XML文档中的元素,如"body"、"div"、"p"等。

3.属性节点(Attribute Node):代表元素节点的属性,如id、class、href等。

4.文本节点(Text Node):代表元素节点中的文本内容。

代码对比

go 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a <a href="#">sample</a> page.</p>
</body>
</html>

DOM树里

go 复制代码
Document
│
├── html
│   ├── head
│   │   └── title
│   │       └── "Sample Page"
│   └── body
│       ├── h1
│       │   └── "Hello, World!"
│       └── p
│           ├── "This is a "
│           ├── a
│           │   ├── href="#"
│           │   └── "sample"
│           └── " page."

总结

今天的笔记就到这了,喜欢就点赞关注吧

相关推荐
开心工作室_kaic18 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā18 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
向宇it19 分钟前
【unity小技巧】unity 什么是反射?反射的作用?反射的使用场景?反射的缺点?常用的反射操作?反射常见示例
开发语言·游戏·unity·c#·游戏引擎
武子康24 分钟前
Java-06 深入浅出 MyBatis - 一对一模型 SqlMapConfig 与 Mapper 详细讲解测试
java·开发语言·数据仓库·sql·mybatis·springboot·springcloud
转世成为计算机大神1 小时前
易考八股文之Java中的设计模式?
java·开发语言·设计模式
宅小海1 小时前
scala String
大数据·开发语言·scala
朝九晚五ฺ1 小时前
【Linux探索学习】第十四弹——进程优先级:深入理解操作系统中的进程优先级
linux·运维·学习
qq_327342731 小时前
Java实现离线身份证号码OCR识别
java·开发语言
锅包肉的九珍1 小时前
Scala的Array数组
开发语言·后端·scala
心仪悦悦1 小时前
Scala的Array(2)
开发语言·后端·scala