发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

DOM操作之元素查找

周海萍

3

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
显示全部楼层
通常我们操作一个元素节点前都需要查找到这个元素，查找到这个元素有两种方式。

  • 使用选择器函数查找元素
  • 通过元素的关系属性来查找元素
使用选择器函数查找

getElementById

通过节点元素的ID得到此节点
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>getElementById</title>
  7. </head>
  8. <body>
  9.     id选择器
  10.     boxDiv
  11.     boxDiv
  13.    
  14. </body>
  15. </html>
复制代码
上面的例子中，id = ”boxDiv“ 有重复，在HTML的规则中， ID在一个网页应当是唯一的，如果重复， documen.getElementById 方法也只会获取第一个。
getElementsByName

通过名称获得节点， 返回的是一个数组集合
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <input type="hidden" name="up" />
  10.     <input type="hidden" name="down" />
  12.    
  13. </body>
  14. </html>
复制代码
getElementByTagName

通过标签名得到一组标签数组
注意：此方法返回的是数组，即使页面上只有一个此节点的元素
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>getElementByTagName</title>
  7. </head>
  8. <body>
  9.     哈喽，第一
  10.     哈喽，第二
  11.     哈喽，第三
  12.     哈喽，第四
  14.    
  15.   
  16.   
  17.     <p>段落</p>
  18.   
  19.   
  20.     <p>段落</p>
  21.   
  22.   
  23.     <p>段落</p>
  24.   
  25.   
  26.     <p>段落</p>
  27.    
  29.    
  30. </body>
  31. </html>
复制代码
getElementByClassName

通过class选择器得到元素节点的数组
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>getElementByIdElementByClassName</title>
  7. </head>
  8. <body>
  10.    
  11.   
  12.   
  13.     <p >box1节点一</p>
  14.   
  15.   
  16.     <p >box1节点二</p>
  17.   
  18.   
  19.     <p >box1节点三</p>
  20.   
  21.   
  22.     <p >box1节点四</p>
  23.    
  24.    
  25.   
  26.   
  27.     <p >box2节点2</p>
  28.   
  29.   
  30.     <p >box2节点二</p>
  31.   
  32.   
  33.     <p >box2节点三</p>
  34.   
  35.   
  36.     <p >box2节点四</p>
  37.    
  38.    
  39. </body>
  40. </html>
复制代码
querySelector

通过选择器或者选择器组得到元素节点，只能得到页面上的一个元素，如果有多个元素符合条件，则只能得到第一个元素
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>querySelector</title>
  7. </head>
  8. <body>
  9.    
  10.   
  11.   
  12.     <p>子元素</p>
  13.   
  14.   
  15.     <p >子元素1</p>
  16.   
  17.   
  18.     <p >子元素2</p>
  19.    
  21.    
  22. </body>
  23. </html>
复制代码
querySelectoryAll

通过选择器或者选择器组得到数组元素
注：返回值是一个数组
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>querySelector</title>
  7. </head>
  8. <body>
  9.    
  10.   
  11.   
  12.     <p>子元素</p>
  13.   
  14.   
  15.     <p >子元素1</p>
  16.   
  17.   
  18.     <p >子元素2</p>
  19.    
  21.    
  22. </body>
  23. </html>
复制代码
方法功能getElmentById通过ID得到元素getElementsByName通过名称得到元素getElementByTagName通过标签名得到元素数组getElementByClassName通过类名得到元素数组querySelector通过选择器得到元素querySelectoryAll通过选择器得到元素数组关系属性查找元素

关系属性查找，是根据已知的节点去查找我们想要的节点
节点和节点组成了一棵树，有以下几种角色
父节点：在一个嵌套结构中，外层的被成为内层节点的父节点
子节点：嵌套在父节点内部的节点
兄弟节点：处在同一层级，并列的节点被称为兄弟节点
  1.   
  2.   
  3.   
复制代码
这些角色之间有以下几种关系，我们就可以用这些关系属性获取相应的元素节点
关系所有节点子节点childNodes父节点parentNode第一个子节点firstChild最后一个子节点lastChild前一个兄弟节点previousSibling后一个兄弟节点nextSlibling

拓展

DOM中，文本和空白也应该算DOM的节点, 所以用上述表格中的属性取的是所有的节点
在日常开发中，我们可能只需要操作元素节点（带标签的）的节点， 因此，有了以下属性方便我们操作
关系元素节点子节点children第一个子节点firstElementChild最后一个子节点lastElementChild前一个兄弟节点previousElementSibling后一个兄弟节点nextElementSibling
  1.   
  2.   
  3.    
  4.   
  5.   节点关系  
  6.   
  7.    
  8.   
  9.       文字文字
  10.   
  11.   
  12.     文字文字
  13.   
  14.   
  15.     文字文字
  16.   
  17.   
  18.    
复制代码
上面获取元素节点的方法兼容到IE9， 其实我们可以使用前面文章中提到的 nodeType 来模拟实现 这些方法，这种写法可以兼容到IE6
我们知道 nodeType = 1 的为元素节点，因此我们通过方法模拟实现类似children属性的功能， 获取一个元素的所有子节点
以下为实现代码
  1.   
  2.   
  3.     文字文字
  4.   
  5.   
  6.     文字文字
  7.   
  8.   
  9.     文字文字
  10.   
  11.   
  12.    
复制代码
   
微信公众号
  

来源:https://www.cnblogs.com/haloujava/p/17927882.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: Chrome扩展程序是如何进行消息传递的

下一篇: 性能翻倍！京东亿级体量小程序优化实践

发表于 2023-12-26 16:11:32

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4