JavaScript DOM基础

JavaScript DOM基础攻略

前言

文档对象模型（DOM）是HTML和XML文档的编程接口，它将可用于操作文档内容的元素定义为对象。JavaScript可以使用DOM来实现对HTML页面中各个元素的动态访问和操作，从而实现页面交互和响应。

获取元素

DOM中最常用的操作之一就是获取页面的元素，这可以通过如下方法实现：

getElementById()

该方法通过元素的id属性来获取该元素，下面是一个使用getElementById()方法来获取页面元素的示例：

const myElement = document.getElementById('my-id');

getElementsByClassName()

该方法通过类名来获取元素，如果文档中有多个指定的类名，则返回一个NodeList对象，其中列出了所有含有该类名的元素。该方法的使用示例如下：

const myElements = document.getElementsByClassName('my-class');

getElementsByTagName()

该方法通过元素的标签名来获取元素，下面是一个使用getElementsByTagName()方法来获取页面元素的示例：

const myElements = document.getElementsByTagName('div');

修改元素

DOM允许我们修改页面元素，并及时在页面上体现出来。下面是常用的元素修改方法：

innerHTML

该属性可用于修改元素的HTML内容，下面是一个使用innerHTML属性来修改元素的示例：

const myElement = document.getElementById('my-id');
myElement.innerHTML = 'Hello World';

setAttribute()

该方法用于设置指定元素的属性值，下面是一个使用setAttribute()方法来修改元素属性的示例：

const myElement = document.getElementById('my-id');
myElement.setAttribute('src', 'image.png');

classList

该属性用于改变元素的class名，可以使用add()、remove()和toggle()方法来增加、删除或切换元素的class名，下面是一个使用classList属性来修改元素类名的示例：

const myElement = document.getElementById('my-id');
myElement.classList.add('new-class');

示例一：添加图片

<div class="container">
  <h1>My First Webpage</h1>
  <p>Welcome to my webpage.</p>
  <img id="my-img" src="" alt="">
</div>

const myImg = document.getElementById('my-img');
myImg.setAttribute('src', 'image.jpg');

以上代码会将<img>元素的src属性修改为指定的图片链接，从而在页面中增加一个图片。

示例二：交互按钮

<div class="container">
  <h1>My First Webpage</h1>
  <button id="my-btn">Click Me</button>
</div>

const myBtn = document.getElementById('my-btn');
myBtn.addEventListener('click', function() {
  alert('Hello World');
});

以上代码会在按钮被点击时弹出一个包含“Hello World”信息的提示框。

结语

DOM基础的常用操作包括获取元素和修改元素，这两种操作可以用于实现页面的动态交互和响应。通过学习本文，读者可以掌握如何使用JavaScript DOM来操作页面元素，实现更好的用户体验。