在前端开发中，我们经常需要操作网页上的各种元素，比如改变文本内容、添加/删除元素、获取元素属性等。这时候就需要用到JavaScript中的DOM（Document Object Model）方法了。本文将介绍一些常用的DOM方法，并给出相应的示例代码。
获取元素
getElementById()
该方法可以通过元素的ID获取对应的元素节点，其语法如下：
document.getElementById(id)
其中，id为元素的ID值。如果找到了对应的节点，则返回该节点对象；否则返回null。
示例代码：
<div id="myDiv">Hello world!</div>
<script>
var divElement = document.getElementById("myDiv");
console.log(divElement.innerHTML); // 输出：Hello world!
</script>getElementsByClassName()
该方法可以通过元素的class名称获取对应的元素节点列表，其语法如下：
elementList = document.getElementsByClassName(className)
其中，className为元素的class名称。如果找到了对应的节点，则返回该节点对象的数组；否则返回空数组。
示例代码：
-- -------------------- ---- -------
---- --------------------- ------------
---- -------------------- --------------
--------
--- ----------- - -------------------------------------------
--- ---- - - -- - - ------------------- ---- -
--------------------------------------
-
-- ---
-- ----- ------
-- ---- --------
---------getElementsByTagName()
该方法可以通过元素的标签名获取对应的元素节点列表，其语法如下：
elementList = document.getElementsByTagName(tagName)
其中，tagName为元素的标签名。如果找到了对应的节点，则返回该节点对象的数组；否则返回空数组。
示例代码：
-- -------------------- ---- ------- ---------- ------------ ------- ------------ -------- --- ----------- - ------------------------------------- --- --------- - ----------------------------------- -------------------------------- -- ---- ------------------------------ -- ---- ---------
操作元素
createElement()
该方法可以创建一个新的元素节点，其语法如下：
newElement = document.createElement(tagName)
其中，tagName为要创建的元素的标签名。如果创建成功，则返回该元素节点对象。
示例代码：
<div id="myDiv"></div>
<script>
var newP = document.createElement("p");
newP.innerHTML = "Hello world!";
document.getElementById("myDiv").appendChild(newP);
</script>以上代码会在id为“myDiv”的元素后面添加一个含有文本内容“Hello world!”的p标签。
innerHTML
该属性可以获取或设置元素的HTML内容，其语法如下：
htmlContent = element.innerHTML element.innerHTML = newHtmlContent
其中，element为要获取/设置的元素对象，htmlContent为元素的HTML内容，newHtmlContent为要替换的HTML内容。
示例代码：
-- -------------------- ---- ------- ---- ---------------- ------------ -------- --- ---------- - --------------------------------- ---------------------------------- -- -------- ------ -------------------- - ----- ---------- ---------------------------------- -- ------- -------- ---------
removeChild()
该方法可以从父元素中删除一个子元素节点，其语法如下：
removedElement = parentNode.removeChild(childNode)
其中，parentNode为要删除的子元素的父元素对象，childNode为要删除的子元素对象。如果删除成功，则返回被删除的元素节点对象。
示例代码：
<div id="myDiv">
<p>Hello world!</p>
</div>
<script>
var pElement = document.getElementsByTagName("p")[0];
document.getElementById("myDiv").removeChild(pElement);
</script>以上代码会删除id为“myDiv”元素中的第一个p标签。
总结
本文介绍了几个常用的DOM方法，包括获取元素和操作元素。这些方法对于网页开发来说非常重要，在实际应用
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/3519
