JS学习笔记---14 DOM-1、什么是DOM

最新推荐文章于 2024-08-26 14:25:48 发布
最新推荐文章于 2024-08-26 14:25:48 发布
阅读量108 收藏
点赞数
分类专栏： JS学习笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51744858/article/details/119746302
版权
DOM（文档对象模型）是W3C定义的标准接口，用于处理HTML和XML文档。它将网页内容视为对象，包括document、element和node。DOM树是页面结构的抽象，元素是标签，节点涵盖所有内容。通过DOM接口，可以操作和改变网页的结构、内容和样式。
摘要由CSDN通过智能技术生成

DOM

1、什么是DOM

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

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

1.1、DOM 树

在这里插入图片描述

  • 文档：一个页面就是一个文档，DOM 中使用 document 表示
  • 元素：页面中的所有标签都是元素，DOM 中使用element 表示
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node表示
  • DOM 把以上内容都看作是对象
xiaoyu~~
关注
专栏目录
React学习笔记--虚拟DOM与DOM Diffing算法
丑小鸭变黑天鹅的博客
12-21 403
虚拟DOM与DOM Diffing算法React Diff原理深入分析1、 Diffing 算法1）逐层比较2）、对比同类型的组件元素3）、对比同一类型的元素4）、对子节点进行递归5）、Keys2、用例子验证一下Diffing算法3、key的作用（key的内部原理） React Diff原理深入分析 在了解Diff前，先看下React的虚拟DOM的结构 这是html结构 这是React渲染html时的js代码 自己可以在babel上试试 由此可以看出这是一个树结构 React在调用render方
Part1-DOM学习笔记-DOM基础操作
m0_63165331的博客
08-07 868
本文是个人的DOM基础学习笔记系列，内含大量示例代码，对初学者会有所帮助。
Javascript学习笔记-----BOM和DOM操作
sinat_38505686的博客
05-08 907
Javascript学习外部对象描述BOMDOMwindow对象对话框定时器定时器周期性定时器 外部对象描述 BOM Browser Object Model：浏览器对象模型。用来访问和操纵浏览器窗口，使Javascript有能力与浏览器“对话” 通过使用BOM，可移动窗口、更改状态栏文本、执行其他不与页面内容发生直接联系的操作 没有相关标准，但被广泛支持 DOM Document Objec...
react学习笔记-05 —— react-router-dom v6
weixin_47360323的博客
03-06 716
路由的安装 npm i react-router-dom 基本使用 //引入要跳转的组件 import 组件名 from '路由地址'; <Routes> <Route path='/地址' element={ <组件名 />}> <Route path='地址' element={<组件名 />} /> // 子路由 </Route> </Routes&gt.
Part4-DOM学习笔记-获取元素属性及节点操作
最新发布
m0_63165331的博客
08-26 900
该文章是个人学习笔记系列，内含大量示例代码，希望对初学者有所帮助
JS学习笔记-操作DOM对象
Aaaabt的博客
05-17 204
JS学习笔记-操作DOM对象 DOM:文档对象模型 浏览器网页就是一个DOM树形结构 核心 更新：更新一个DOM节点 遍历：得到DOM节点 删除：删除一个DOM节点 添加：添加一个新的节点 要想操作一个DOM节点，就必须先获得这个DOM节点 获得DOM节点 // 对应CSS选择器 var h1 = document.getElementsByTagName('h1'); var p1 = document.getElementById('p1'); var p2 = document.getE
js学习笔记--DOM
weixin_47981630的博客
03-19 108
什么是DOM? 文档对象模型(Document Object Model,简称DOM)，是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准 编程接口 。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 通过js获取界面元素 通过ID获取 使用 html getElementById()获取 例如document.getElementById('content'); 参数id是大小写敏感的字符串，需用引号包裹 根据标签名获取 使用getElemen
React学习笔记 -- 组件通信之路由传参（react-router-dom）
2401_84093860的博客
04-20 862
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取438)]你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
【Vue】学习笔记--Vue 虚拟DOM demo分享
zZhiqg的博客
11-05 205
【Vue】学习笔记--Vue 虚拟DOM demo分享
Javascript学习笔记-学JS的一手教程
05-07
JavaScript学习笔记 JavaScript是一种强大的、跨平台的编程语言，主要用于为网页和应用程序添加交互性。在Web开发中，JavaScript与HTML和CSS一起构成了基础的三驾马车。本教程将帮助初学者理解JavaScript的核心概念...
前端学习笔记-黑马程序员JS
01-09
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...
比较详细的javascript DOM 学习笔记第1/2页
12-08
本篇学习笔记主要探讨了DOM的基础知识，包括不同类型的节点以及如何访问和操作这些节点。 1. **DOM节点层次** - **Document**：作为整个文档的顶级节点，它包含了文档的全部内容。 - **DocumentType**：表示文档...
jQury-DOM篇学习笔记
04-15
jQuery DOM篇的学习主要涵盖了解DOM（Document Object Model）节点的创建、插入、删除以及相关的操作方法。DOM是HTML和XML文档的结构化表示，通过DOM，我们可以方便地访问和修改文档内容。 首先，jQuery提供了简便...
JS基本功DOM学习笔记
07-12
在JS基本功DOM学习笔记中，我们将深入探讨以下几个核心知识点： 1. **DOM树**：DOM将网页内容表示为一棵由节点构成的树形结构，其中每个节点代表HTML元素、属性、文本等。根节点通常是`document`，其他节点如`<div>...
JS学习笔记---15 事件高级-1、注册事件
weixin_51744858的博客
08-17 342
事件高级 1、注册事件（绑定事件） 1.1、注册事件概述 给元素添加事件，称为注册事件或者绑定事件。 注册事件有两种方式：传统方式 和 方法监听注册方式 传统注册方法 利用 on 开头的事件 onclick < button οnclick=“alert('hi~)”></ button> btn.onclick = function(){} 特点：注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 方法监听注册方式 W3C
JS学习笔记---17 PC端网页特效-4、元素滚动 scroll 系列
weixin_51744858的博客
08-20 256
4、元素滚动 scroll 系列 4.1、元素 scroll 系列属性 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 scroll 系列属性 作用 element.scrollTop 返回被卷去的上侧距离，返回数值不带单位 element.scrollLeft 返回被卷去的左侧距离，返回数值不带单位 element.scrollWidth 返回自身实际的宽度（实际内容，内容超出也计算在内），不含边框，包含paddin
JS学习笔记---15 事件高级-7、常用的鼠标事件
weixin_51744858的博客
08-19 250
7、常用的鼠标事件 7.1、常用的鼠标事件 1、禁止鼠标右键菜单 contextmenu contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。 document.addEventListener(‘contextmenu’,function(e){ ​ e.preventDefault(); }) 2、禁止选中文字 selectstart selectstart document.addEventListener(‘selectstart’, function(
JS学习笔记---14 DOM-3、事件基础
weixin_51744858的博客
08-17 214
3、事件基础 3.1、事件概述 JS 是我们有能力创建动态页面，而事件是可以被 JS 侦测到的行为。 简单理解： 触发—响应机制 网页中的每个元素都可以产生某些可以触发 JS 的时间，例如，我们可以再用户点击某按钮时产生一个事件，然后去执行某些操作。 3.2、事件三要素 事件由三部分组成：事件源、事件类型、事件处理程序 事件源：事件被触发的对象 事件类型 ：如何触发 什么事件 比如：鼠标点击（onclick）、鼠标经过、鼠标按下 事件处理程序：通过一个函数赋值的方式完成 <body>
React-Native学习笔记：组件与JSX语法解析
这个文档是作者在学习React-Native过程中整理的个人笔记，主要涵盖了React的基础语法和React-Native的一些核心概念。 #### React基础知识 React是一种用于构建用户界面的JavaScript库，它的核心理念是组件化。以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值