js复习：获取元素的方式通过html标签，classs选择器，id属性。document.querySelector，document.getElementsByClassName

最新推荐文章于 2023-04-21 14:22:29 发布

半浮名

最新推荐文章于 2023-04-21 14:22:29 发布

阅读量1.2k

点赞数

分类专栏： html,css,js基础知识文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_51813155/article/details/121233991

版权

html,css,js基础知识专栏收录该内容

14 篇文章 1 订阅

订阅专栏

获取元素的方式

1.如何获取dom中的元素？

1.获取它的class 标签/或者标签元素

<div class="one"></div>

获取这个元素可以：
var er=document.querySelector(".one");// class标签
格式：.class
也可以：
var div=document.querySelector(“div”);//
直接获取html元素写
可以用单引号吗

var er=document.querySelector(".one"); //双引号
var err=document.querySelector('.one');//单引号

可以:单引号,双引号都能获取元素
为了方便：还是用双引号

通过获取它的css标签找到元素并定义变量：例子
document.querySelector（）；/方法仅仅返回匹配指定选择器的第一个元素

如果你需要返回所有的元素(集合)，请使用 querySelectorAll() 方法替代

<!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>Document</title>
</head>
<body>
    



<div class="one"></div>

<div class="one"></div>

<script>
var div=document.querySelector("div");
var er=document.querySelector(".one");
var err=document.querySelector('.one');
var divv=document.querySelectorAll("div");
console.log(div);
console.log(divv);
console.log(divv.length);
console.log(er);
console.log(err);

</script>
</body>
</html>

效果：
在这里插入图片描述

2.第二个获取元素语法：

通过：获取元素的id属性，来获取元素

<div class="one" id="id"></div>

var wer=document.querySelector("#id");// # 加id名称

3.className

<div class="one"></div>

<div class="one" id="id"></div>

var fff=document.getElementsByClassName(“one”);//注意：
格式：one 不用加点
//获取所有具有div标签的css元素。
fff是集合：元素集合
使用它：要
fff[0] 表示集合第一个元素
fff[1] 表示第二个元素
var fff=document.getElementsByClassName(“div”);//错误
因为：是获取class标签来获取元素的，不能通过html标签来获取

<!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>Document</title>
</head>

<style>
    div{

        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>
<body>
    



<div class="one"></div>

<div class="one" id="id"></div>



<script>
    var wer=document.querySelector("#id");
var qqq=document.getElementById("id");
    var fff=document.getElementsByClassName("one");
var div=document.querySelector("div");
var er=document.querySelector(".one");
var err=document.querySelector('.one');
var divv=document.querySelectorAll("div");
/*console.log(div);
console.log(divv);
console.log(divv.length);
console.log(er);
console.log(err);*/
console.log(wer);
console.log(qqq);
console.log(fff);
console.log(fff[1]);

fff[0].οnclick=function(){
    console.log("你好世界！");
}




</script>
</body>
</html>