28、讲解JavaScript DOM的概念和基本操作，包括获取元素、添加、删除、修改元素等

第28课：JavaScript DOM操作

在第27课中，我们讲解了JavaScript对象的概念和使用方法，包括属性、方法和对象字面量等。在本节课中，我们将关注JavaScript DOM操作，其中DOM表示文档对象模型，是W3C标准的一部分，描述了如何访问和操作HTML文档中的元素。

通俗的比喻，DOM就是一个HTML文档的树形结构，文档中的每个元素和属性都是树的一个节点，我们可以使用JavaScript来查询和操作这些节点，改变文档的结构和样式，实现动态交互效果。

在JavaScript中，我们可以使用document对象来表示整个HTML文档，它提供了许多方法和属性来查询和操作文档中的元素。下面让我们具体了解一些常用的DOM操作方法。

获取元素

在JavaScript中，我们可以使用getElementById()方法来根据元素的id属性获取单个元素。例如，我们可以使用以下代码获取id为“myDiv”的div元素：

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

另外，我们也可以使用getElementsByTagName()方法来根据标签名获取元素，例如获取所有的p元素：

var pList = document.getElementsByTagName("p");

除了以上方法，还有其他一些常用的获取元素的方法，例如getElementsByClassName()、getElementsByName()和querySelector()等方法。

添加、删除和修改元素

在JavaScript中，我们可以使用appendChild()方法和insertBefore()方法来添加元素。例如，我们可以使用以下代码向div元素中添加一个p元素：

var myDiv = document.getElementById("myDiv");
var p = document.createElement("p");
p.innerHTML = "Hello World!";
myDiv.appendChild(p);

另外，我们可以使用removeChild()方法和replaceChild()方法来删除和替换元素。例如，我们可以使用以下代码删除列表中的第一个li元素：

var myList = document.getElementById("myList");
var firstLi = myList.firstElementChild;
myList.removeChild(firstLi);

除了以上方法，还有其他一些常用的修改元素的方法，例如setAttribute()、removeAttribute()和classList等方法。

动态改变文档内容和样式

在JavaScript中，我们可以使用innerHTML属性来动态改变HTML文档中的内容。例如，我们可以使用以下代码将div元素中的内容修改为“Hello World!”：

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello World!";

另外，我们也可以使用style属性来动态改变元素的样式。例如，我们可以使用以下代码将div元素的背景色修改为蓝色：

var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "blue";

除了以上方法，还有其他一些常用的动态改变文档内容和样式的方法，例如setAttribute()、getAttribute()和classList等方法。

总结

在本节课中，我们讲解了JavaScript DOM操作的基本概念和常用方法，包括获取元素、添加、删除和修改元素以及动态改变文档内容和样式等。DOM操作是前端开发中非常重要的一环，希望大家认真学习和掌握，能够在实际项目中灵活运用。