前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)

这篇具有很好参考价值的文章主要介绍了前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、通过id获取元素(一次一个元素)

一个id在一个页面是唯一的,所以我们可以使用

document.getElementById("id名")

获取元素,使用变量来接收,直接就能获取到这个元素,通过 id 名去获取元素,一次只能获取一个元素。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <script>
    var box = document.getElementById('box')
    console.log(box)
  </script>
</body>

</html>

getelementbyid,# 前端基础(JS),前端,javascript,获取元素
直接能获取到这个元素。

二、通过标签名元素(一次多个元素)

通过标签名获取:

document.getElementsByTagName("标签名");

例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <div class="Liuqing">Liuqing1</div>
  <div class="Liuqing">Liuqing2</div>
  <script>
    var box = document.getElementById('box')
    console.log(box)
    var Liuqing = document.getElementsByTagName('div')
    console.log(Liuqing, 'Liuqing')
    console.log(Liuqing[0], 'Liuqing[0]')
  </script>
</body>

</html>

getelementbyid,# 前端基础(JS),前端,javascript,获取元素

通过

 var Liuqing = document.getElementsByTagName('div')

获取所有div标签元素,得到的是一个HTMLCollection数组,元素集合,然后去集合的第0项,也就是id名为box的元素。

三、通过类名元素(一次多个元素)

通过类名获取:

document.getElementsByClassName("类名");

例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <div class="Liuqing">Liuqing1</div>
  <div class="Liuqing">Liuqing2</div>
  <script>
    var box = document.getElementById('box')
    console.log(box)
    var Liuqing = document.getElementsByClassName('Liuqing')
    console.log(Liuqing, 'Liuqing')
    console.log(Liuqing[0], 'Liuqing[0]')
  </script>
</body>

</html>

getelementbyid,# 前端基础(JS),前端,javascript,获取元素
通过

 var Liuqing = document.getElementsByClassName('Liuqing')

获取所有class名称为Liuqing的标签元素,得到的是一个HTMLCollection数组,元素集合,然后去集合的第0项,也就是第一个calss名称为Liuqing的元素。

四、querySelector(获取第一个匹配成功的元素)

用法:

document.querySelector('类名(需要加.)|| id(需要加 #)||标签名')

注意:
获取第一个匹配成功的元素

例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box">LiuQing</div>
  <div class="Liuqing">Liuqing1</div>
  <div class="Liuqing Liuqing2">Liuqing2</div>
  <script>
    var box = document.getElementById('box')
    console.log(box)
    var Liuqing1 = document.querySelector('.Liuqing')
    console.log(Liuqing1, 'Liuqing1')
    var Liuqing2 = document.querySelector('.Liuqing2')
    console.log(Liuqing2, 'Liuqing2')

  </script>
</body>

</html>

getelementbyid,# 前端基础(JS),前端,javascript,获取元素

五、querySelectorAll(获取所有匹配成功的元素)

用法:

document.querySelector('类名(需要加.)|| id(需要加 #)||标签名')

注意:
获取所有匹配成功的元素

例子:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    #box {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box" class="Liuqing">
    <span class="smallSpan">
      span内容
    </span>
  </div>
  <div class="Liuqing">
    <span class="smallSpan">
      span内容
    </span>
  </div>
  <script>
    var Liuqing = document.querySelectorAll('.Liuqing .smallSpan')
    console.log(Liuqing, 'Liuqing')

  </script>
</body>

</html>

getelementbyid,# 前端基础(JS),前端,javascript,获取元素
document.querySelectorAll中可以写选择样式,css中怎么写,这里就可以怎么写。文章来源地址https://www.toymoban.com/news/detail-789197.html

到了这里,关于前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 2.获取DOM元素

    获取DOM元素就是利用JS选择页面中的标签元素 语法: 参数: 包含一个或多个有效的CSS选择器 字符串 返回值: CSS选择器匹配的第一个元素,一个HTMLElement对象。 如果没有匹配到,则返回null。 语法: 参数: 包含一个或多个有效的CSS选择器 字符串 返回值: CSS选择器匹配的 NodeList 对象

    2024年02月15日
    浏览(41)
  • javaScript:DOM元素的获取(静态/动态获取)

    目录 一.dom元素获取的意义与使用场景  使用场景(绝大多数js操作都需要dom操作) 总结/疑问解答!  二.DOM元素获取的常用方法(重点) 获取dom元素(动态) document.gerElementbyId() document.gerElementsBytagName() document.gerElementsByclassName() document.gerElementsByname()通过name属性查找元素 获

    2024年02月09日
    浏览(51)
  • JavaScript---获取、修改DOM元素

    1. 获取元素 1.1.  获取第一个元素,一个HTMLElement对象,可以修改   document.querySelector(\\\'css选择器\\\')    1.2. 获取多个元素,一个HTMLElement对象,不可以修改,得到的是伪数组 document.querySelectorAll(\\\'css选择器\\\')   2. 操作元素内容 2.1. 元素.innerText      只显示纯文本,不解析标签 

    2024年02月15日
    浏览(40)
  • uniapp获取dom某个元素

    uniapp中想要获取dom元素不能像pc端那样获取 虽然dom元素是获取到了,但不同于pc端那样,获取到的元素属性和方法少很多:  只有这么几个属性,click点击方法都没有,可能是考虑到多端适配的问题

    2024年02月13日
    浏览(42)
  • 微信小程序获取dom元素

    微信小程序不支持document.querySelect获取元素,它内置了获取元素的两种方法,第一种是通过 wx.createSelectorQuery()获取dom元素,第二种时给想要使用的对象绑定事件,输出e对象,就能拿到该对象的一些信息 先在页面上定义一个view标签  

    2024年02月08日
    浏览(43)
  • JS中获取dom元素高度相关方法

    javascript中获取dom元素高度和宽度的属性如下: 网页可视区域宽: document.body.clientWidth 网页可视区域高: document.body.clientHeight 网页可视区域宽: document.body.offsetWidth (包括边距的宽) 网页可视区域高: document.body.offsetHeight (包括边距的高) 网页正文全文宽: document.body.scrollWidth

    2024年02月07日
    浏览(53)
  • JS 获取 HTML DOM 元素的方法

     

    2024年02月11日
    浏览(44)
  • 小程序获取窗口宽高和dom元素

    wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度 wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 wx.getSystemInfoSync().model // 获取当前采用的设备 wx.getSystemInfoSync().pixelRatio wx.getSystemInfoSync().language // 获取当前所采用的的语言 wx.getSystemInfoSync().version // 获取当前设备的版本 ==

    2024年02月15日
    浏览(47)
  • 「JavaScript DOM编程必备」元素获取方法大全

            在编写 JavaScript 代码时,我们经常需要获取 HTML 文档中的元素。下面将介绍 JavaScript 中获取元素的几种基本方法。 要通过元素的 ID 获取该元素对象,可以使用 document.getElementById() 方法。该方法接收一个字符串参数,即元素的 ID。例如,如果要获取 ID 为 \\\"example\\\" 的

    2024年02月07日
    浏览(48)
  • js获取dom元素宽高的方法

    这种⽅法,有⼀定局限性,只能取 内联样式 的宽⾼。 这种⽅法,也是有⼀定局限性,不过我们三种常⽤css样式都能获取。但是 只⽀持 IE ,其它浏览器不⽀持 ⽀持所有浏览器,兼容性好 这种⽅法,⼀般⽤于计算元素的绝对位置,根据视窗左上⻆的点来算的。可以拿到四个元

    2024年02月15日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包