JS DOM节点操作详解，前端开发自学

于 2024-03-21 06:13:43 发布
阅读量572 收藏 28
点赞数 30
分类专栏： 2024年程序员面试 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63102527/article/details/136894395
版权
本文详细介绍了JavaScript中DOM节点的操作，包括通过层级关系和父子兄节点获取元素，节点的基本属性，以及在实际开发中如何获取父级、子级、第一个和最后一个元素节点。文章还探讨了在不同浏览器中兼容性问题的解决方案，并分享了前端面试和学习心得。
摘要由CSDN通过智能技术生成

所以这样获取元素带来的逻辑性不强，只要用到都要获取。

2.利用层级关系获取元素

当我们从节点层次考虑时，获取上面的li就非常简单了，因为li是ul的孩子，我们可以通过层级关系直接拿到他，非常的方便

1.利用父子兄节点关系获取元素

2.逻辑性强，但是兼容性差

二、节点概述💨

=======================================================================

网页中的所有内容都是节点(标签、属性、文本、注释等），在DOM中，节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。

DOM树：

在这里插入图片描述

在这里插入图片描述

这些li都是标签都属于元素节点

值得注意的是：

在这里插入图片描述

这里选中的空格属于文本节点

一般地，节点至少拥有nodeType(节点类型）、nodeName(节点名称)、和nodeValue(节点值)这三个基本属性`

最低0.47元/天 解锁文章
m0_63102527
关注
  • 30
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js实战之使用 jsdom
蛐蛐的博客
10-05 1985
jsdom 是许多 web 标准的纯 JavaScript 实现，特别是 WHATWG DOM和HTML标准。该项目的目标是模拟足够多的 Web 浏览器子集，以用于测试和抓取真实世界的 Web 应用程序。最新版本的 jsdom 需要 Node.js v14 或更高版本。
使用 jsdom 模块在 Node.js 中模拟 DOM 环境
初学者的专栏
05-27 1404
在这个例子中，我们首先引入了 `jsdom` 模块，并从中导入 `JSDOM` 类。在这个例子中，我们使用 `querySelector` 方法选择了第一个 `<p>` 元素，并输出了其文本内容。`jsdom` 是一个用于在 Node.js 中模拟 DOM 环境的库，它可以让你在 Node.js 中使用类似于浏览器中的 DOM API。// 输出 "Hello world"通过使用 `jsdom` 模块，我们可以在 Node.js 中模拟浏览器环境，从而使我们能够使用 DOM API 进行操作。
nodejs jsdom 模拟浏览器，执行DOM环境 js 文件
Rao的博客
06-09 1471
JsDOM 爬虫破解 js 代码
Node.js中操作DOM - jsdom
hbcui1984的专栏
12-10 5448
> jsdom可以在node.js库中，使用类似dom原生API的方式，操作html内容。 官网：https://github.com/jsdom/jsdom 安装： ``` npm i jsdom ``` 使用示例： ``` const jsdom = require("jsdom"); const { JSDOM } = jsdom; const dom = new JSDOM(`<html><head></head><body>&lt...
Node.js操作Dom ，轻松hold住简单爬虫
qq_45472813的博客
01-03 1674
前段时间，我发现一个开源题库，题目非常有意思。我想把它整成一个JSON文件做为数据储备，方便整活。一共有一百五十多道题目，手动CV我肯定是不想干的。于是写了个脚本，在写脚本的过程中，我发现一个能让Node.js操作Dom的开源项目。有了它，再加上jQuery就可以应对简单爬虫抓取数据了，所以写下这篇文章跟大家分享下。
JS访问DOM节点方法详解
10-21
JavaScript通过DOM为我们提供了一套丰富的API来操作DOM节点，使得我们能够动态地读取、修改网页内容。在深入理解这些基础知识之后，我们还可以通过学习相关的操作技巧、传值技巧、编码技巧、JSON操作、动画特效、...
JS实现的DOM插入节点操作示例
11-28
`insertBefore()`方法是JavaScript DOM中的一个重要函数，它允许我们在已有子节点的前面插入一个新的子节点。方法的基本语法如下： ```javascript node.insertBefore(newNode, refNode); ``` - `newNode`：表示要...
JavaScript DOM节点操作方法总结
10-21
本文将总结介绍JavaScript中有关DOM节点操作的主要方法。 首先，DOM节点主要分为三种类型：元素节点、属性节点和文本节点。元素节点对应HTML中的标签，属性节点对应标签中的属性，而文本节点包含标签之间的文本信息...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
JavaScript是一种基于对象和事件驱动的脚本语言，其在Web开发中扮演着核心角色，特别是在处理DOM（文档对象模型）时。DOM是一个跨平台和语言独立的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。在...
NodeJS使用jQuery选择器操作DOM
10-24
主要介绍了NodeJS使用jQuery选择器操作DOM的相关资料,需要的朋友可以参考下
global-jsdom:在Node.js中启用DOM
04-28
全局jsdom 在Node.js中启用DOM global-jsdom将document ， window和其他DOM API注入到您的Node.js环境中。 这使您可以在Node.js中运行浏览器测试。 在global设置的特定属性直接来自您已安装的jsdom版本。 安装 要求> = 12且 > = 10或以上 npm install --save-dev --save-exact jsdom global-jsdom 用法 只需调用它即可将Node.js环境转变为DOM环境。 // commonjs require ( 'global-jsdom/register' ) // or es2015 import 'global-jsdom/register' // you can now use the DOM document . body . innerHTML = 'hello
Node.JS实战28：在Node中使用DOM。
w2sft的博客
01-17 1176
无需质疑，使用JQuery进行DOM操作是相当便利的。 知道吗，在NodeJS中，也有方法能很方便的操作DOM： cheerio cheerio是一个NodeJS的三方库，可以方便的把它理解为一个NodeJS的jquery，使用方式和jquery基本相同。 由于是三方库，并不是内置于NodeJS，所以，使用前需要安装它： npm i cheerio 上例程： var chee...
Node.js笔记（十）Nodejs与DOM操作
热门推荐
空気力学少女の诗
07-28 1万+
前后端分离喊了不少时间了，大家的理解和实践也是五花八门， Nodejs作为后端语言，直接进行DOM操作是违背分离原则的。 但如果是个人的小网站，稍微灵活一点也没有坏处不是。 这里介绍的是cheerio这个插件，是基于jquery实现并稍有精简，目的是为nodejs提供像jquery一样的dom操作 ps：本来jsdom也是一种选择，但可惜最新版本的jsdom不再支持nodejs下面看一个例子
nodejs服务端使用jquery操作Dom
weixin_34233679的博客
07-24 239
添加模块:     npm install jquery@3.2.1   npm install jsdom 引入模块:     var jsdom = require("jsdom");   var window = jsdom.jsdom().defaultView; ...
js dom-node方法
weixin_43294560的博客
11-25 316
.appendChild(节点) 插入节点作为最后一个子节点 .hasChildNodes() 返回一个布尔值，表示当前节点是否有子节点,空文本等也算子节点 .cloneNode(布尔值) 返回被克隆的节点，false只复制当前节点，true复制当前节点和其内的所有节点 .insertBefore() 父节点.insertBefore(待插入节点,父节点的子节点); 第一个参数...
nodejs之jsdom插件，运行浏览器环境
最新发布
局外人LZ的博客
10-08 1908
【代码】nodejs之jsdom插件，运行浏览器环境。
JS之DOM操作--node简介、node属性、node方法
小白小白从不日别的博客
04-13 1068
主要介绍了js中node节点的常用属性和相关方法
Nodejs 学习笔记 - 借助 JSDOM 使用 jQuery
灵台方寸山斜月三星洞
09-30 636
引用 jquery 因为node里没有浏览器的window 对象。所以得曲线救国。可以通过 jsdom 来模拟。 关键代码如下： const { JSDOM } = require( "jsdom" ); const { window } = new JSDOM( "" ); const $ = require( "jquery" )( window ); // 这样 jquery 就到手了。 读取本地html文件试试 const { JSDOM } = require( "jsdom" ); const
JavaScript节点类型详解与DOM节点分类
为了深入学习JavaScript和前端开发，推荐的书籍如《Web前端开发精品课》和《JavaScript基础教程》提供了系统的知识讲解和实战案例，帮助读者理解并掌握JavaScript的核心语法和DOM操作。这些书籍通过通俗易懂的语言和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值