js基础知识（二十四）--DOM简介、事件、加载、查询

本文链接：https://blog.youkuaiyun.com/weixin_47928499/article/details/126185955

本文介绍了DOM的基本概念，强调其作为文档对象模型的角色，允许通过JavaScript操纵网页内容。接着，详细阐述了事件，包括不同类型的节点和如何响应用户交互。接着讨论了文档加载过程中的注意事项，提出了解决JavaScript提前执行导致的问题的三种方法。最后，讲解了DOM查询方法，如通过class、标签名和name属性获取元素，并提到了innerHTML属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、DOM简介
DOM(Document Object Model)–文档对象模型
文档(Document)-文档指整个网页
对象（object）-DOM将网页中所有的东西都转换为了对象（找到各个的对象，想改谁就改谁）
模型（model）-模型用来体现节点之间的关系

网页由三个部分组成：
结构（HTML）
表现（css）
行为（JavaScript）
DOM中为我们提供了大量的对象，使我们可以通过js来完成对网页的操控

二、事件
节点(Node)-网页中的所有部分都可以称为是一个节点，虽然都是节点，但是有着不同的类型
-文档节点：表示整个网页
-元素节点：各种标签都属于元素节点
-属性节点：标签中的属性称为属性节点
-文本节点：标签中的文字

    // 通过js来修改button按钮
    // document对象表示整个网页，它由浏览器提供可以直接使用
    let btn = document.getElementById('btn');
    // btn的innerHtml就是“我是一个按钮”
    btn.innerHTML = 'I\'m Button';

事件（event）：事件就是用户和网页交互瞬间，例如：点击鼠标，点击按钮，鼠标移动，键盘按下…，我们通过响应用户的事件完成和用户的交互

    // 在script标签中，通过js代码来设置事件的响应
    let btn = document.getElementById('btn');
    // 可以通过为指定对象（这里是btn）的事件属性设置响应函数的形式来处理事件，其实这个是一个回调函数，给浏览器调用的函数
    // 被称为事件响应函数，也就是事件发生时触发的函数称为事件的响应函数
    // 单击响应函数
    btn.onclick = function () {
        alert('我是一个点击事件');
    }

三、文档的加载
网页中的代码在加载时，是自上而下一行一行加载的，如果将script标签写在页面的上边，此时js代码会优先于网页中的元素加载，所以会出现无法正常获取到DOM对象的情况出现，出现null的情况
为了解决问题：
1.可以直接将js代码写在body的下边
2.也可以将js代码编写到window.onload的回调函数里面
3.如果引入外部文件js文件时，在script标签上设置defer，则js文件会在网页加载完毕之后才加载

    //window.onload事件会在整个网页加载完毕之后    
    window.onload = function () {
        // 获取id为btn的按钮
        let btn = document.getElementById('btn');
        // 为按钮绑定一个单击响应函数
        btn.onclick = function () {
            alert("你点我干嘛");
        }
    };

四、DOM查询
document.getElementsByClassName()：根据class属性值获取一组元素;

document.getElementsByClassName():根据标签名来获取一组元素节点对象

document.getElementsByTagName():根据标签名来获取一组元素节点对象

getElementsXxx一系列总会返回一个类数组对象

document.getElementsByTagName(‘*’)：用来获取页面中所有的对象

document.getElementsByName():根据name属性值获取一组元素节点对象，主要用于表单项

innerHTML用来获取或设置标签内的HTML代码