JS NodeType document getElementById tagName ClassName querySelector

原创 已于 2022-07-27 00:14:12 修改 · 120 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2022-07-26 19:28:42 首次发布
本文讨论如何在同页中确保唯一ID，并深入解析getElementById、getElementsByTagName、getElementsByClassName和querySelector及其querySelectorAll的用法，针对前端开发者提供实践指导。

 

 

 document

 

 

 getElementById tagName ClassName querySelector

 

 

 

 同个页面不要出现相同的id

 

 

 

 getElementsByTagName

 

 

 

 

 

 getElementsByClassName

 querySelector ˈkwɪəri

 

 

 

 querySelectorAll

 

 

 

 

 

 

 

JavaScript（四）（DOM/Node/NodeList/Document/Element）
qq_43456781的博客
07-22 1171
JavaScript（四）（DOM） 文章目录JavaScript（四）（DOM）六、DOM33. DOM 概述33.1 DOM33.2 节点33.3 节点树（Document只有两个子节点doctype/html根节点）34. Node 接口34.1 属性34.1.1 Node.prototype.nodeType34.1.2 Node.prototype.nodeName34.1.3 Node.prototype.nodeValue34.1.4 Node.prototype.textContent34.
JavaScript中的DOM
小罗的博客
07-31 1040
文档对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。可以将页面所有内容表示为可以修改的对象浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作；于是浏览器讲文明编写在HTML中的每个元素(Element)都抽象成了一个个对象所有这些对都可以通过JavaScript来对其进行访问，那么我们就可以通过JavaScript来操作页面。...
JS-10 DOM Tree、document对象、Node节点的导航、表格元素的导航、DOM获取元素、nodeType、nodeName、tagName、innerHTML、textContent
qq_54075517的博客
06-06 600
DOM Tree、document对象、Node节点的导航、表格元素的导航、DOM获取元素、nodeType、nodeName、tagName、innerHTML、textContent、nodeValue
JavaScript总结【10】Document
无名小小卒的博客
11-16 2238
DOM节点类 搜索文档 节点属性 nodetype nodeName 和 tagName innerHTML outerHTML nodeValue/data textContent hidden 其他属性 修改文档 样式和类 className 、 classList 和 style 计算样式 元素大小和滚动 几何 offsetParent、offsetLeft、offsetTop（只读） offsetWidth、offsetHeight（只读） clientTop、clientLeft、clientWi
JavaScript 学习笔记 ——document
我有两颗糖
02-20 6131
1. 浏览器环境 JavaScript 语言最初是为 Web 浏览器创建的。此后，它已经发展成为一种具有多种用途和平台的语言。 下面是 JavaScript 在浏览器中运行时的鸟瞰示意图： windows 是根对象，它充当 JavaScript 的全局对象以及代表着浏览器窗口，提供控制浏览器窗口的方法。 1.1 DOM 文档对象模型 DOM 将所有页面内容表示为可以修改的对象，document 是页面的入口，可以利用它修改创建 HTML 的内容，可以参考 DOM： document.bodyDOM.st
个人学习笔记——Javascript基础学习---DOM基础（阶段总结）
m0_59684224的博客
04-01 649
DOM核心内容（基础部分） DOM的阶段性学习，比js基础要好玩，通过接口可以操作网页元素，展现效果
javascript二——节点操作
0 error(s), 0 warning(s)
03-24 2306
文章目录节点操作父节点操作子节点操作兄弟节点创建节点添加节点留言板案例删除节点删除留言复制节点动态生成表格案例三种动态创建元素的区别DOM核心重点创建增删改查属性操作事件操作 节点操作 获取元素的两种方式： 利用DOM提供的方法获取元素 document.getElementById() document.getElementByTagName() document.querySelector 等 逻辑性不强，繁琐 利用节点的层级关系获取元素 利用父子兄弟节点关系获取元素 逻辑性强，但是兼容性
JS学习笔记之DOM 4.22
qq_36450483的博客
04-26 640
JS学习笔记之DOM API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。 MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API 2 DOM
Javascript元素相关
ylovd的博客
02-23 891
JavaScript元素相关 获取元素 根据标签id document.getElementById(); 根据标签名 document.getElementByTagName(); 返回的是获取过来的元素对象集合，以伪数组的形式存储，可以采取遍历的方式来获取伪元素中的对象，得到的元素对象是动态的 还可以获取父元素内部所有指定标签名的子元素 父元素必须是单个对象，获取时不包括父元素自己 html5新增 获取元素 根据类名获取 document.getElementByClassName(); 根据选择器 d
JS第二天
I_love_bc的博客
04-03 315
JS核心第二天 一.节点操作 1.如何获取节点 获取元素通常使用两种方式: 1.利用DOM提供的方法获取元素 ●document.getElementByld( ●document.getElementsByTagName ●document.querySelector等 缺点： 逻辑性不强、繁琐 2.利用节点层级关系获取元素 ●利用父子兄节点关系获取元素 ●逻辑性强,但是兼容性稍差 2.什么是节点 网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。 HTML
JavaScript DOM学习笔记
weixin_48755310的博客
05-17 195
JavaScript DOM 1. DOM简介 1.1 什么是DOM 文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 1.2 DOM树 文档：一个页面就是一个文档，DOM中使用document表示。 元素：页面中所有标签都是元素，DOM中使用element表示。 节点：网页中所有内.
JavaScript：DOM操作与事件处理
07-14
console.log(node.tagName); } node = node.firstChild; while (node) { traverseDOM(node); node = node.nextSibling; } } traverseDOM(document.documentElement); ``` #### 二、DOM树的结构 DOM树是...
我还没照着你说的改，你先看下我的js关联的代码后再决定(function() { var textNodes = []; var fullText = ''; // 递归遍历DOM树，收集文本节点 function traverse(node) { if (node.nodeType === Node.TEXT_NODE) { var text = node.textContent; // 先不 trim，查看原始文本 console.log('发现文本节点:', text); console.log('文本长度:', text.length); if (text.length > 0) { // 记录文本内容和在完整文本中的起始索引 textNodes.push({ text: text, start: fullText.length }); fullText += text; console.log('已收集文本，当前总长度:', fullText.length); } } else if (node.nodeType === Node.ELEMENT_NODE) { var tag = node.tagName.toLowerCase(); console.log('遍历元素节点:', tag); // 跳过脚本、样式等非内容节点 if (tag !== 'script' && tag !== 'style' && tag !== 'noscript') { for (var i = 0; i < node.childNodes.length; i++) { traverse(node.childNodes[i]); } } } } // 修改容器选择逻辑 var container = document.getElementById('content') || document.querySelector('.content') || document.body; console.log('使用的容器:', container); // 添加这行来实际遍历容器 traverse(container); // 处理iframe中的文本（同域） var iframes = document.getElementsByTagName('iframe'); for (var i = 0; i < iframes.length; i++) { try { var iframeDoc = iframes[i].contentDocument || iframes[i].contentWindow.document; traverse(iframeDoc.body); console.log('iframe处理完成'); } catch (e) { console.log("跨域iframe，无法访问内容：" + e.message); } } // 在函数末尾添加调试信息 console.log('文本收集完成，总文本长度:', fullText.length); console.log('收集到的文本节点数:', textNodes.length); // 将结果传递给Android - 也应该添加错误处理 try { // 将结果传递给Android if (window.TextNodeInterface) { window.TextNodeInterface.onTextNodesCollected(fullText, JSON.stringify(textNodes)); console.log('文本节点收集完成'); } else { console.error("未找到TextNodeInterface接口"); } } catch(e) { console.error('传递数据到Android出错:', e); } })();
10-10
你提供的这段 **JavaScript 代码** 是运行在 `WebView` 中，用于收集页面中的所有文本节点，并将它们拼接成一个完整的字符串（`fullText`），同时记录每个文本节点的起始位置。最后通过 `window.TextNodeInterface....
NW.js 多进程架构深度解析：进程模型、通信机制与实战应用
m0_66117560的博客
11-19 464
本文深入探讨了NW.js的多进程开发架构。文章首先解析了NW.js独特的进程模型，包含三种主要进程类型：主进程（Browser Process）、渲染进程和Node.js子进程。主进程作为应用核心，负责窗口管理、生命周期控制和进程协调。通过详细的代码示例，文章展示了如何使用Node.js的child_process模块创建和管理计算密集型工作进程、外部工具进程等子进程，包括进程通信、状态监控和终止处理。文章为开发者提供了在NW.js应用中实现高效多进程管理的实践指南。
SSM企业物资管理系统h3109(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上，文末可获取，系统界面在最后面
2509_93102542的博客
11-21 469
在技术实现上，国外多采用成熟的开发框架和技术架构，注重系统的安全性、稳定性和可扩展性，同时积极融入大数据、人工智能等新技术，实现物资需求预测、智能库存优化等功能。基于此，开发一套基于SSM框架的企业物资管理系统，整合部门、员工、物资及各类业务流程管理功能，实现物资管理的数字化、规范化和高效化，成为解决企业物资管理痛点的必然需求。本课题旨在开发一套基于SSM框架的企业物资管理系统，围绕部门、员工、物资信息、物资申请、消息提醒、物资归还、物资入库、意见反馈八大核心功能模块，实现企业物资管理的全流程数字化。
Vue3的生命周期
最新发布
分享学习网络的点点滴滴
11-21 98
Vue3生命周期详解：从创建到卸载的全过程 Vue3的生命周期分为四个主要阶段：创建、更新、卸载和错误处理。创建阶段包含setup()、onBeforeMount()和onMounted()；更新阶段有onBeforeUpdate()和onUpdated()；卸载阶段包括onBeforeUnmount()和onUnmounted()。setup()替代了Vue2的初始化阶段，是组合式API的入口。子组件的生命周期会先于父组件执行。错误处理可使用onErrorCaptured()捕获和阻止错误传播。这些钩子函
Vue3 watch 核心总结
dlmyrt的博客
11-20 501
watch是 Vue3 组合式 API 提供的，作用是，当数据发生变化时，自动执行预设的回调逻辑（如异步请求、数据联动、副作用处理等）。vuewatch。
JavaScript案例
2509_93942579的博客
11-21 265
这段代码遍历用户数组，为每个用户创建li元素，并添加到ul列表中。经常遇到动态添加的元素无法绑定事件的问题，比如一个任务列表，每个任务项有个删除按钮。如果给每个按钮单独绑事件，新加的按钮就没反应。这时事件委托就派上用场了，我们把事件绑在父容器上，通过事件冒泡来管理。这些案例都是我在项目中踩过坑后总结的，可能不是最优解，但实测有效。这个debounce函数返回一个新函数，在delay毫秒内如果重复调用，会清除之前的定时器，重新计时。这样只有用户停止输入300毫秒后，才会触发搜索操作，有效减少不必要的请求。
Vue3 中 ECharts Tooltip 无法显示？问题根源与解决方案
weixin_41940856的博客
11-21 287
Vue3 中 ECharts Tooltip 无法显示的核心问题是使用ref深度代理 ECharts 实例，导致其内部事件机制失效。通过将ref替换为shallowRef，既能保持实例的响应式引用，又不会破坏其内部结构，是最简单高效的解决方案。在 Vue3 中集成第三方库时，需注意响应式 API 的选择：复杂实例用shallowRef，普通数据对象用refreactive，避免因响应式代理引发的隐性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值