JS获取元素节点的方法

最新推荐文章于 2023-05-24 22:25:55 发布
最新推荐文章于 2023-05-24 22:25:55 发布
阅读量617 收藏
点赞数
分类专栏： javascript复习之路 # javascript基础 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_swa99er/article/details/119933465
版权

JS获取元素节点的方法

document.getElementById(id);

node.getElementsByTagName(标签名)；
功能：从node节点开始，通过标签名获取符合条件的元素节点
返回值：伪数组/类数组

node.getElementsByClassName(class节点) (IE8一下不兼容)
功能：通过class名字获取符合条件的元素节点

document.getElementsByName(name属性的值)
功能：通过Name属性的值获取符合条件的元素节点
【注】一般使用在表单元素里

document.querySelector()
返回值：一个元素节点，找到符合条件的第一个元素节点

document.querySelectorAll()
返回值：返回值是一个伪数组

参数：字符串 CSS选择器格式字符串

例子一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	var aLis = document.getElementsByTagName("li");
            alert(aLis);//使用起来和数组类似，一般情况，把这种叫做伪数组/类数组
            alert(aLis.length);
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
例子二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	 var oOl = document.getElementById("ol1");
             var aLis = oOl.getElementsByTagName("li");
             //获取ol下的li节点
             alert(aLis.length);
             for(var i=0;i<aLis.length;i++)
             {
                 aLis[i].style.backgroundColor = 'red';
             }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
例子三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	 var nodes = document.getElementsByClassName("box");
             alert(nodes.length);
             for(var i=0;i<nodes.length;i++)
             {
                 nodes[i].style.backgroundColor = 'red';
             }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
例子四：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	 var oUl = document.getElementById("ul1");
             var nodes = oUl.getElementsByClassName("box");
             alert(nodes.length);
             for(var i=0;i<nodes.length;i++)
             {
                 nodes[i].style.backgroundColor = 'red';
             }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
例子五：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	 var nodes = document.getElementsByName("hello");
             alert(nodes.length);
             for(var i=0;i<nodes.length;i++)
             {
                 nodes[i].style.backgroundColor = 'red';
             }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
例子六：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	 var nodes = document.querySelectorAll("#ul1");
        	 alert(nodes.length);
             for(var i=0;i<nodes.length;i++)
             {
                 nodes[i].style.backgroundColor = 'red';
             }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
例子七：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	 var nodes = document.querySelectorAll("li");
        	 alert(nodes.length);
             for(var i=0;i<nodes.length;i++)
             {
                 nodes[i].style.backgroundColor = 'red';
             }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
例子八：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	 var nodes = document.querySelectorAll("ol .box");
        	 alert(nodes.length);
             for(var i=0;i<nodes.length;i++)
             {
                 nodes[i].style.backgroundColor = 'red';
             }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
例子九：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	 var nodes = document.querySelectorAll("[name=hello]");
             alert(nodes.length);
             for(var i=0;i<nodes.length;i++)
             {
                 nodes[i].style.backgroundColor = 'red';
             }
        }
    </script>
</head>
<body>
    <ul id = 'ul1'>
        <li>111</li>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li name='hello'>111</li>
        <li>111</li>
        <li>111</li>
        <div class='box' name='hello'>111</div>
    </ul>
    <input type="text" name='hello'/>
    <br>
    <span name='hello'>111</span>
    <ol id = 'ol1'>
        <li class='box'>111</li>
        <li class='box'>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ol>
</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述

