节点的获取操作(原生JS节点的各种获取方式)

豆葛

已于 2023-01-18 17:10:28 修改

阅读量506

点赞数

文章标签： html javascript 前端

于 2023-01-18 16:50:02 首次发布

本文链接：https://blog.csdn.net/weixin_53428952/article/details/128728077

版权

节点的获取操作

获取节点

获取某一个节点下所有子一级节点[伪数组]

节点.childNodes

获取第一个儿子节点和最后一个节点

节点.firstChild
节点.lastChild

获取某节点的上一个/下一个兄弟节点

节点.previousSibling
节点.nextSibling

获取元素节点:

获取一个

document.getElementById(“#id”)

document.querySelector(‘div’) #用法同cSS选择器

获取一组

(一个或多个)[伪数组]

document.getElementsByclassName(“.类名”)

document.getElementByTagName(“标签名”)

document.querySlectorAll(‘选择器’)

进阶

儿子元素节点

获取某一节点下所有的亲儿子元素节点[伪数组]

节点.children

获取第一个/最后一个亲儿子元素节点

节点.firstElementChild
节点.lastElementChild

兄弟元素节点

获取某节点的上一个/下一个兄弟元素节点

节点.previousElementSibling
节点.nextElementSibling

父亲元素节点

节点.parentNode

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

豆葛

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

原生JS获取DOM元素节点的方法总结

traceur0529的博客

07-11

2487

前言（日常废话）本篇文章记录了本人所知道的用原生JS来获取到DOM元素节点的几种办法，做个记录，加深记忆，方便以后复习。正文本文所做演示基于下面的HTML结构：本文内容通过个人理解的分类进行归纳总结，大致的目录骨架如下：目录一、通过document顶层方法获取 1、document获取html，head，body标签 1.1、获取html标签 1.2、获取head标签 1.3、获取body标签 2、getElementBy系列获取 2.1、通过ID获取 2.2、通过类名获取 2.

JavaScript原生节点操作小结

10-20

在Web开发中，JavaScript用于操作DOM（文档对象模型）提供了丰富的API，原生节点操作是其中的基础。原生节点操作允许开发者直接对HTML文档中的元素节点进行创建、插入、删除和查询等操作。这种能力是动态网页交互...

参与评论您还未登录，请先登录后发表或查看评论

JS获取节点方法

weixin_34278190的博客

11-27

139

1. 通过顶层document节点获取：（1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看...

js获取节点

kingisking1的专栏

01-18

9495

var node=document.getElementById("??"); node.nodeName ○节点标签名如:HTML/BODY/DIV/#text(文本节点名) node.nodeType ○节点类型 1(元素结点) 3(文本结点)

IP节点详解及国内IP节点获取指南

最新发布

hgdlip的博客

12-26

593

在数字化时代，互联网已成为我们生活中不可或缺的一部分。而构成互联网基石的，正是那些隐藏在幕后的IP节点。对于许多网络用户，特别是需要进行网络运营、数据分析或网络营销的人来说，了解IP节点的概念及其获取方式至关重要。下面跟着虎观代理小二一起深入解析IP节点的含义，并重点介绍如何获取国内IP节点。

JS获取节点

weixin_33862041的博客

04-27

115

JS 的 document 内置对象　　把 html 中每个标签看成一个节点, 通过 js 将这些节点获取出来　　使用 JS 的 document 内置对象(对象有自己的属性和方法), 　　内置对象就是已经创建好的对象, 我们只需要直接使用即可方法: 　　document.getElementById("id属性") 　　　　根据元素的 id 值获取对象, 返回值是一个对象　　i...

原生js获取节点

aiding9131的博客

01-05

168

// 1 获取元素节点 // 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个) document.getElementById('div1'); // 通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素) var cls =...

JavaScript 获取元素在父节点中的下标(推荐)

10-19

在JavaScript中，获取元素在父节点中的下标是一项常见的任务，尤其在进行DOM操作和页面交互时。在jQuery中，我们可以方便地使用`$(this).index()`来获取元素在父节点同级元素中的索引位置。然而，在原生JavaScript中...

原生js实现针对Dom节点的CRUD操作示例

10-16

原生JavaScript提供了操作DOM的丰富API，允许开发者以编程方式控制网页的内容、结构和样式。本文将详细介绍原生JavaScript实现DOM节点CRUD操作的知识点。创建（Create）操作涉及通过编程方式向文档添加新的节点...

js 获取元素所有兄弟节点的实现方法

10-21

本文将详细介绍如何使用原生JavaScript以及jQuery这两种方式来获取元素的所有兄弟节点，并给出相关的概念和方法解释。首先，让我们来理解“兄弟节点”的概念。在DOM树结构中，一个节点的兄弟节点指的是它父节点下...

js如何获取节点

m0_52434369的博客

06-30

184

如何用js去获取节点，相信聪明的你们看了这篇文章后就会有了基本的理解啦，自己再动手多练一练就会很快掌握了，里面都有详细的注解,对于小白友好哟！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

原生 JS 获取节点方法总结

清平调、其N 的博客

01-26

7598

一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。 1 var a = document.getElementById("test").getElementsByTagName("div"); ...

js中获取节点的方式

zcj的博客

11-02

956

1. 获取节点 1.1 根据类名获取节点 var x1=document.getElementsByClassName(“demo”); 1.2 根据标签名获取节点 var x2 = document.getElementsByTagName(“p”); console.log(x2[0]); 1.3 根据id获取节点 var x3 = document.getElementById(“demo1”); console.log(x3); 2. 获取父节点 var x5 = 节点.parentN

JavaScript如何获取节点

知足常乐

08-18

896

对于javascript,大学里有过学习，只可惜选择了做Android之后，所谓的JavaScript，也慢慢忘却了，不过基础还是存在的，毕竟编程语言除了自身的特有性质有所不一，其实大部分还是融汇贯通的，比如，语法啊，什么变量，常量的，运算符等等，都是差不多的。所以啊，掌握一门语言之后，再去进军到其他语言，是非常容易的。前端开发中，比如说，账号，密码，简介什么的输入框，往往我们要得到其中用户输

JavaScript获取HTML DOM节点元素详解

web开发

03-08

167

在Web运用程序特别是Web 2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。如何获取要更新的元素，是首先要处理的疑问。 51CTO推荐阅读：JavaScript DOM文档遍历实战令人欣慰的是，运用JavaScript获取节点的要领有很多种，这里基本做一下总结： 1. 通过顶层document节点获取 ◆document.getElementById(elem...

JavaScript获取节点的方法大全

热门推荐

qq_42889406的博客

10-26

1万+

1. 通过document节点获取 1.1 通过ID 语法：document.getElementById（“id”）；特点：应用场景：推荐指数：示例： 1.2 通过标签名语法：document.getElementById（“id”）；特点：应用场景：示例： 1.3 通过name值语法：document.getElementById（“id”）；特点：应用场景：示例： 1.4 通过class 语法：document.getElementById（“id”）；特点：应用场景：示

js 原生获取节点样式

09-01

在 JavaScript 中，可以使用 getComputedStyle() 方法来获取节点的样式。该方法接受一个参数，即要获取样式的节点。使用方法如下： ```javascript var element = document.getElementById('myElement'); // 获取节点 var styles = window.getComputedStyle(element); // 获取节点样式 ``` 当调用 getComputedStyle() 方法时，它会返回一个对象，包含了指定节点的所有样式属性和对应的值。可以通过对象的属性来访问节点的样式值，比如要获取节点的颜色属性可以使用 `styles.color`。下面是一个例子，演示如何获取节点的样式值： ```html <!DOCTYPE html> <html> <head> <style> #myElement { width: 200px; height: 100px; background-color: red; color: white; font-size: 20px; } </style> </head> <body> <div id="myElement">Hello, World!</div> <script> var element = document.getElementById('myElement'); var styles = window.getComputedStyle(element); console.log('Width:', styles.width); // 输出节点的宽度值为 '200px' console.log('Height:', styles.height); // 输出节点的高度值为 '100px' console.log('Background color:', styles.backgroundColor); // 输出节点的背景颜色为 'rgb(255, 0, 0)' console.log('Color:', styles.color); // 输出节点的文本颜色为 'rgb(255, 255, 255)' console.log('Font size:', styles.fontSize); // 输出节点的字体大小为 '20px' </script> </body> </html> ``` 通过以上例子，我们可以看到，使用 getComputedStyle() 方法可以方便地获取节点的样式值，从而进行样式的修改和操作。