HTML中的DOM操作

最新推荐文章于 2022-09-16 22:11:34 发布

泡泡龙～～

最新推荐文章于 2022-09-16 22:11:34 发布

阅读量734

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_43539655/article/details/122565428

版权

1、getElementById(“元素的id名字”)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    let con = document.getElementById("container");
</script>
</html>

显示结果：
在这里插入图片描述

2、getElementsByClassName(“元素的类名”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class = "container">1</div>
    <div class = "container">2</div>
    <div class = "container">3</div>
</body>
<script>
    let con = document.getElementsByClassName("container");
</script>
</html>

显示结果：
在这里插入图片描述
可以注意到这里是Elements,可见不止一个。
由图可知，通过类名获取的是一个数组,可通过下标访问。

3、getElementsByTagName(“元素标签的名字”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class = "container">1</div>
    <div class = "container">2</div>
    <div class = "container">3</div>
    <p>4</p>
</body>
<script>
    let div = document.getElementsByTagName("div");
    let p = document.getElementsByTagName("p");
</script>
</html>

结果显示：在这里插入图片描述
这个和getElementsByClassName()，类似返回都是一个数组。

4、选择器

（1）querySelector();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div id="content" class = "container">1</div>
    <div class = "container">2</div>
    <div class = "container">3</div>
</body>
<script>
    let content = document.querySelector("#content");
    let con = document.querySelector(".container");
</script>
</html>

结果显示：
在这里插入图片描述
这里需要注意的是，
①通过id名获取的时候需要 “#”+“id名” ；
通过类名获取时需要用 “.”+“类名”
②并且无论元素多少，只会返回第一个。
（2）querySelectorAll();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div id="content" class = "container">1</div>
    <div class = "container">2</div>
    <div class = "container">3</div>
</body>
<script>
    let content = document.querySelector("#content");
    let con = document.querySelectorAll(".container");
</script>
</html>

结果显示：在这里插入图片描述
当元素有多个时，使用该方法可以获得一个NodeList数组，可通过下标访问。

泡泡龙～～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML中的DOM操作

1、getElementById(“元素的id名字”)；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body> <div id="container"></div></body><script>
复制链接

扫一扫