文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

浏览器中的JavaScript：文档对象模型与 DOM 操作

作为运行在浏览器中的脚本语言，它对于网页操作非常有用。在本文中，我们将看到可以用哪些手段来修改 HTML 文档和交互。 什么是文档对象模型？ 文档对象模型是在浏览器中一切的基础。但它究竟是什么呢？...window和document之间的区别 window 是指浏览器，而 document 是你当前正在操作的 HTML 页面，即当前文档。...虽然 jQuery 不会很快的消失，但每个 JavaScript 程序员都必须知道该如何使用本机 API 去操作 DOM。...这样做有很多理由，其他库会增加 JavaScript 程序的加载时间和大小，更不用说 DOM 操作在技术面试中出现的越来越多。...DOM 中可用的每 个HTML 元素都有一个暴露一定数量属性和方法的接口。如果对使用什么方法有疑问，可以参考 MDN上的优秀文档。

1.1K10

浏览器渲染页面与DOM相关常见的面试题以及问题

中的对象,在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签,这时，浏览器会发送一个获取请求来重新获得这些文件,这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程...DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。...DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。...什么是DOM渲染？ DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。 DOM树的构建是文档加载完成开始的？...构建DOM树是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。

1.5K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离

    如果其中一个不存在，则将另一个值作为可视高度。 可以在浏览器 F12 打开的控制台里进行测试，我这显示的 368 ，用微信截图移动到可视区域可以看到高度正好是 368 。...JavaScript 代码中，获取的滚动距离（ scrollTop ）和文档高度（ scrollHeight ）都是以像素为单位的值。...它通过比较 document.body.scrollHeight 和 document.documentElement.scrollHeight 的值，选择较大的值作为文档的滚动高度。...实例演示 把这段代码保存为本地的 html 文件，再用浏览器打开可以更具体的感知。 文档中用到的几种属性含义和用法： 属性 含义 示例 document.documentElement.clientHeight 文档根元素的视口高度，不包括滚动条、边框和外边距。

    1.3K00

    2017前端开发手册四-前端开发人员应该掌握的Web技术

    （或者叫ECMAScript 262） JavaScript对象符号（又名JSON） 文档对象模型（DOM又名） 网络的API（又名HTML5和朋友或浏览器的API） Web内容无障碍指南（又名WCAG...）无障碍富互联网应用程序（又名ARIA） 这些技术与相关文档和规范定义如下。...- 维基百科 大多数相关规范/文档： 所有的W3C CSS规范 层叠样式表级别2版本2（CSS 2.2）规范 CSS参考 3级选择器 3 文档对象模型（DOM又名） 文档对象模型（DOM）是代表并与HTML...每个文档的节点以树状结构组织，称为DOM树。在DOM树中的对象可以被寻址，并通过使用所述对象的方法操纵。一个DOM的公共接口在其应用程序编程接口（API）来指定。...- 维基百科 大多数相关规范/文档： 文档对象模型（DOM）3级事件规范 DOM实用标准 W3C DOM4 4 JavaScript编程语言（或者叫ECMAScript 262） JavaScript

    1.9K80

    【Web APIs】DOM 文档对象模型 ① ( DOM 相关概念 - DOM 文档、DOM 树、DOM 节点 | 根据元素 ID 获取 DOM 元素 - getElementById 函数 )

    本博客相关参考文档 : WebAPIs 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API getElementById 函数参考文档 : https.../zh-CN/docs/Web/API/Element 一、DOM 相关概念 1、DOM 简介 DOM , 全称 " Document Object Model " , 文档对象模型 , 是一个可处理...扩展标记语言 HTML 和 XML 的 接口 , 借助该接口 , 可以 动态的 访问 和 修改 文档的 内容、结构和样式 ; DOM 接口是 W3C 组织 推荐的 标准编程接口 , 主要处理 HTML...XML 两种类型的文档 ; 2、DOM 相关概念 - DOM 文档、DOM 树、DOM 节点 DOM 文档 : 一个 HTML 页面就是一个文档 , DOM 中使用 document 表示 ; DOM...: DOM 节点 : 在 DOM 树 的 树形结构中 , 每个 DOM 节点 都代表文档中的一个部分 , 如 : 元素、属性或文本 , 并且这些节点以特定的关系相互连接 , 形成一个完整的树状图

    1.4K10

    = “红宝书”_JavaScript高级程序设计(第4版) 之「JS的前世今生」

    ，比如： 会被抽象成这样： 虚拟DOM实锤。 DOM通过创建表示文档的树，开发者通过一些DOM API 完成增删改查。 为什么要搞DOM？ 可以在不刷新的情况下修改页面外观和内容。...问题是，两大厂牌微软和网景又搞出了两个不同的动态HTML策略，也就意味着，你写同样一个HTML，无法在浏览器中通过DOM API修改内容，得到一样的效果。因为他们抽象HTML的方式不同。...DOM级别 DOM 1级 的目标是映射文档结构，有DOM Core和DOM HTML两个模块组成，前者提供一种映射XML文档，从而方便访问和操作文档任意部分的方式，后者扩展了前者，增加了特定于HTML的对象和方法...它是没有相关标准的JavaScript实现，包括： 弹出新浏览器窗口 移动、缩放和关闭浏览器 navigator对象，提供关于浏览器的信息 location对象，提供浏览器加载页面的信息 screen对象...总结 JavaScript由三个部分组成： ECMAScript 由ECMA-262定义并提供核心功能 文档对象模型DOM 提供与网页内容交互的方法和接口 浏览器对象模型BOM 提供与浏览器交互的方法和接口

    1.2K40

    DOM和BOM的区别

    DOM和BOM的区别 在浏览器中运行的JavaScript可以认为由三部分组成：ECMAScript描述了该语言的语法和基本对象，DOM文档对象模型描述了处理网页内容的方法和接口，BOM浏览器对象模型描述了与浏览器进行交互的方法和接口...DOM全称是Document Object Model即文档对象模型，是针对XML的基于树的API，描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档...DOM定义了Node等对象做为这种实现的基础，就是说为了能以编程的方法操作这个HTML的内容，例如添加元素、修改元素、删除元素等，我们把这个HTML结构看做一个对象树DOM树，其本身和里面的所有东西例如...这些标签都看做一个对象，每个对象都叫做一个节点Node，节点可以理解为DOM中所有Object的父类。...BOM BOM是Browser Object Model的缩写，即浏览器对象模型。 BOM没有相关标准。 BOM的最根本对象是window。

    1.7K20

    JavaScript高级程序设计学习总结一

    大家好，又见面了，我是你们的朋友全栈君 一，JavaScript的实现 JavaScript和ECMAScript通常都被人认为是相同的含义，JavaScript的含义比ECMAScript规定要多的多...一个完整的的JavaScript实现应该由三个不同的部分组成。...核心（ECMAScript的） 文档对象模型（DOM） 浏览器对象模型（BOM） 二，ECMAScript中 是由ECMA-262定义的，ECMAScript与Web浏览器没有依赖关系，Web浏览器只是...看下图： 通过DOM创建的表示文档的实行图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如地删除，添加，替换，或修改任何节点。...五，小结 JavaScript的是一种专为与网页交互而设计的脚本语言，由下列三个不同部分组成： 的ECMAScript，由ECMA-262定义，提供核心语言功能; 文档对象模型（DOM），提供访问和操作网页内容的方法和接口

    68340

    Java学习笔记-全栈-web开发-03-JavaScript基础

    4.4 运算符和表达式 与java（甚至其他大部分语言）基本一致，不再赘述，实在不会可查阅官方参考手册。...但有一些事实上的标准。如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。...9. javascript DOM 9.1 DOM介绍 DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。 DOM 将把整个页面规划成由节点层级构成的文档。...9.2 XML DOM与HTML DOM的关系 XML DOM 定义了访问和处理 XML 文档的标准方法 HTML文档格式 符合XML语法标准，所以可以使用XML DOM API。...HTML文档的对象，可以说是一套 更加适用于 JavaScript 技术开发 的API。

    1.1K20

    再谈BOM和DOM(1):BOM与DOM概述

    浏览器对象模型（BOM）：与浏览器交互的方法和接口 文档对象模型 （DOM）：处理网页内容的方法和接口 DOM-文档对象模型 DOM（文档对象模型）是 HTML 和 XML 的应用程序接口，是操作文档出现的...API，是为了操作文档出现的接口。...根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。...BOM与DOM的对比 BOM为了处理浏览器窗口和框架 DOM为了操作文档出现的接口，是 HTML 和 XML 的应用程序接口（API）。...其中DOM包含：window BOM和DOM的结构关系示意图 参考文章： ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）https://www.cnblogs.com/best

    1.1K20

    【Web APIs】Web APIs 简介 ( JavaScript 组成 | Web APIs 概念 | DOM 文档对象模型 | BOM 浏览器对象模型 | MDN 参考文档 )

    这是 JavaScript 的基础 ; DOM 文档对象模型 : 全称 Document Object Model , 提供了对 HTML 和 XML 文档的 表示 和 修改能力 ; BOM 浏览器对象模型...APIs 引入 之前仅学习了 JavaScript 的 ECMAScript 基础语法 , 只能在控制台打印日志 , 输出代码计算结果 , 无法与网页和浏览器进行交互 , 从本篇博客开始 , 学习 DOM...文档对象模型 和 BOM 浏览器对象模型 , 就可以实现 网页 / 浏览器 的 交互效果 ; DOM 文档对象模型 和 BOM 浏览器对象模型 又称为 " Web APIs " , 是 W3C 标准...: DOM 文档对象模型 Document Object Model : JavaScript 靠 DOM 操作页面元素 ; BOM 浏览器对象模型 Browser Object Model : JavaScript...这就是 BOM 浏览器对象模型 提供的 Web APIs 接口 ; 4、Web APIs 参考文档 MDN 官方 Web APIs 参考文档 : https://developer.mozilla.org

    35210

    《Javascript高级程序设计（第四版）》学习笔记（一）第1、2章

    JavaScript的实现 完整的 JavaScript 实现包含以下几个部分： 核心（ECMAScript） 文档对象模型（DOM） 浏览器对象模型（BOM） ?...DOM 通过创建表示文档的树，让开发者随心所欲的控制网页的内容和结构。...借助 DOM 提供的 API，开发人员可以轻松自如的完成对节点的 CRUD 操作 1.2.1 DOM 的级别 DOM Level 1级： 由两个模块组成：DOM Core 和DOM HTML。...DOM Level 2级： 新模块 DOM视图：定义了跟踪不同文档类型视图的接口 DOM事件：定义了事件和事件处理的接口 DOM样式：定义了基于 CSS 为元素应用样式的接口 DOM遍历：定义了遍历和操作文档树的接口...ECMAScript：由 ECMA-262 定义并提供核心功能 文档对象模型（DOM）：提供与网页内容交互的方法和接口 浏览器对象模型（BOM）：提供与浏览器交互的方法和接口 第二章：HTML

    89420

    JavaScript文档（DOM）与浏览器对象模型（BOM）

    它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。...文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。 W3C DOM标准分为3个不同部分 ?...可以通过下图的分层节点显示 ? 模型及扩展 文档对象模型DOM DOM即文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。...DOM树结点的这些属性给出了页面的基本内容和结构信息，但不能反映标签、属性以及内容等与主题的相关程度，因而缺乏主题提取所需的语义。...BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup

    1.6K10

    JavaScript高级程序设计-性能整理（二）

    14.4 小结 文档对象模型（DOM，Document Object Model）是语言中立的 HTML 和 XML 文档的 API。...DOM Level 1 将 HTML 和 XML 文档定义为一个节点的多层级结构，并暴露出 JavaScript 接口以操作文档的底层结构和外观。DOM 由一系列节点类型构成，主要包括以下几种。...支持这一特性的所有 JavaScript 库都会实现一个基本的 CSS 解析器，然后使用已有的 DOM 方法搜索文档并匹配目标节点。...虽然库开发者在不断改进其性能，但 JavaScript 代码能做到的毕竟有限。通过浏览器原生支持这个 API，解析和遍历 DOM 树可以通过底层编译语言实现，性能也有了数量级的提升。...这个方法脱胎于基于原有 DOM 特性实现该功能的 JavaScript 库，提供了性能高好的原生实现。

    1.1K30

    《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

    大家好，又见面了，我是你们的朋友全栈君。 　　在本书的前面章节中，我们主要集中关注于核心JavaScript（ECMAScript），而并没有太多关注在浏览器中使用JavaScript的模式。...如果浏览器支持CSS，那么用户将可以看到文档更好的表现方式。如果浏览器支持JavaScript，那么该文档更大程度上看起来像一个应用程序，并将获取更多增强用户体验的特性。 　　...使用例如headings和lists这样与以上有意义的HTML元素。 　　...这也是为什么使用一个好的JavaScript类库（该类库可以抽象出不同浏览器的区别）可以显著加快开发进度。 　　让我们来看看在访问和修改DOM树时推荐的一些模式（主要是出于性能方面考虑）。...将DOM引用分配给局部变量，并使用这些局部变量。 在可能的情况下使用selector API。 当在HTML容器中重复使用时，缓存重复的次数（参考第二章）。

    1.3K30

    VUE-Learning-01

    JS和 DOM是两种东西，每次连接都需要消耗性能 DOM是一个独立于语言的，用于操作XML和HTML文档的程序接口(API)。...在浏览器中主要用于与HTML文档打交道，并且使用DOM API用来访问文档中的数据。 DOM是个与语言无关的API，它在浏览器中的接口却是用JavaScript来实现的。...客户端脚本编程大多数都是在和底层文档打交道，DOM就成为现在JS编码中的重要部分。 浏览器中通常会把DOM和javascript独立实现。...DOM的位置和JavaScript的位置 在IE中，JavaScript的实现名为JScript，位于jscript.dll文件中，DOM的实现则存在另一个库中，名为mshtml.dll（内部称为trident...firefox的JavaScript引擎名为TraceMonkey，与名为Gecko的渲染引擎相互独立。 2. 操作DOM会导致重排和重绘 访问DOM元素是有代价的。

    63010

    JavaScript 中 的 DOM 和 BOM

    JavaScript 与 ECMAScript 关系 JavaScript = ECMAScript + DOM + BOM 1.ECMAScript 为 JavaScript 提供核心语言功能，是由欧洲计算机制造商协会...ECMA-262 标准没有参考 Web 浏览器，它规定了语言的语法、类型、语句、关键字、保留字、操作符、对象。...2.DOM (文档对象模型) 是针对 XML 但是经过扩展用于 HTML 的应用程序编程接口（API）。...DOM 把 HTML 页面映射为一个多层节点结构，开发人员借助 DOM 提供的 API，可以轻松地删除，添加，替换或者修改节点。...从根本上将 BOM 只处理浏览器窗口和框架，但是人们习惯把针对浏览器的 JavaScript 扩展也算作 BOM 的一部分，例如：浏览器弹出新窗口的功能；移动、缩放和关闭浏览器窗口的功能；navigator

    78920

    JavaWeb03-轻松理解JS（Java真正的全栈开发）

    使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的标准。...ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象,由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。...“W3C 文档对象模型（DOM）是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。”...XML DOM与HTML DOM的关系 XML DOM 定义了访问和处理 XML 文档的标准方法 HTML文档格式 符合XML语法标准，所以可以使用XML DOM API 在XML DOM每个元素 都会被解析为一个节点...js技术开发 的API HTML DOM是对XML DOM的扩展 进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM 常用的方法: getElementById <

    1.8K120

    从硬件、渲染、计算三大视角解析渲染性能优化的本质

    最简单的说，任何一个引擎都会把 Animation 相关 API 单独拎出来，从而区分这种高负载的渲染工作，在框架和底层引擎上进行特殊优化。...，下面，介绍一下 JavaScript 干预的相关问题。...简单说，从 Blink 的视角看 V8 其实是一个局外人，浏览器引擎良好的解耦了 V8 对 DOM 的干预，让这种干预局限在针对 HTML 标记本身上，但是，由于 JavaScript 的干预会导致 DOM...） 组织好 DOM，尽量只创建绝对必要的元素 减少 DOM 元素的数量（在 Blink 内核的 HTMLDocumentParser 处理中 Token 的个数和 DOM 元素数量息息相关，减少 Token...简单来说，在阅读 Chromium 等浏览器内核设计文档或博客的时候，经常看到一些设计方案在阐述 Blink 内核团队遇到的问题和他们解决问题的思路与设想，那么，如果换个思路来看，避免了解引发这些渲染性能问题的原因

    1.9K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券