常用DOM selector

最近也在复习JS的相关内容,挑出重点内容来温习下!语法啥的就不多说了,直接谈谈常用的5个DOM selector!

  • getElementsById
  • getElementsByClassName
  • getElementsByTagName
  • querySelector
  • querySelectorAll
    他们如何使用呢,下面用一个实例来演示一下

Example

首先,我写了一个非常简单的html文件,分配给他们不同的id,class.

<!DOCTYPE html>
<html>
<head>
    <title>my title</title>
    <script src="script.js"></script>
</head>
<body>

<h1>i'm h1</h1>
<p id="first" class="special">hello</p>
<p class="special">goodbye</p>
<p>hi again</p>
<p id="last">gb again</p>
</body>
</html>
1. getElementsById(x)

通过id来获取页面上的object


image.png
2. getElementsByClassName(x)

获取class为x的所有的objects


image.png
3. getElementsByTagName(x)

得到tagname为x的所有objects


image.png
4. querySelector(x)

返回第一个符合x sytle的object!注意返回的是第一个!!!


5. querySelectorAll(x)

返回所有符合x style的objects。


image.png

ok,小伙伴们会使用了吗!rua!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容