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