您现在的位置是:首页 > 正文

原生js获取document_原生js获取DOM对象的几种方法

2024-04-01 04:00:31阅读 2

获取DOM元素的方法:

1.通过id获取

let box= document.getElementById("box");

1

2

3

4

注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

2. 通过class获取

let boxCollection= document.getElementsByClassName("box");

let box1 = boxList[0];

let box2 = boxList[1];

1

2

3

4

5

6

7

注意:getElementsByClassName()括号中的不需要在前面加 “.” ,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件。

3. 通过标签名获取

段落1

段落2

段落3

段落4

段落5

段落6

let pCollection= document.getElementsByTagName("p");

1

2

3

4

5

6

7

8

9

10

11

注意: 该方法返回的也是一个集合。

4. 通过name属性获取

let userInput= document.getElementsByName("user");

1

2

3

4

5

6

返回值如下:

注意:只有含有name属性的元素(表单元素)才能通过name属性获取

5. 通过querySelector获取

let box= document.querySelector("#box");

1

2

3

4

注意:querySelector()方法括号中的值是元素的选择器,所以前面加了”#”符号,使用的是id选择器。此方法直接返回DOM对象本身。

6. 通过querySelectorAll获取

box1
box2
box3
box4
box5

let box1= document.querySelector(".box");

let boxes= document.querySelectorAll(".box");

1

2

3

4

5

6

7

8

9

结果如下图:

注意:querySelector()和querySelectorAll()方法括号中的取值都是选择器,但从图中我们可以看出,两个方法是有区别的。当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。

总结:

1.所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。

2.getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。

3.querySelector()与querySelectorAll()两者的联系与区别:

联系: 两者括号中的取值都是选择器

区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。

————————————————

原文链接:https://blog.csdn.net/qq_33036599/article/details/80660923

网站文章

  • 各软件官网下载地址合集

    MySQL下载地址: https://downloads.mysql.com/archives/community/ Tomcat下载地址: https://tomcat.apache.org/dow...

    2024-04-01 04:00:24
  • VMware及相关产品序列号大全

    <br />VMware及相关产品序列号大全<br /><br />VMware Server For Windows KEY(非GSX Server KEY,VMware提供): <br />90H...

    2024-04-01 03:59:46
  • “微商城”项目(2准备工作)

    “微商城”项目(2准备工作)

    本项目使用Vue.js前端框架进行开发,在创建项目之前需要先下载Node.js环境。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它可以让JavaScript运行在服务...

    2024-04-01 03:59:38
  • 交换两个变量的值,不使用第三个变量(两种方法)

    //交换两个变量的值,不使用第三个变量。 //有两种解法, 一种用算术算法, 一种用^(异或) //异或:相同为0,不同为1。相当于减法。 #include int main() { int a = 8; int b = 9; printf(&quot;初始状态:a = %d, b = %d\n&quot;,a,b); a = a + b; b = a - b; a = a - b;

    2024-04-01 03:59:31
  • 解决HTML中换行会出现间隙问题

    解决HTML中换行会出现间隙问题

    源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格,空格和回车都会被显示为一个3px的空格。 例如: 小米网 MIUI 效果如图: 解决办法: 在换行处父级标签加css: {font-size:0}; 这样换行后就不会有空格出现. html: 小米网

    2024-04-01 03:59:24
  • 嵌入式web项目框架解读

    项目框架敬上!!!本期主要分享的是使用网页控制硬件的流程,主要是梳理了整个项目的基本框架,项目内容相对来讲比较单一,后续会逐步添加功能;

    2024-04-01 03:58:45
  • 关于implementation ‘com.android.support:appcompat-v7:28.0.0-alpha运行报错

    关于implementation ‘com.android.support:appcompat-v7:28.0.0-alpha运行报错

    今天导入了一个module,并且让项目关联了这个module,发现运行工程的时候死活运行不起来,最后发现运行的报了一个Android dependency 'com.android.support:s...

    2024-04-01 03:58:37
  • linux应用程序使用系统命令点亮LED

    将字符串输出重定向,当前目录没有 test.txt,则创建 text.txt ,并将字符串输出到test.txt 文件中。和直接使用 vi 编辑器打开 test.txt 然后输入 hello 的效果是一样的。在应用程序中,我们可以使用system 函数来调用命令。

    2024-04-01 03:57:54
  • Personal access tokens (classic)与Fine-grained personal access tokens Beta区别

    Personal access tokens (classic)与Fine-grained personal access tokens Beta区别

    GitHub 目前支持两种类型的 personal access token:fine-grained personal access token 和 personal access tokens (...

    2024-04-01 03:57:45
  • 1029-除法求值

    1029-除法求值

    题目如下给你一个变量对数组 equations 和一个实数值数组 values 作为已知条件,其中 equations[i] = [Ai, Bi] 和 values[i] 共同表示等式 Ai / Bi...

    2024-04-01 03:57:37