东方求败、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
02.JavaScript入门
guan_xfeng的博客
04-28 233
javascript: JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。 特点： (1)JS是一门直译式的语言，直接执行的就是源代码. 是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行
javascript获取元素和节点操作
fdsal的博客
12-16 252
获取元素 1.根据ID获取 语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象或null 案例： <body> <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面 var timer = document.getElementById('time'
JS三种书写位置
weixin_51930617的博客
09-01 144
JS三种书写位置 1.行内式 写在body标签里边的 2.内嵌式 写在head标签里边的 3.外链式 写在head标签里边的，并用双标签表示。eg： 助学代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Document</title> <style></style> <!--2.内嵌的js--> <script&g
js获取元素节点的几种方法
qq_56008371的博客
05-16 5877
1.以元素名获取 //通过标签名获取元素节点（获取0到多个节点） //书写格式： //document.getElementsByTagName("元素名") let divEle = document.getElementsByTagName("div"); 注：获取到的是一个类数组 console.log(divEle[0]); 2.通过name属性值获取元素节点（获取0到多个节点） //书写格式：document.getElementsByName("name值") letspan..
js获取 元素 和 节点 大全
小罗的博客
05-01 5140
通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 通过选择器获取一...
js中12种获取节点和元素的方法
qq_44777678的博客
05-07 977
//父级节点 console.log(对象名.parentNode); //父级元素 console.log(对象名.parentElement); //子节点 console.log(对象名.childNodes); //子元素 console.log(对象名.children); console.log("==========================...
JS节点的获取方法
weixin_46421045的博客
06-10 196
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <!
JavaScript 获取元素在父节点中的下标(推荐)
10-19
总之，JavaScript获取元素在父节点中的下标是通过结合`querySelectorAll`和数组的`indexOf`方法来实现的。理解这个过程不仅可以帮助你解决特定问题，还能增强你对JavaScript DOM操作的掌握，使你在编写高性能的前端...
js 获取元素所有兄弟节点的实现方法
11-22
兄弟节点同理，下面是一个常规的获取兄弟节点的办法。 代码如下 function siblings(elm) { var a = []; var p = elm[removed].children; for(var i =0,pl= p.length;i<pl;i++) { if(p[i] !== elm) a.p
JS获取父节点方法
12-03
本文主要讨论了如何使用JavaScript获取元素，特别是获取父节点的方法。以下是详细的解释： 1. 通过顶层document节点获取： - `document.getElementById(elementId)`：这是最常用的方法，通过元素的ID来精确获取...
jQuery获取元素父节点的方法
10-22
在JavaScript的世界里，jQuery库提供了一种简便的方式来操作DOM元素，包括获取元素的父节点。在标题和描述中提到的"jQuery获取元素父节点的方法"，主要包括`parent()`、`parents()`和`closest()`这三个方法。下面将...
js获取元素节点
weixin_30883311的博客
12-15 105
一：获取元素节点(document对象下) 1. id获取 　　documnet.getElementById("id") 　　获取该id节点元素 2. class类名获取 　　document.getElementsByClassName("className") 　　获取的是一个元素集合可以通过索引获取对应的某个元素 3. 元素获取 　　document.getEle...
【JAVAScript】dom获取元素的方式及实例
weixin_51612770的博客
05-12 3143
JAVAScript (dom易忘点：获取元素节点) 今天主要介绍两种获取元素的方式：document.方法（）和利用节点层级关系获取元素 需要注意的是：选取合适的获取方式，并考虑浏览器的兼容性（部分获取的方式IE9以下是无法使用的） 什么是DOM? 文档对象模型 (DOM) 是HTML的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页
JavaScript基础：通过id值、class值、tagName值、name属性获取相应的一个或多个元素节点
Alley_Olive的专栏
07-06 1247
JavaScript基础：通过id值、class值、tagName值、name属性获取相应的一个或多个元素节点
JavaScript获取节点
quangelixi的博客
10-07 2231
1、通过ID获取，是id唯一： document.getElementById("main "); 2、通过class名获取 的是类数组，拿到的是一个类数组，这个数组包含所有class是left的元素。类数组是从上往下拿元素 document.getElementsByClassName("left"); let l =document.getElementsByClassName("left"); console.log(l[0]);//获取类数组中第一个元素 3、通过标签名获取 的是.
js中node节点操作和获取
qq_55748881的博客
01-13 1017
js的node节点操作和获取的一些详细的表述
js获得元素的:after节点
最新发布
小墨蛇的博客
05-24 1328
JS无法直接获取元素的:after伪元素节点，因为它不是DOM节点。但是可以使用getComputedStyle方法获取元素的样式，进而获取:after伪元素的内容。
js jquery 父子

09-11 750
$("#test1").parent(); // 父节点     $("#test1").parents(); // 全部父节点     $("#test1").parents(".mui-content");     $("#test").children(); // 全部子节点     $("#test").children("#test1");     $("#test").con
(学习笔记) js获取伪元素
xiaojian_521的博客
03-26 3126
(学习笔记) js获取伪元素 - window.getComputedStyle() 方法
封装一个获取元素节点的方法
04-26
好的，可以使用JavaScript中的getElementById方法获取元素节点，该方法接受一个参数，即要获取的元素节点的id，代码如下： ``` function getElementById(id) { return document.getElementById(id); } ``` 该方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方求败、

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值