【JavaScript】DOM操作---常用属性详解及修改方法

在前端开发中，DOM（Document Object Model）是一个非常重要的概念，它允许开发者通过JavaScript与HTML页面交互，动态地修改页面元素。操作DOM元素的属性是常见的任务之一，如修改超链接的href属性、图片的src属性等。本文将详细介绍DOM操作中一些常用的元素属性及其修改方法，帮助开发者在项目中高效处理DOM元素。

一、DOM操作概述

1. 什么是DOM

DOM（文档对象模型）是HTML和XML文档的编程接口。它将文档解析为树形结构，其中每个节点代表文档的一部分，如标签、属性或文本。通过JavaScript，我们可以动态地操作这些节点，以修改页面内容、样式或行为。

2. 元素属性的作用

在HTML中，属性用于描述元素的附加信息，比如链接的URL、图像的路径或输入框的默认值等。我们可以通过JavaScript动态地读取、修改这些属性，从而实现更灵活的用户交互体验。

二、常用元素属性及修改方法

1. href 属性

(1) 属性介绍

href是超链接（<a>标签）中最常用的属性，它指定了链接的目标URL。当用户点击链接时，浏览器会导航到指定的地址。

(2) 如何读取和修改href属性

JavaScript 提供了多种方式来读取和修改href属性，最常见的方法是使用getAttribute()和setAttribute()，或者直接通过element.href进行操作。

// 获取超链接的 href 属性
let link = document.querySelector('a');
console.log(link.getAttribute('href')); // 或者直接使用 link.href

// 修改 href 属性
link.setAttribute('href', 'https://new-url.com'); // 或者直接使用 link.href = 'https://new-url.com';

(3) 示例

<a id="myLink" href="https://example.com">访问示例网站</a>
<script>
  let link = document.getElementById('myLink');
  // 修改 href 属性为新的URL
  link.href = "https://new-example.com";
</script>

当用户点击该链接时，会导航到https://new-example.com。

2. src 属性

(1) 属性介绍

src属性用于指定图像、脚本、iframe等元素的源URL。浏览器会根据该属性加载资源，如图像或脚本文件。

(2) 如何读取和修改src属性

与href属性类似，src属性也可以通过getAttribute()和setAttribute()或直接使用element.src来读取和修改。

// 获取图像的 src 属性
let img = document.querySelector('img');
console.log(img.getAttribute('src')); // 或者直接使用 img.src

// 修改 src 属性
img.setAttribute('src', 'https://new-image-url.com/image.jpg'); // 或者直接使用 img.src = 'https://new-image-url.com/image.jpg';

(3) 示例

<img id="myImage" src="image.jpg" alt="图片示例">
<script>
  let image = document.getElementById('myImage');
  // 修改 src 属性
  image.src = "https://new-image-url.com/new-image.jpg";
</script>

加载的新图像将会替换原来的图片。

3. title 属性

(1) 属性介绍

title属性为HTML元素提供了额外的信息，当用户将鼠标悬停在元素上时，浏览器会显示一个提示文本。几乎所有HTML元素都可以使用title属性。

(2) 如何读取和修改title属性

可以通过getAttribute()和setAttribute()或element.title来读取和修改title属性。

// 获取 title 属性
let element = document.querySelector('div');
console.log(element.getAttribute('title')); // 或者直接使用 element.title

// 修改 title 属性
element.setAttribute('title', '新的提示文本'); // 或者直接使用 element.title = '新的提示文本';

(3) 示例

<div id="myDiv" title="这是一个提示文本">悬停在此处查看提示</div>
<script>
  let div = document.getElementById('myDiv');
  // 修改 title 属性
  div.title = "新的提示文本";
</script>

当用户将鼠标悬停在该div上时，会显示"新的提示文本"。

4. alt 属性

(1) 属性介绍

alt属性用于<img>标签中，为图像提供替代文本。当图像无法加载时，浏览器会显示该替代文本。该属性对SEO和无障碍访问非常重要。

(2) 如何读取和修改alt属性

与其他属性类似，alt属性也可以通过getAttribute()和setAttribute()或element.alt来读取和修改。

// 获取 alt 属性
let img = document.querySelector('img');
console.log(img.getAttribute('alt')); // 或者直接使用 img.alt

// 修改 alt 属性
img.setAttribute('alt', '新的替代文本'); // 或者直接使用 img.alt = '新的替代文本';

(3) 示例

<img id="myImage" src="image.jpg" alt="原始替代文本">
<script>
  let image = document.getElementById('myImage');
  // 修改 alt 属性
  image.alt = "新的替代文本";
</script>

如果图像加载失败，将显示"新的替代文本"。

三、其他常用属性

1. value 属性

value属性主要用于表单元素，如输入框（<input>）、选择框（<select>）、文本区域（<textarea>）。它表示用户输入或选择的值。

// 获取和修改 input 的 value 属性
let input = document.querySelector('input');
console.log(input.value); // 获取当前的值

input.value = "新值"; // 设置新的值

2. class 属性

class属性允许为HTML元素设置CSS类，用于控制样式或添加交互行为。可以通过element.className或classList进行操作。

let div = document.querySelector('div');

// 获取 class 属性
console.log(div.className);

// 修改 class 属性
div.className = "new-class";

classList方法提供了更丰富的操作方式，如添加、删除、切换类：

div.classList.add('new-class');
div.classList.remove('old-class');
div.classList.toggle('active');

3. style 属性

style属性允许直接在元素上设置内联样式。虽然不建议大量使用内联样式，但在某些动态场景中是非常有用的。

let div = document.querySelector('div');

// 设置背景颜色
div.style.backgroundColor = "blue";

四、注意事项

1. 使用getAttribute()和setAttribute()的区别

虽然可以直接使用element.href或element.src来获取和设置属性值，但在某些情况下（如自定义属性或非标准属性），使用getAttribute()和setAttribute()更为合适。它们提供了更广泛的属性操作支持。

2. DOM操作的性能考虑

频繁操作DOM会导致页面重绘（Repaint）或重排（Reflow），影响性能。为了提高性能，建议将多次DOM操作合并为一次，或使用虚拟DOM等技术减少直接操作。

五、总结

DOM操作中的元素属性是前端开发中不可或缺的部分，熟悉并掌握这些常用属性的读取和修改方法，有助于开发者创建更动态、更交互的网页。在实际开发中，灵活使用这些方法可以提升用户体验和开发效率。

推荐：

• JavaScript
• react
• vue

---