HTML学习笔记（5）

原创

已于 2025-01-18 17:06:51 修改 · 468 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2025-01-18 17:04:03 首次发布

一、dom操作

1、查找操作

getElementById()

getElementsByClassName()

getElementsByTagName()

一、dom操作

document object model

1、查找操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/dom操作.js"></script>
</head>
<body>
    <div id="aa">hello</div>
    
</body>
</html>

getElementById()

// getElementById()通过id获取元素,返回一个对象
var obj = document.getElementById("aa");
console.log(obj);

我们发现控制台输出并不是我们预期的答案

注：因为html是顺序执行的代码，按照所给html代码，先外引js文件此时并没有id为aa的元素，所以值为null，可以有三种方式修改如下：

1、调整导入顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="aa">hello</div>
    <script src="js/dom操作.js"></script>
</body>
</html>

2、+延迟标记注：defer只能用在外引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/dom操作.js" defer></script>
</head>
<body>
    <div id="aa">hello</div>
</body>
</html>

3、修改JS文件,window.onload它在整个网页（包括所有的图片、CSS、脚本等资源）加载完成后触发