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

最新推荐文章于 2022-11-21 10:00:08 发布
VIP文章 最新推荐文章于 2022-11-21 10:00:08 发布
阅读量912 收藏 4
点赞数
分类专栏： 你不知道的javaScript 文章标签： js node dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haofandedaima/article/details/108845739
版权

文章目录

前言

       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跨域的一个解决办法。这里我们不细谈这个问题，感兴趣的同学可以关注我后面的文章࿰
最低0.47元/天 解锁文章
祯民
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
prismic-element:将Prismic.io片段渲染为DOM元素
05-28
棱柱形元素 模拟除了它呈现真实的DOM节点而不仅仅是HTML字符串。 笔记： 需要Prismic.io API的版本2和兼容JavaScript库 。 用法 将富文本对象传递给该函数，然后返回HTML元素。 const Prismic = require ( 'prismic-javascript' ) const asElement = require ( 'prismic-element' ) Prismic . api ( 'https://<YOUR>.cdn.prismic.io/api' ) . then ( api => { api . getSingle ( 'my-page' ) . then ( doc => { document . body . appendChild ( asElement ( doc . data
dom4j-1.6.1.jar
08-23
import org.dom4j.Document; import org.dom4j.DocumentHelper; import org.dom4j.Element; import org.dom4j.io.XMLWriter; import java.io.*; public class XmlDom4J{ public void generateDocument(){ Document ...
document操作标签对象的其他方法
family_love_1998的博客
05-05 655
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document操作标签对象的其他方法</title> <script> /** * 文档对象：document * 和添加元素对象相关的方法 * ...
纯css主题切换，简单易懂 document.documentElement.setAttribute(‘data-theme‘, ‘light‘)；
Li_Ning21的博客
07-01 1921
纯css主题切换，贼简单
前端夜间模式（换肤）方案
薛定谔的猫-前端领域
06-11 2992
对于上面提到的实现方案，均不涉及持久化，可将对应的模式保存到本地缓存（localStorage）里，然后每次渲染读取缓存的模式值进行渲染，并且切换的时候修改缓存中的模式即可。
JavaScript中setAttribute用法详解
热门推荐
知足happiness的博客
08-29 2万+
setAttribute基本用法 element.setAttribute(attributename,attributevalue) setAttribute() 方法添加指定的属性，并为其赋指定的值,看到w3c的例子 document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); 我们经常
JS：document 和 element 浅谈
谢谢๑‾᷅^‾᷅๑的博客
12-21 3173
一、简介 DOM 对象：DOM（DOM—Document Object Model）是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。 打开网页后，首先看到的是浏览器窗口，即顶层的window对象，而网页内容就是document对象，其中document是window的一个对象属性，所以document可全局访问。DOM对象共有7种，这里浅谈下其中的HTML D...
document（/setattribute）.GetElementById is not a function
weixin_40486955的博客
04-05 2335
报错 document（/setattribute）.GetElementById is not a function 产生原因： js是严格区分大小写的 解决方法 严格按照方法名称书写：GetElementById 修改为getElementById setattribute修改为setAttribute ...
vue pc端换肤功能
渐离的博客
04-24 888
1.在点击更换主题页面得地方 使用setAttribute设置自定义属性 并把变量存起来 handleChangeTheme(theme) { window.document.documentElement.setAttribute('data-theme', theme) localStorage.setItem("theme", ...
HTML DOM setAttribute()、与createAttribute()
weixin_30410119的博客
01-30 372
setAttribute()、与createAttribute() 都可以动态的为DOM 添加属性；但是用法却不一样； 1、setAttribute() setAttribute() 直接在DOM节点上添加属性： 语法： element.setAttribute(attributename,attributevalue) 例子： <p > &lt...
【JavaScript】——DOM操作中appendChild()、createElement()、createTextNode()、setAttribute()、getAttribute()用法
qq_50497708的博客
11-21 1267
【JavaScript】——DOM操作中appendChild()、createElement()、createTextNode()、setAttribute()、getAttribute()用法
DOM-element-selector
05-31
Dom 元素选择器 介绍 任务是创建一个 JavaScript 选择引擎，即一个 JavaScript 函数，它将返回给定 CSS 选择器的 DOM 元素。 测试包含 3 个文件 Test.html 包含将在您的函数上测试的 HTML Test.js 包含一个函数，该...
dom-element-loader:将HTML加载为Webpack 4+的DOM elementnode的最简单方法
05-18
DOM元素加载器 将Web加载为Webpack 4+的DOM元素/节点的最简单方法。 用法 import ui from './templates/ui....npm install --save dom-element-loader module . exports = { //.. module : { //.. loaders :
dom-element-path:获取指定元素的唯一dom元素路径
03-14
安装npm： npm install dom-element-path纱： yarn add dom-element-path用法import domElementPath from 'dom-element-path' ;const body = domElementPath ( document . body ) ;console . log ( body ) ; 输出： ...
javascript技巧之——document.createElement()的用法
lifushan123的专栏
01-05 2443
document_createElement_x_x()的用法       分析代码时，发现自己的盲点——document_createElement_x_x()，冲浪一番，总结了点经验。         document_createElement_x_x()是在对象中创建一个对象，要与a() 或 insertBefore()方法联合使用。其中，a() 方法在节点的子节点列表末添加新
JavaScript DOM页面元素操作
404-NotFound的博客
09-09 377
DOM 页面元素操作 DOM（document object model） 概念： 文档：document，一个页面就是一个文档。也是页面的对象 节点：页面的所有内容。包括元素节点、文本节点、属性节点、（文档节点、注释节点） 元素：页面的所有标签。 DOM的初步认识 获取元素节点5种方式 1。通过 ID .getElementById直接设置属性 ...
DOM（二）修改元素内容、属性
商务合作 | 共同学习 | 携手共进
09-22 2万+
JavaScript DOM：修改内容、修改属性，手风琴案例。
在ASP.NET中实现多文件上传（以及添加节点的问题）（setAttribute()）
疾风劲草
10-19 1036
我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现，这就涉及到了浏览器的兼容性问题。 setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个
vue+scss实现一键全局换肤功能
fuhegegnw的博客
08-25 2630
vue+scss实现一键全局换肤功能 需求：实现点击按钮，项目全局换肤 思路： 利用window.document.documentElement.setAttribute('data-theme', 'dark')设置html的attribute属性 利用scss的混入@mixin定义不同主题的样式表，然后在需要的文件中使用@include加载定义的样式 实现步骤： 在App.vue中获取当前的主题，并且设置html的attribute ，当没有设置主题时默认设置一个主题，我这里是设置为dark
dom-to-image 怎么实现
最新发布
05-19
dom-to-image 是一个 JavaScript 库，可以将任意 DOM 元素转换为图片格式。 具体实现步骤如下： 1. 引入 dom-to-image 库 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script> ``` 2. 获取需要转换为图片的 DOM 元素 ```javascript const element = document.getElementById('my-element'); ``` 3. 调用 dom-to-image 库的 toPng 或 toJpeg 方法将 DOM 元素转换为 PNG 或 JPEG 格式的图片 ```javascript domToImage.toPng(element) .then(function (dataUrl) { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch(function (error) { console.error('转换失败:', error); }); ``` 注意：如果需要将图片保存到本地，可以使用 a 标签的 download 属性或者 FileSaver.js 等库。 ```javascript // 使用 a 标签的 download 属性 const link = document.createElement('a'); link.download = 'image.png'; link.href = dataUrl; link.click(); // 使用 FileSaver.js saveAs(dataUrl, 'image.png'); ``` 以上就是使用 dom-to-image 库将 DOM 元素转换为图片的基本实现方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值