HTML DOM 笔记

整个文档是一个文档节点。
每个 HTML 标签是一个元素节点。
HTML 元素中包含的文本是文本节点。
注释是注释节点。



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

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

一、综合实战—使用极轴追踪方式绘制信号灯 实战目标:利用对象捕捉追踪和极轴追踪功能创建信号灯图形 技术要点:结合两种追踪方式实现精确绘图,适用于工程制图中需要精确定位的场景 1. 切换至AutoCAD 操作步骤: 启动AutoCAD 2016软件 打开随书光盘中的素材文件 确认工作空间为"草图与注释"模式 2. 绘图设置 1)草图设置对话框 打开方式:通过"工具→绘图设置"菜单命令 功能定位:该对话框包含捕捉、追踪等核心绘图辅助功能设置 2)对象捕捉设置 关键配置: 启用对象捕捉(F3快捷键) 启用对象捕捉追踪(F11快捷键) 勾选端点、中心、圆心、象限点等常用捕捉模式 追踪原理:命令执行时悬停光标可显示追踪矢量,再次悬停可停止追踪 3)极轴追踪设置 参数设置: 启用极轴追踪功能 设置角度增量为45度 确认后退出对话框 3. 绘制信号灯 1)绘制圆形 执行命令:"绘图→圆→圆心、半径"命令 绘制过程: 使用对象捕捉追踪定位矩形中心作为圆心 输入半径值30并按Enter确认 通过象限点捕捉确保圆形位置准确 2)绘制直线 操作要点: 选择"绘图→直线"命令 捕捉矩形上边中点作为起点 捕捉圆的上象限点作为终点 按Enter结束当前直线命令 重复技巧: 按Enter可重复最近使用的直线命令 通过圆心捕捉和极轴追踪绘制放射状直线 最终形成完整的信号灯指示图案 3)完成绘制 验证要点: 检查所有直线是否准确连接圆心和象限点 确认极轴追踪的45度增量是否体现 保存绘图文件(快捷键Ctrl+S)
### 关于 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、付费专栏及课程。

余额充值