经过前一周的基础 JavaScript 学习，是不是对如何在网页开发中使用它还是一头雾水？

别着急，关于如何使用 JavaScript 让我们的网页更具有交互性和更容易实现我们想要的功能，今天，我们一起来看一看。

什么是 DOM？

首先一定要认识大名鼎鼎的 DOM。

DOM（Document Object Model）即文档对象模型，是浏览器用来解析 HTML 和 XML 文档的编程接口。

它将文档表示为一个结构化的节点树，每个节点代表文档的一部分（例如元素、属性、文本等）。

有了 DOM，使用 JavaScript 来动态地访问和操作文档的内容和结构就非常方便。

DOM 的基本操作

1. 获取元素

要操作 DOM，首先需要获取我们想要操作的元素。

常用的方法有getElementById、getElementsByClassName、getElementsByTagName和querySelector等。

来看看如何使用。

<!-- 假如有这一段网页代码 --> <div id="myElement">myElement</div> <div class="myClass">myClass</div> <p ></p> 

// 通过ID获取元素 var elementById = document.getElementById('myElement');  // 通过类名获取元素 var elementsByClassName = document.getElementsByClassName('myClass');  // 通过标签名获取元素 var elementsByTagName = document.getElementsByTagName('p');  // 通过CSS选择器获取元素 var elementBySelector = document.querySelector('.myClass'); 

2. 修改元素内容

获取到元素后，我们可以使用innerHTML或textContent属性来修改元素的内容。

// 修改元素的HTML内容 elementById.innerHTML = '<p>新的内容</p>';  // 修改元素的文本内容 elementById.textContent = '新的文本内容'; 

3. 修改元素属性

可以使用setAttribute方法来修改元素的属性，或者直接通过属性名来修改。

比如，可以通过下述代码修改class属性。

// 使用setAttribute方法 elementById.setAttribute('class', 'newClass');  // 直接修改属性 elementById.className = 'newClass'; 

4. 添加和删除元素

想要动态为网页添加内容，少不了要添加或删除元素，那如何做呢？

就是使用appendChild方法来添加新的子元素，使用removeChild方法来删除子元素。

接着来看例子。

// 创建一个新的元素 var newElement = document.createElement('div'); newElement.textContent = '我是新元素';  // 添加新的子元素 elementById.appendChild(newElement);  // 删除子元素 elementById.removeChild(newElement); 

实际应用场景

简单举两个实际的例子来看看在实际的场景中，如何使用 DOM。

1. 动态生成列表

假设有一个空的ul元素，可以使用 JavaScript 动态生成列表项并添加到ul中。

<!-- 空的列表 --> <ul id="myList"></ul> 

在执行完下述代码，会是什么样呢？

var ulElement = document.getElementById('myList'); var items = ['项目1', '项目2', '项目3'];  items.forEach(function (item) {   var liElement = document.createElement('li');   liElement.textContent = item;   ulElement.appendChild(liElement); }); 

就是下面这样的代码了。

<!-- 空的列表 --> <ul id="myList">   <li>项目1</li>   <li>项目2</li>   <li>项目3</li> </ul> 

2. 表单验证

表单验证中，常在用户提交表单之前，使用 JavaScript 来验证用户输入的内容，并给出相应的提示。

<form id="myForm">   <input id="myInput" />   <!--省略其它代码--> </form> 

var formElement = document.getElementById('myForm'); formElement.addEventListener('submit', function (event) {   var inputElement = document.getElementById('myInput');   if (inputElement.value === '') {     alert('输入不能为空');     event.preventDefault(); // 阻止表单提交   } }); 

总结

• 🍑 DOM（Document Object Model）即文档对象模型，是浏览器用来解析 HTML 和 XML 文档的编程接口。

• 🍑 获取元素常用的方法有getElementById、getElementsByClassName、getElementsByTagName和querySelector等。

• 🍑 使用innerHTML或textContent属性来修改元素的内容。