DOM操作全解析：让网页交互更灵动-优快云博客

本文链接：https://blog.youkuaiyun.com/qy_hell/article/details/143496751

一、引言

在前端开发的世界里，DOM（Document Object Model，文档对象模型）操作就像是魔法棒，它能让我们随心所欲地改变网页的结构、样式和内容。今天，我们就深入探讨一下DOM操作中的几个关键部分：节点获取、节点属性修改、节点创建与插入以及CSS样式的修改。

1.getElementById
这是最常用的获取单个元素的方法。例如，如果我们有一个HTML元素

<div id="myDiv">HelloWorld</div>

在JavaScript中，我们可以使用

var myDiv = document.getElementById('myDiv');

来获取这个div元素。这个方法返回的是一个与指定id匹配的元素对象，如果没有找到则返回null。
2.getElementsByClassName
当我们想要获取具有相同类名的一组元素时就会用到它。假设我们有多个

<p class="highlight">

元素，我们可以使用

var highlights = document.getElementsByClassName('highlight');

这里要注意，它返回的是一个类数组对象（HTMLCollection），即使只有一个元素匹配，也不是一个单独的元素对象。
3.getElementsByTagName
用于获取指定标签名的所有元素。例如

var allDivs = document.getElementsByTagName('div');

会返回页面上所有的div元素。同样，返回的是HTMLCollection类型的对象。

1.修改元素的属性
假设我们有一个

< img id="myImage" src="old.jpg">

元素，想要修改它的src属性。我们可以通过先获取这个元素，然后修改其属性。如

var myImage = document.getElementById('myImage'); myImage.src = 'new.jpg';。

2.对于自定义属性

例如

<div data - custom="value">

我们可以使用getAttribute和setAttribute方法。

var div = document.getElementsByTagName('div')[0]; 
var oldValue = div.getAttribute('data - custom'); 
div.setAttribute('data - custom', 'newValue');

1.创建节点
要创建一个新的元素节点，我们可以使用document.createElement方法。例如，要创建一个新的<p>元素，可以这样做：

var newParagraph = document.createElement('p'); 
newParagraph.textContent = 'This is a new paragraph';

2.插入节点
1.有多种插入节点的方法。如果我们想要把新创建的p元素插入到另一个元素内部，假设我们有一个

<div id="container"></div>

我们可以使用appendChild方法。首先获取container元素：

var container = document.getElementById('container'); 
container.appendChild(newParagraph);

2.我们还可以使用insertBefore方法在指定元素之前插入新元素。例如，如果container元素内部已经有一个

<p id="existingParagraph">

元素，我们可以这样做：

var existingParagraph = document.getElementById('existingParagraph');
 container.insertBefore(newParagraph, existingParagraph);

1.直接修改style属性
1.对于单个元素的样式修改，我们可以直接操作元素的style属性。例如，对于

<div id="myBox">

元素，我们可以这样改变它的背景颜色：

var myBox = document.getElementById('myBox'); 
myBox.style.backgroundColor = 'red';

2.但是这种方法在处理复杂的CSS属性时可能会比较繁琐，因为我们需要按照JavaScript的命名规则来写CSS属性名（例如background - color要写成backgroundColor）。

2.修改class属性
一种更优雅的方式是通过修改元素的class属性。假设我们有一个CSS类

.highlighted { background - color: yellow; }

我们可以给元素添加或移除这个类来改变它的样式。

var element = document.getElementById('someElement'); 
element.classList.add('highlighted'); //添加类，使元素有黄色背景。

之后如果要移除这个类，可以使用

element.classList.remove('highlighted');

DOM操作是前端开发中非常重要的一部分，掌握节点获取、节点属性修改、节点创建与插入以及CSS样式的修改，能够让我们创建出更加动态、交互性更强的网页。无论是构建简单的网页效果还是复杂的单页应用，DOM操作都是我们手中强大的工具。不断地实践和探索这些操作，将有助于提升我们的前端开发技能。