JS DOM操作获取页面元素 / 标签

最新推荐文章于 2024-05-30 11:27:58 发布

OGoodness

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量551

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_46275230/article/details/124230359

版权

JS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

JS&DOM 获取页面元素对象

文章目录

JS&DOM 获取页面元素对象

通过 id名 :getElementById()

通过id获取元素

<body>
	<div id="one">Hello World</div>
	
	<script>
		console.log(document.getElementById("one"));
	</script>
</body>

请添加图片描述

通过类名 :getElementByClassName()

1.通过类名(class)获取元素
2.返回类数组元素集合,即单次获取多个同类名元素
3.通过下标获取指定元素

<body>
  <div class="one">Hello World</div>
  
  <script>
    console.log(document.getElementsByClassName("one")[0]);
  </script>
</body>

请添加图片描述

通过标签名 :getElementsByTagName()

1.通过标签名获取元素
2.返回类数组元素集合,即单次获取多个同类名元素
3.通过下标获取指定元素

<body>
  <div>Hello1 World</div>
  <div>Hello2 World</div>
  <div>Hello3 World</div>
  
  <script>
    console.log(document.getElementsByTagName("div"));
  </script>
</body>

请添加图片描述

H5万能获取单个 :querySelector()

1.H5新增万能获取方法,括号内直接填写 id/class/标签名即可获取
2.返回单个元素

<body>
  <div class="one" id="two">Hello World</div>
  <script>
    console.log(document.querySelector("div"));
    console.log(document.querySelector(".one"));
    console.log(document.querySelector("#two"));
  </script>
</body>

请添加图片描述

H5万能获取多个 :querySelectorAll()

1.H5新增万能获取方法,括号内直接填写 id/class/标签名即可获取
2.返回类数组元素集合,即返回多个元素

<body>
  <div class="one">Hello World</div>
  <div class="one">Hello World</div>
  <div class="one">Hello World</div>

  <script>
    console.log(document.querySelectorAll("div"));
    console.log(document.querySelectorAll(".one"));
  </script>
</body>

请添加图片描述

直接获取body :document.body

直接获取body元素

console.log(document.body);

请添加图片描述

直接console.log打印id获取

<body>
  <div id="one"></div>
  <script>
    console.log(one);
  </script>
</body>

请添加图片描述

OGoodness

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS DOM操作获取页面元素 / 标签

JS&DOM 获取页面元素对象文章目录JS&DOM 获取页面元素对象通过 id名 :getElementById()通过类名 :getElementByClassName()通过标签名 :getElementsByTagName()H5万能获取单个 :querySelector()H5万能获取多个 :querySelectorAll()直接获取body :document.body直接console.log打印id获取通过 id名 :getElementById()通过id获取元
复制链接

扫一扫