21xrx.com
2024-12-22 21:33:19 Sunday
登录
文章检索 我的文章 写文章
JavaScript DOM 基本功能解析与示例
2023-06-11 14:15:11 深夜i     --     --
JavaScript DOM

JavaScript DOM (Document Object Model)，即文档对象模型，是一个与 HTML 或 XML 文档交互的 API。通过 DOM，JavaScript 脚本可以读取、改变和删除 HTML 中的任何元素。

DOM 操作是 Web 前端开发中非常重要的一环。下面我将为大家讲解 JavaScript DOM 的基本功能及其应用。

## JavaScript DOM 基本功能

### 1. 获取元素

使用 `document.getElementById` 方法，我们可以通过给元素设置一个 `ID` 属性，通过 JavaScript 获取这个具体的元素。

script

let element = document.getElementById("myId");

### 2. 改变元素的内容或属性

通过 `innerHTML` 属性我们可以改变元素的内容。比如以下代码可以将 `div` 元素的内容改为“Hello World”。

script

let element = document.getElementById("myId");


element.innerHTML = "Hello World";

同样的，我们可以通过 `setAttribute` 方法改变元素的属性。

script

let element = document.getElementById("myId");


element.setAttribute("src", "newImage.jpg");

### 3. 事件处理

通过 JavaScript DOM，我们还可以对元素的事件进行处理。例如以下代码可以在 `button` 被点击时弹出一个警告框。

script

let button = document.getElementById("myButton");


button.onclick = function() {


 alert("Hello World");


}

## JavaScript DOM 应用

JavaScript DOM 是关于网页开发很重要的一部分，应用非常广泛。以下是一些常见的使用场景。

### 1. 动态创建和修改网页元素

JavaScript DOM 允许我们动态地创建 HTML 元素并将它们添加到网页中。以下是一段代码可以动态的在网页中创建一个新的 `div` 元素。

script

let newDiv = document.createElement("div");


newDiv.innerHTML = "Hello World";


document.body.appendChild(newDiv);

### 2. 做出响应式网页

JavaScript DOM 可以帮助我们检测网页的变化并进行适当的操作。例如以下代码可以在窗口大小改变时修改网页的背景色。

script

window.onresize = function() {


 let width = window.innerWidth;


 if (width < 768)


  document.body.style.backgroundColor = "blue";


  else


  document.body.style.backgroundColor = "white";


 


}

### 3. 表单验证

JavaScript DOM 可以帮助我们验证用户在表单中输入的数据，例如以下代码可以检测用户输入的电子邮箱是否符合格式要求。

script

let emailInput = document.getElementById("email");


emailInput.onblur = function() {


 let email = emailInput.value;


 if (!email.match(/\S+@\S+\.\S+/)) {


  alert("Invalid email address");


 }


}

## 关键词

JavaScript DOM、HTML、元素获取、内容修改、属性操作、事件处理、动态创建元素、响应式网页、表单验证。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复