总结：DOM 修改技术

修改现有元素

我们将介绍可以修改现有元素的各种方法:

通过设置同名的属性, 可以在元素上设置特性。例如, 要更改一个 <img>的src ：

imgEl.src = "http://www.dogs.com/dog.gif";

并且，你也可以使用 setAttribute 方法，比如：

imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");

如果想要移除特性，你可以使用removeAttribute ——比如从一个按钮上移除disabled特性，来启用它。

imgEl.removeAttribute("disabled");

访问元素的 style 属性并设置相应的特性, 可以更改样式，这就和刚才更改特性的方式一样。例如，要更改颜色：

headingEl.style.color = "hotpink";

请记得使用”驼峰式大小写“（即每一个单词的开头字母大写）来命名CSS属性名称, 因为连字符不是有效的 js 属性名称：

headingEl.style.backgroundColor = "salmon";

若要将类添加到元素里, 可以设置 className 属性:

mainEl.className = "warning";

这将覆盖任何现有类, 因此, 如果您只想添加到类列表中, 则应执行此操作：

mainEl.className += " warning";

在一些新版浏览器中 newer browsers, 你可以使用 classList 功能来代替：

mainEl.classList.add("warning");

要将元素的内容完全替换为任意字符串的 html, 请使用 innerHTML：

mainEl.innerHTML = "cats are the <strong>cutest</strong>";

如果不需要传入 html 标记, 则应改为使用textContent ：

mainEl.textContent = "cats are the cutest";

通常, 在使用这两个属性中的任何一个时都应小心, 因为它们还将删除事件侦听器 (我们将在下一个教程中教授)。

有一整套函数可用于创建全新的元素并将其添加到页面。

若要创建新元素, 请使用恰当命名的createElement:

var imgEl = document.createElement("img");

要将其追加到页面, 请在目标父元素上调用appendChild ：

document.body.appendChild(imgEl);

排序方式:

尚无帖子。