Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >js中获取html元素之document.documentElement

js中获取html元素之document.documentElement

作者头像

全栈程序员站长

发布于 2022-09-09 02:21:28

发布于 2022-09-09 02:21:28

7.8K00

代码可运行

举报

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

document.documentElement

Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 <html> 元素）。

对于任何非空 HTML 文档，调用 document.documentElement 总是会返回一个 <html> 元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。

html中document.body 与 document.documentElement的区别如下：

1. document.body

返回html dom中的body节点即<body>

2. document.documentElement

返回html dom中的root根节点即<html>

页面指定了 DOCTYPE 时，使用 document.documentElement，否则，使用 document.body。

以HTML超文本标记语言为例：整个文档的根可在DOM中使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/161655.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

详解各种获取元素宽高及位置的属性

offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（各浏览器的offset

laixiangran

2018/04/24

4.7K0

详解各种获取元素宽高及位置的属性

前端温习(二)： Javascriput 核心对象 Document 对象

html html5 编程算法 css

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

陈大剩博客

2023/02/17

1K0

html Window与document区别

php html 网络安全

对象属性　　window //窗口自身　　window.self //引用本窗户window=window.self 　　window.name //为窗口命名　　window.defaultStatus //设定窗户状态栏信息　　window.location //URL地址，配备布置这个属性可以打开新的页面

全栈程序员站长

2022/09/09

1.2K0

Document接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM树。DOM树包含了像<body>、<div>这样的元素，以及大量其他元素。Document对象向网页文档本身提供了全局操作功能，接口描述了任何类型的文档的通用属性与方法，根据不同的文档类型(例如HTML、XML、SVG、...)能够使用更多API，此外使用text/html作为内容类型content type的HTML文档，还实现了HTMLDocument接口，而XML和SVG文档则额外实现了XMLDocument接口。

WindRunnerMax

2020/12/01

1.9K0

web前端开发初学者十问集锦（4）

利用JS来控制页面控件的显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

恋喵大鲤鱼

2018/08/03

1.6K0

【Web APIs】DOM 文档对象模型 ⑤ ( 获取特殊元素 | 获取 html 元素 | 获取 body 元素 )

dom web 对象模型 html

通过 JavaScript 和 DOM 操作可以获取上述两个 html 和 body 特殊标签元素 ;

韩曙亮

2024/06/24

1.1K0

【Web APIs】DOM 文档对象模型 ⑤ ( 获取特殊元素 | 获取 html 元素 | 获取 body 元素 )

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

javascript html java

上网搜了一下scrollWidth和scrollHeight，大部分都是转帖，也没有具体说清楚，这两个属性值是什么，也没有图。

全栈程序员站长

2022/09/15

1.1K0

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

JS基础第二课（元素篇）

前端 javascript 学习笔记

1、用于HTML和XML文档的编辑接口，给文档提供一种结构化的表示方法，可以修改文档的内容和结构

申小兮

2023/04/13

8670

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊

全栈程序员站长

2022/09/16

9.3K0

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth「建议收藏」

新手如何在 ES6 如何操作HTML DOM元素？

html dom 对象浏览器数组

DOM代表文档对象**模型。HTML 页面在浏览器中呈现。浏览器将从网络服务器下载的页面中包含的所有元素组装到其内存中。一旦完成，浏览器就会在浏览器窗口中显示这些对象，一旦完成，浏览器就无法再识别单个 HTML 元素。支持 JavaScript 的浏览器能够在 HTML 页面在浏览器中呈现之后识别该页面中的各个对象，因为支持 JavaScript 的浏览器可以识别并使用 DOM。因此，允许随意控制对象的功能。

用户1418987

2023/10/21

6480

新手如何在 ES6 如何操作HTML DOM元素？

JavaScript--XML DOM 总结

数据 javascript xml dom 对象

Mozilla 开发者社区(MDN):https://developer.mozilla.org/zh-CN/JavaScript MDN文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

思索

2024/08/16

3170

一篇文章带你了解JavaScript htmldom 导航

node.js html javascript

在一个HTML文档都是一个节点，The entire document is a document node 每个HTML元素是元素节点在HTML元素的文本是文本节点每一个HTML属性是一个属性节点所有注释都是注释节点。

前端进阶者

2021/01/22

3970

前端架构师之10_JavaScript_DOM

架构师前端 javascript dom 对象

第1级DOM（DOM Level 1，或DOM1）。为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。结合了Netscape及微软公司开发的DHTML（动态HTML）思想。

张哥编程

2024/12/13

5230

JavaScript DOM基础2

DOM自身存在很多类型，比如Element类型：表示的是元素节点，再比如Text类型：表示的是文本节点。DOM也提供了一些扩展功能。一．DOM类型 DOM基础课程中，我们了解了DOM的节点并且了解怎样查询和操作节点，而本身这些不同的节点，又有着不同的类型。 DOM类型类型名说明 Node 表示所有类型值的统一接口，IE不支持 Document 表示文档类型 Element 表示元素节点类型 Text 表示文本节点类型

汤高

2018/01/11

9660

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

Hongten

2018/09/18

1.2K0

JavaScript笔记(11)之Web APIs阶段获取元素

api 网站编程算法

我们之前学的呢,都是JS的基础部分,也就是ECMA规定的语法,后面我们就要学习BOM和DOM了.

y191024

2022/09/20

4470

JavaScript笔记(11)之Web APIs阶段获取元素

打开控制台也删不掉的元素，前端都吓尿了

运行完我的代码了，又切回element板块，想删掉它(谁叫你那么大坨的，被我盯上了)。点一下选中这个div，然后按一下删除

lhyt

2020/05/26

1.5K0

打开控制台也删不掉的元素，前端都吓尿了

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

node.js java https 网络安全

获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较在js控制元素运动的过程中，对于页面元素坐标位置的获取是经常用到的，这里主要总结下两种方法：

全栈程序员站长

2022/09/09

3.1K0

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

w3c标准 – Dom

html xml java javascript node.js

b. XML DOM – 针对 XML 文档的标准模型 (XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法)

全栈程序员站长

2022/09/29

1K0

HTML中document的作用,html中的document对象是什么？一篇文章让你了解document对象

html java https 网络安全

本篇文章主要的介绍了关于HTML document对象的解释，还有关于HTML document对象的使用实例解析，接下来让我们一起来看这篇文章吧

全栈程序员站长

2022/09/09

2.1K0

HTML中document的作用,html中的document对象是什么？一篇文章让你了解document对象

相关推荐

详解各种获取元素宽高及位置的属性

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验