让网页动起来：JavaScript DOM属性与方法深度剖析

前端

2024-02-13 07:09:53

前言

网页，作为现代生活的不可或缺的一部分，早已不仅仅是静态信息的载体。随着互联网技术的飞速发展，网页变得更加动态、更加交互。这背后离不开JavaScript DOM（文档对象模型）属性与方法的强大支持。

DOM的基本概念

DOM是W3C（万维网联盟）制定的一个标准，它定义了访问HTML和XML文档的API（应用程序编程接口）。简单来说，DOM将网页中的元素组织成一个树状结构，我们可以通过JavaScript来操作这个结构，从而实现动态网页的效果。

DOM属性

DOM属性是网页元素的固有特性，它包含了元素的一些基本信息，如ID、类名、文本内容等。我们可以通过JavaScript来获取和修改这些属性，从而改变元素的外观和行为。

1.获取属性

const element = document.getElementById('element-id');
const attributeValue = element.getAttribute('attribute-name');

2.设置属性

const element = document.getElementById('element-id');
element.setAttribute('attribute-name', 'attribute-value');

3.删除属性

const element = document.getElementById('element-id');
element.removeAttribute('attribute-name');

DOM方法

DOM方法是网页元素可以执行的操作，它允许我们对元素进行各种操作，如添加或删除元素、更改元素样式、触发事件等。

1.添加元素

const parentElement = document.getElementById('parent-element-id');
const newElement = document.createElement('new-element-tag');
parentElement.appendChild(newElement);

2.删除元素

const element = document.getElementById('element-id');
element.parentNode.removeChild(element);

3.更改元素样式

const element = document.getElementById('element-id');
element.style.backgroundColor = 'red';
element.style.color = 'white';

4.触发事件

const element = document.getElementById('element-id');
element.addEventListener('click', function() {
  // Do something when the element is clicked
});