你真的知道DOM吗（中）----（Document类型, Element类型）

最新推荐文章于 2024-03-26 23:03:57 发布
最新推荐文章于 2024-03-26 23:03:57 发布
阅读量956 收藏 4
点赞数
分类专栏： 你不知道的javaScript 文章标签： js node dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haofandedaima/article/details/108845739
版权
本文详细介绍了DOM中的Document类型和Element类型。Document类型包括文档子节点、文档信息和查找元素等，重点讲解了document对象的相关属性和方法。Element类型则涵盖了HTML元素、特性的相关方法如getAttribute、setAttribute和removeAttribute，以及如何创建和操作元素的子节点。文章结尾总结了Document和Element在前端开发中的重要性。
摘要由CSDN通过智能技术生成

文章目录

前言

       DOM（文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。可以说，DOM是前端开发中最重要的一个渲染API，它决定了页面的样式结构的走向。

正文

Document类型

       在浏览器中，document对象是HTMLDocument(继承自Document类型）的一个实例，表达整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问

文档子节点

document.documentElement: 指向HTML页面中的html元素
document.body: 指向HTML页面中的body元素
在这里插入图片描述
HTMLHtmlElement对象和HTMLBodyElement对象继承了HTMLElement接口，HTMLElement可以表示所有的接口

文档信息

       HTMLDocument的实例，相比标准的document对象还有一些所没有的属性。这些属性提供了document对象所表现的网页的一些信息。

  • title属性：包含着title标签中的文本，用于显示在浏览器窗口的标题栏或标签页上
  • URL属性：包含页面完整的URL（即地址栏中显示的URL）
  • domain属性：只包含页面的域名
  • referrer属性：保存着链接到当前页面的那个页面的URL
    在这里插入图片描述
           URL是当前页面地址；referrer是来源地址，即上一个访问页面的url的地址
           这里有个js跨域的问题稍微提一下，JavaScript的脚本必须在同一域名下才可以互相访问，也就是在document.domain相同的时候才可以互相访问，不然就会引起跨域访问失败的问题，所以很容易理解，直接修改document.domain让脚本之间的域名相同来实现通信便是js跨域的一个解决办法。这里我们不细谈这个问题，感兴趣的同学可以关注我后面的文章，会有相关关于跨域更多的介绍

查找元素

       因为这个比较常见了，大家应该都不陌生，所以就不多赘述了，下面给出相关方法的用法以及代码示例，大家可以结合代码示例自己体会理解一下

  • getElementById():通过元素id来查找对应元素，返回一个htmlElement对象
  • getElementsByTagName()：通过元素标签名来查找对应元素，返回HTMLCollections对象
  • getElementsByName(): 通过元素name特性来查找对应元素，返回HTMLCollections对象
<html>
	<body>
		<input type=
最低0.47元/天 解锁文章
祯民
关注
专栏目录
dom4j-1.6.1.zip.rar
11-22
**DOM4J 1.6.1：XML处理的关键库** DOM4J 是一个非常流行的、灵活的Java库，用于处理XML文档...如果你在官网下载速度较慢，可以尝试通过镜像站点或者从其他可靠的源获取DOM4J 1.6.1的资源，以便快速集成到你的项目中。
纯css主题切换，简单易懂 document.documentElement.setAttribute(‘data-theme‘, ‘light‘)；
Li_Ning21的博客
07-01 2210
纯css主题切换，贼简单
前端夜间模式（换肤）方案
薛定谔的猫-前端领域
06-11 3366
对于上面提到的实现方案，均不涉及持久化，可将对应的模式保存到本地缓存（localStorage）里，然后每次渲染读取缓存的模式值进行渲染，并且切换的时候修改缓存中的模式即可。
document操作标签对象的其他方法
family_love_1998的博客
05-05 793
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document操作标签对象的其他方法</title> <script> /** * 文档对象：document * 和添加元素对象相关的方法 * ...
JS：document 和 element 浅谈
谢谢๑‾᷅^‾᷅๑的博客
12-21 3515
一、简介 DOM 对象：DOM（DOM—Document Object Model）是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。 打开网页后，首先看到的是浏览器窗口，即顶层的window对象，而网页内容就是document对象，其中document是window的一个对象属性，所以document可全局访问。DOM对象共有7种，这里浅谈下其中的HTML D...
【web】DOM基础2
weixin_51893107的博客
09-29 146
【web】DOM基础2
dom4j-2.1.1.jar
12-10
1. **Element**：表示XML文档中的元素，可以包含其他元素、文本、注释等。 2. **Attribute**：表示XML元素的属性。 3. **Namespace**：处理XML命名空间。 4. **Document**：整个XML文档的根对象，包含了文档的元信息...
dom4j-1.6.1
07-10
- 解析XML文件：使用`DocumentReader`或`SAXReader`读取XML文件并构建DOM4J树形结构。 - 遍历XML：利用`Node`接口的方法如`childNodes()`，`elements()`遍历XML结构。 - XPath查询：通过`XPathExpression`执行...
prismic-element:将Prismic.io片段渲染为DOM元素
05-28
棱柱形元素 模拟除了它呈现真实的DOM节点而不仅仅是HTML字符串。 笔记： 需要Prismic.io API的版本2和兼容JavaScript库 。 用法 ... ... document . body . appendChild ( asElement ( doc . data
dom4j-1.6.1.zip
03-14
- **Web服务**：在SOAP（Simple Object Access Protocol）类型的Web服务中，XML被用作消息载体。DOM4J可以解析和生成SOAP消息，简化Web服务的开发。 - **XML文档的读写**：DOM4J可以方便地读取XML文件，进行处理...
vue pc端换肤功能
渐离的博客
04-24 955
1.在点击更换主题页面得地方 使用setAttribute设置自定义属性 并把变量存起来 handleChangeTheme(theme) { window.document.documentElement.setAttribute('data-theme', theme) localStorage.setItem("theme", ...
document（/setattribute）.GetElementById is not a function
weixin_40486955的博客
04-05 2441
报错 document（/setattribute）.GetElementById is not a function 产生原因： js是严格区分大小写的 解决方法 严格按照方法名称书写：GetElementById 修改为getElementById setattribute修改为setAttribute ...
两种最简单的方式教会你如何实现前端一件换肤！
最新发布
qq_44647871的博客
03-26 1849
今天我教大家用两种最简单的方式实现前端一键换肤的功能，都是给予原生 css 和 js 的方法属性，不用安装任何的第三方库。听我娓娓道来
HTML DOM setAttribute()、与createAttribute()
weixin_30410119的博客
01-30 401
setAttribute()、与createAttribute() 都可以动态的为DOM 添加属性；但是用法却不一样； 1、setAttribute() setAttribute() 直接在DOM节点上添加属性： 语法： element.setAttribute(attributename,attributevalue) 例子： <p > &lt...
vue+scss实现一键全局换肤功能
fuhegegnw的博客
08-25 2724
vue+scss实现一键全局换肤功能 需求：实现点击按钮，项目全局换肤 思路： 利用window.document.documentElement.setAttribute('data-theme', 'dark')设置html的attribute属性 利用scss的混入@mixin定义不同主题的样式表，然后在需要的文件中使用@include加载定义的样式 实现步骤： 在App.vue中获取当前的主题，并且设置html的attribute ，当没有设置主题时默认设置一个主题，我这里是设置为dark
【JavaScript】——DOM操作中appendChild()、createElement()、createTextNode()、setAttribute()、getAttribute()用法
qq_50497708的博客
11-21 1467
【JavaScript】——DOM操作中appendChild()、createElement()、createTextNode()、setAttribute()、getAttribute()用法
网页点击切换黑白昼夜模式
qq_15369533的博客
09-10 569
点击后会在body加一个class属性 自己写css代码就行了。网页点击切换黑白昼夜模式 并且刷新也不会恢复到初始模式。
Document类型、Element类型和Text类型的常用方法和属性
qq_50748038的博客
08-24 1728
节点类型：Document类型、Element类型和Text类型的常用方法和属性
Theme层代码实现
wdadwa565的博客
07-18 546
Theme层代码实现 只要全局加上一个属性选择器，就搞定了~~~ 做成属性选择器 html的代码 <div data-theme="default"> css的代码 [data-theme= 'default' ] .box {background:pink; } [data-theme= "cool'] .box{background: blue; } [data-theme= 'warm'] .box{background: yellow;} 如何对全局页面产生影响 提升到全局 1，将da
深入理解JAVA_XML-DOM节点结构详解
DOM（Document Object Model）是Java处理XML文档的标准方式，它将XML文件转换为一个树状结构，使得程序能够以对象的方式操作XML内容。在DOM中，XML文档被抽象成一系列节点（nodes），每个节点代表XML文档的一个基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值