JS的DOM_jsdom官网-CSDN博客

本文链接：https://blog.csdn.net/weixin_42760876/article/details/108037147

JS的DOM简介

DOM，全称Document Object Model 文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲地操作WEB页面。
文档
- 文档表示的就是整个HTML网页文档
对象
- 对象表示将网页中的每一部分都转换为一个对象（网页每个节点都是对象）。
模型
- 使用模型来表示对象之间的关系，这样方便获取对象。

节点

节点：Node——构成HTML文档最基本的单元。
常用节点分为四类
- 文档节点（document）：整个HTML文档
- 元素节点（Element）：HTML文档中的HTML标签
- 属性节点（Attr）：元素的属性
- 文本节点（Text）：HTML标签中的文本内容
浏览器已经为我们提供了文档节点对象：document，这个对象是window的属性（全局变量），文档节点代表整个网页，页面中可以直接使用。

试获取一个按钮：

<body>
    <button id="btn">按钮</button>
    <script type="text/javascript">
        //获取到button对象
    	var button = document.getElementById("btn");
        
        //修改按钮的文字
        button.innerHTML = "Button";
    </script>
</body>

事件

事件是文档或浏览器窗口中发生的一些特定的交互瞬间。
JavaScript和HTML之间的交互是通过事件实现的。
对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动到某个元素上、按下键盘上某个键等等。

试点击按钮做出响应：

<body>
    <button id="btn" onclick="alert('点击了按钮')">按钮</button>
    <script type="text/javascript">
        //获取到button对象
    	var button = document.getElementById("btn");
        
    </script>
</body>

在事件属性中设置js代码，我们称为结构和行为耦合，不方便维护，不推荐使用。可以为按钮的对应事件绑定处理函数的形式来响应事件。

<body>
    <button id="btn">按钮</button>
    <script type="text/javascript">
        //获取到button对象
    	var button = document.getElementById("btn");
        //绑定鼠标单击事件函数
        button.onclick = funciton() {
            alert("点击了按钮");
        }
    </script>
</body>

除了onclick还有很多这样的事件，可以看文章最后事件句柄。

文档的加载

浏览器在加载一个页面时是按照自上向下的顺序加载的，读到一行就运行一行。在代码执行时，页面还没有加载，页面没有加载则DOM对象也没有加载，会导致无法获取到DOM对象。

<head>
    <script type="text/javascript">
        //获取到button对象
    	var button = document.getElementById("btn");
        //绑定鼠标单击事件函数
        button.onclick = funciton() {
            alert("点击了按钮");
        }
    </script>
</head>

<body>
    <button id="btn">按钮</button> 
</body>

这样如果将script标签写到页面的上边，在代码执行时页面还没有加载，以上button按钮并没有加载，所以script没有找到这个标签，在开发中不要疏忽js代码位置的问题。将js代码编写到页面下部就是为了页面加载完毕以后再执行js代码。

也有将js代码写在上部的方法，整个页面加载完成也是一种事件，找到这个事件将js代码写在这里面来实现。 ——onload事件会在整个页面加载完成后才触发，该事件支持：image，layer，window。下面为window绑定一个onload事件：

<head>
    <script type="text/javascript">
        window.onload = function() {
            //获取到button对象
            var button = document.getElementById("btn");
            //绑定鼠标单击事件函数
            button.onclick = function() {
                alert("点击了按钮");
            }
        }
    </script>
</head>

<body>
    <button id="btn">按钮</button> 
</body>

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性	此事件发生在何时…
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。