HTML DOM 笔记

最新推荐文章于 2025-07-27 18:06:30 发布
最新推荐文章于 2025-07-27 18:06:30 发布
阅读量93 收藏
点赞数
分类专栏： ML & Script & Style & Other... 文章标签： HTML
整个文档是一个文档节点。
每个 HTML 标签是一个元素节点。
HTML 元素中包含的文本是文本节点。
注释是注释节点。



访问节点：
getElementById()
getElementsByTagName()
parentNode， firstChild， 和 lastChild 属性
document.documentElement 返回文档根节点
document.body 直接访问 <body> 标签

节点信息：
nodeName 可以是一个元素节点的标签名称， 一个属性节点的属性名称， 文本节点为 #text， 文档节点为 #document
nodeValue 可以是一个文本节点中包含的文本， 一个属性节点的属性值， 不可用与文档和元素节点
nodeType 节点类型
Element typeNodeType
Element1
Attribute2
Text3
Comment8
Document9

JavaScript HTML DOM学习笔记.emmx
02-11
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
DOM笔记网络版.pdf
07-21
由于提供的文件标题“DOM笔记网络版.pdf”和描述“DOM笔记网络版.pdf”无法提供足够信息用于生成详细的知识点，因此我将基于Web开发领域中常见的DOM（文档对象模型）概念，提供相关的知识点，以满足要求。...
HTML DOM笔记
技术交流
11-19 422
HTML DOM笔记 什么是Dom? 　　通过Javascript, 您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，Javascript 就需要获得HTML文档中所有元素进行访问的入口，这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得（DOM）。 　　在1998年,W3C发布了一级
DOM笔记
尽力而为
12-18 794
我所学习的这部分DOM知识是关于HTML的。
JSDOM笔记总结
aurora
04-27 463
JSDOM对象讲解1.讲解document对象1.1DOM的含义1.2学习JS DOM中 1.讲解document对象 本章节讲的是document DOM对象： 首先来了解下什么是document以及DOM： Attention： 首先来说一下这个document对象（通俗讲就是窗口文档对象），一个html文档就是一个窗口文档对象 document属于window对象下的一个子对象，所以你会发现使用DOM时，基本上不需要使用window.document 1.1DOM的含义 DOM(documen
WebAPI_DOM笔记
2301_80156123的博客
01-25 1131
wep_api学习笔记
HTML DOM学习笔记
Saurfang
07-27 464
  DOM 是Document Object Model( 文档对象模型 )的缩写。  DOM是把html里面的各种数据当作对象进行操作的一种思路。 (面向对象的角度看html的标签) 节点概念 DOM把所有的html都转换为节点 整个文档 是一个节点 元素 是节点 元素属性 是节点 元素内容 是节点 注释 也是节点    获取节点 document.getElementById ...
JavaScript HTML DOM 学习笔记
weixin_51302779的博客
12-12 552
JavaScript HTMLDOM学习笔记，随手一记
HTML CSS整理笔记
热门推荐
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
前端笔记 之 HTML DOM
NONhappiness的博客
03-12 181
DOM是W3C的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。核心DOMXML DOMHTML DOM：(HTML的标准对象模型，HTML的标准编程接口，W3C标准)，是关于如何获取、修改、添加或删除HTML元素的标准。...
DOM学习笔记
weixin_51010474的博客
04-18 1246
定义一、获取元素1、根据ID获取2、根据标签名获取 3、H5新增方法获取——均是以伪数组的形式返回（1）根据类名获取某些元素的集合（2）返回指定选择器的第一个元素对象（3）返回指定选择器的所有元素对象集合4、获取某些特殊元素（body、html）二、事件1、定义2、事件三要素三、操作元素1、改变元素内容2、改变元素属性（1）获取属性值（2）改变元素属性值（3）移除元素属性值3、改变表单元素4、修改样式属性5、排他思想：首先先排除其他人 然后再设置自己的样式6、H5新增的自定义属性
个人笔记HTML5
weixin_73886232的博客
07-27 1016
HTML5成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构W3C标准包括化标准语言(XHTML、XML)标准语言(CSS)标准(DOM、ECMAScript)
dom笔记1
08-08
在"DOM笔记1"中，我们主要探讨了与CSS相关的DOM操作以及一些实际应用案例。 首先，我们要理解DOM中的三种基本节点类型：Element节点，Text节点和Comment节点。Element节点代表HTML元素，如`<div>`或`<p>`；Text节点...
javascript DOM笔记 1
08-08
JavaScript DOM（Document Object Model）是用于操作HTML和XML文档的标准接口。它允许程序和脚本动态更新、添加或删除页面中的元素和属性。在本文中，我们将深入探讨一些关键的DOM操作，特别是与获取和操作元素及...
js DOM的学习笔记
12-09
JavaScript DOM（文档对象模型）是Web开发中一个关键的概念，它允许我们使用JavaScript来操作HTML或XML文档的结构、内容和样式。DOM将HTML页面解析为一个由节点组成的树形结构，每个HTML元素都是树中的一个节点，...
随机阻塞下毫米波通信的多波束功率分配”.zip
08-12
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于分时电价与改进粒子群算法的电动汽车充放电优化调度策略研究
08-12
内容概要：本文探讨了基于分时电价和改进粒子群算法的电动汽车充放电优化调度策略。首先介绍了分时电价制度及其对电动汽车充放电的影响，随后详细解释了改进粒子群算法的工作原理以及如何应用于电动汽车的充放电调度。文中还提供了具体的Python代码实现，展示了如何通过定义电价信息、电池容量等参数并应用改进粒子群算法来找到最优的充电时间点。最后，文章总结了该方法的优势，并展望了未来的研究方向，如与智能电网和V2G技术的结合。 适合人群：对电动汽车充放电调度感兴趣的科研人员和技术开发者。 使用场景及目标：适用于希望优化电动汽车充放电策略以降低成本、提高电力系统效率的人群。主要目标是在不同电价时段内，通过智能调度实现最低成本或最高效率的充电。 其他说明：本文不仅提供理论分析，还有详细的代码实现，便于读者理解和实践。
步进电机脉冲精准计算方法
08-12
资源下载链接为： https://pan.quark.cn/s/d9ef5828b597 根据步进电机的步进角、脉冲总数、减速比以及丝杠导程，计算出实现直线行走距离为1mm所需的脉冲数量。
【CAD入门基础课程】3.7 综合实战-使用极轴追踪方式绘制信号灯.avi
最新发布
08-12
一、综合实战—使用极轴追踪方式绘制信号灯 实战目标：利用对象捕捉追踪和极轴追踪功能创建信号灯图形 技术要点：结合两种追踪方式实现精确绘图，适用于工程制图中需要精确定位的场景 1. 切换至AutoCAD 操作步骤： 启动AutoCAD 2016软件 打开随书光盘中的素材文件 确认工作空间为"草图与注释"模式 2. 绘图设置 1）草图设置对话框 打开方式：通过"工具→绘图设置"菜单命令 功能定位：该对话框包含捕捉、追踪等核心绘图辅助功能设置 2）对象捕捉设置 关键配置： 启用对象捕捉（F3快捷键） 启用对象捕捉追踪（F11快捷键） 勾选端点、中心、圆心、象限点等常用捕捉模式 追踪原理：命令执行时悬停光标可显示追踪矢量，再次悬停可停止追踪 3）极轴追踪设置 参数设置： 启用极轴追踪功能 设置角度增量为45度 确认后退出对话框 3. 绘制信号灯 1）绘制圆形 执行命令："绘图→圆→圆心、半径"命令 绘制过程： 使用对象捕捉追踪定位矩形中心作为圆心 输入半径值30并按Enter确认 通过象限点捕捉确保圆形位置准确 2）绘制直线 操作要点： 选择"绘图→直线"命令 捕捉矩形上边中点作为起点 捕捉圆的上象限点作为终点 按Enter结束当前直线命令 重复技巧： 按Enter可重复最近使用的直线命令 通过圆心捕捉和极轴追踪绘制放射状直线 最终形成完整的信号灯指示图案 3）完成绘制 验证要点： 检查所有直线是否准确连接圆心和象限点 确认极轴追踪的45度增量是否体现 保存绘图文件（快捷键Ctrl+S）
jsdom笔记
04-05
### 关于 JSDOM 的学习笔记 JSDOM 是一个用于在 Node.js 环境下模拟浏览器行为的库。它允许开发者创建虚拟 DOM 和执行基于 DOM 的操作，而无需实际运行在一个完整的浏览器环境中[^6]。 #### 什么是 JSDOM？ JSDOM 提供了一个轻量级的 HTML 解析器和 DOM 实现，能够解析 HTML 文档并将其转换为可编程的对象模型。这使得开发者可以在服务器端处理网页内容、测试前端代码以及构建无头浏览器环境下的自动化工具[^7]。 以下是几个常见的应用场景： - **爬虫开发**：利用 JSDOM 抓取动态加载的内容。 - **单元测试**：模拟真实的浏览器环境以测试前端逻辑。 - **HTML 渲染服务**：生成静态页面或将模板渲染成最终的 HTML 输出。 #### 安装与初始化 要开始使用 JSDOM，请先安装依赖包 `jsdom`： ```bash npm install jsdom ``` 接着可以通过以下方式引入模块并创建一个新的文档实例： ```javascript const { JSDOM } = require("jsdom"); // 创建一个简单的 HTML 字符串作为初始输入 const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`, { url: "https://example.org/", }); console.log(dom.window.document.querySelector("p").textContent); ``` 上述例子展示了如何定义基本结构并通过查询选择器访问节点[^8]。 #### 动态修改 DOM 节点 除了读取现有内容外，还可以借助 JSDOM 修改已有的 DOM 结构。比如新增子元素或者调整属性值等操作均支持标准 W3C 接口调用模式[^9]: ```javascript const { JSDOM } = require("jsdom"); let dom = new JSDOM(`<div id="container"></div>`); let containerElement = dom.window.document.getElementById('container'); if (containerElement){ let paragraphNode = dom.window.document.createElement('p'); paragraphNode.textContent = 'This is a dynamically added text.'; // 将新段落追加至容器内部 containerElement.appendChild(paragraphNode); } console.log(dom.serialize()); /* Output should be similar to: <html> <head></head> <body> <div id="container"><p>This is a dynamically added text.</p></div> </body> </html>*/ ``` 此片段说明了怎样向空白 div 中注入新的 p 标签及其文本填充过程[^10]。 #### 处理外部资源请求 当涉及到 AJAX 或者其他网络交互时需要注意，默认情况下所有的 fetch 请求会被拦截下来并不会真正发送出去除非特别配置允许联网选项[^11]。 如果想让某些特定 URL 可被正常载入，则可以自定义设置 resourceLoader 参数: ```javascript const { JSDOM } = require("jsdom"); new JSDOM( `<img src="/image.jpg">`, { resources: "usable", runScripts:"outside-only" } ).then((domInstance)=>{ console.log(domInstance.window.Image.prototype.toString()); }); ``` 这里启用了图片标签加载机制同时开启了脚本执行权限以便更贴近真实场景需求[^12]. --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值