基于JavaScript操作DOM常用的API小结

关于“基于JavaScript操作DOM常用的API小结”的攻略，我将详细讲解具体内容和应用，以下是完整的攻略过程。

1. DOM 是什么？

在我们谈论 DOM 的操作之前，先简介一下什么是DOM。DOM(Document Object Model)，文档对象模型，它是HTML和XML文档的编程接口，它将文档内容映射为一个具有层次结构的对象，可以用JavaScript和其他语言来操作这个对象，改变文档的内容和样式。

2. DOM 操作的步骤

在进行 DOM 操作之前，首先需要获取到相应的元素节点，这有两种常见的办法：

2.1. 通过元素id获取节点对象

示例代码：

var node = document.getElementById("idName");

2.2. 通过标签名获取节点对象集合

示例代码：

var nodes = document.getElementsByTagName("tagname");

获取到节点对象之后，则可以进行节点对象的属性和样式的操作。

3. DOM 操作常用 API

在 DOM 操作中，有很多常用 API，我简单列举几个重要的API：

3.1. innerHTML

innerHTML 属性可以获取或设置HTML内容，这个属性通常用于更改页面上某个元素的HTML内容，如下:

node.innerHTML = "<p>新的输入的 HTML 这里</p>";

3.2. appendChild

appendChild 方法用于在一个节点的末尾添加一个新的子节点，如下:

var newNode = document.createElement("LI");
var textNode = document.createTextNode("newText");
newNode.appendChild(textNode);
list.appendChild(newNode);

3.3. removeChild

removeChild 方法可以删除并返回指定的匹配节点, 如下:

node.removeChild(childNode);

3.4. setAttribute/ getAttribute

setAttribute 用于更改元素的某个属性值，而 getAttribute 用于获取元素的某个属性值，如下:

node.setAttribute("属性名", "属性值");

var attr = node.getAttribute("属性名");

4. 示例应用

示例 1

需求：在一个 ol 列表中，添加一个新的 li 元素

示例代码：

<ol id="myList"></ol>

var list = document.getElementById("myList");
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Water");
newItem.appendChild(textnode);
list.appendChild(newItem);

示例 2

需求：为表单中的输入框添加 placeholder 属性

示例代码：

<input type="text" id="myInput">

var input = document.getElementById("myInput");
input.setAttribute("placeholder", "请输入内容");

至此，对于“基于JavaScript操作DOM常用的API小结”的攻略过程，我已经讲解了DOM、DOM操作的步骤、操作常用的API和两个示例的应用。希望对您有所帮助。