本文共 1986 字，大约阅读时间需要 6 分钟。

JavaScript 中的 DOM 对象与常用事件

1. 控制 HTML 元素

在 JavaScript 中，DOM 对象允许开发者对 HTML 元素进行操作和控制。通过 DOM 对象，可以获取、修改或删除 HTML 页面中的元素及其属性。

2. 控制 HTML 元素的属性

通过 DOM 对象，可以轻松地获取和设置 HTML 元素的属性。例如，可以通过 element.attributeName 获取属性值，或 element.setAttribute(attributeName, value) 设置属性。

3. 控制 CSS

CSS 属性可以通过 JavaScript 动态修改。例如，可以通过 element.style.property = 'value' 来设置 CSS 属性，或者通过 getComputedStyle 方法获取元素的 CSS 样式信息。

4. 控制事件

事件是 JavaScript 中非常重要的功能，用于响应用户或浏览器的动作。常见的事件包括 click、mouseover、keydown、submit 等。以下是两种注册事件的方式：

注册事件的方式一：直接在标签中使用事件句柄

注册事件的方式二：使用 JavaScript 代码

var btn = document.getElementById('btn');btn.onclick = function() {    alert('按钮点击事件');};

常见 JavaScript 事件及其使用方法

1. 页面初始化事件 onload

2. 按钮点击事件 onclick

3. onchange 事件

用于响应输入字段内容改变时的事件。例如：

4. 焦点与失焦事件 onfocus 和 onblur

用于检测元素获得或失去焦点。例如：

5. 鼓励事件 onkeydown 和 onkeyup

用于检测键盘按下和松开事件。例如：

6. 鼓励事件 onmouseover 和 onmouseout

用于检测鼠标悬停和移出事件。例如：

7. 表单提交事件 onsubmit

用于响应表单提交事件。例如：

   
        ...
   

8. 键盘按下事件 onkeydown

可以通过 event.keyCode 检测特定键的按下。例如：

document.addEventListener('keydown', function(event) {    if (event.keyCode === 13) {        // 回车键按下        alert('回车键按下');    }});

创建和删除 HTML 元素

通过 DOM 方法可以创建和删除 HTML 元素。例如：

// 创建新元素var paragraph = document.createElement('p');paragraph.textContent = '这是一个新创建的段落';// 添加元素到 DOMdocument.body.appendChild(paragraph);// 删除元素document.body.removeChild(paragraph);

BOM 对象

BOM（Browser Object Model，浏览器对象模型）提供了与浏览器交互的 API。常用的 BOM 对象包括 window、screen 和 location。

1. Window 对象

用于获取和设置浏览器窗口的属性。例如：

// 获取窗口宽度和高度var width = window.innerWidth;var height = window.innerHeight;// 获得屏幕分辨率var pixelDepth = window.screen.pixelDepth;

2. Screen 对象

提供与屏幕相关的信息。例如：

// 获取屏幕可用宽度和高度var availWidth = window.screen.availWidth;var availHeight = window.screen.availHeight;

3. Location 对象

用于获取和设置当前页面的 URL。例如：

// 获取当前页面的 URLvar currentUrl = window.location.href;// 重定向到指定 URLwindow.location.href = 'https://www.example.com';

子对象

Window Screen 对象

提供与屏幕相关的信息。例如：

// 获取屏幕分辨率var colorDepth = window.screen.colorDepth;

通过以上方法，开发者可以更方便地控制和操作网页中的元素和浏览器行为。