操作DOM

需要知道

• 查找元素：.querySelector（）、. getElementBy（）
• 要添加元素：.createElement（）、. appendChild（），insertBefore（）、. innerHTML
• 删除元素：.remove（）、. removeChild（）

如何使用

首先在您要操作的页面上找到一个元素。您可以通过查看源HTML文件或按cmd + shift + c在页面上选择一个元素来执行此操作。

在这种情况下，我们选择<div>ID为“ dog-image-container” 的元素。为了选择此项，我们将使用querySelector并将其保存到变量中以备后用。

dogContainer = document.querySelector('#dog-image-container');

现在，我们要添加一个<h1>显示“ Dog Pics” 的元素。让我们从创建它开始。let h1 = document.createElement('h1');现在我们已经将<h1>元素存储在“ h1”变量中，让我们为其分配一些文本。h1.innerHTML = "Dog Pics";

如果您在右边的控制台中查看，您会看到我们已经在h1变量中添加了文本！但是，等等，它不在我们的页面上。这是因为创建元素不会将其包括在DOM中。为此，我们必须将h1变量附加到其父级dogContainer。有两种方法可以做到这一点; 第一种是使用appendChild方法：dogContainer.appendChild(h1);通过在父类（在本例中为dogContainer）上调用该方法，您将把子代添加到父代的末尾。如果您希望将元素放在容器顶部怎么办？有一种方法。insertBefore()有两个参数，第一个是您要插入的元素，第二个是您要插入该元素的位置。
dogContainer.insertBefore(h1,dogContainer.firstChild);

我们做到了！如果要删除刚刚创建的文本，就像在我们创建的h1变量上调用remove（）方法一样简单：h1.remove();此方法是一种快捷方式，因为它允许我们删除元素而无需寻找父元素。removeChild()但是，需要父母和孩子一起工作：dogContainer.removeChild(h1);

事件监听器

需要知道：

desiredElement.addEventListener("type of event", callBackFunction())

事件侦听器允许我们与页面进行交互。请查看MDN文档以获取可用事件的列表。为了我们的目的，我们希望能够单击我们的新“ Dog Pics”文本并将其变为红色。对我们来说幸运的是，我们所需的元素已经使用h1变量进行了定义。在回调函数中，我们定义了执行操作时发生的情况。我们需要文本变成红色。

h1.style.color = 'red';

此行代码在h1元素上调用style属性，并为其分配新的颜色红色。现在，我们拥有了拼图的所有内容来编写事件监听器：

• wantedElement = h1
• “事件类型” =“点击”
• 回调函数= h1.style.color ='红色';

h1.addEventListener("click",function(event){h1.style.color = 'red';})