在 web 开发中,JavaScript 通常用于操作 HTML 文档对象模型(DOM),通过 JavaScript 操作 DOM 可以实现动态的网页交互效果。本章节将介绍一些常见的 JavaScript HTML DOM 操作实例。
获取元素
在 JavaScript 中,我们可以使用 document.getElementById()
方法来获取指定 id 的元素,例如:
--- ------- - -------------------------------------
除了使用 id,我们还可以使用 document.getElementsByClassName()
和 document.getElementsByTagName()
方法来获取元素,例如:
--- -------- - ------------------------------------------- --- -------- - -------------------------------------
操作元素内容
可以使用 innerHTML
属性来获取或设置元素的 HTML 内容,例如:
--- ------- - ------------------------------------- ----------------- - ------- --------
如果要获取或设置元素的文本内容,可以使用 innerText
属性,例如:
--- ------- - ------------------------------------- ----------------- - ------- --------
添加元素
可以使用 createElement()
方法创建新的元素,然后使用 appendChild()
方法将其添加到指定元素中,例如:
--- ---------- - ------------------------------ -------------------- - ------- -------- --------------------------------------
删除元素
可以使用 removeChild()
方法从父元素中删除指定的子元素,例如:
--- ------- - ------------------------------------- ----------------------------------------
修改样式
可以使用 style
属性来修改元素的样式,例如:
--- ------- - ------------------------------------- ------------------- - ------ ---------------------- - -------
以上是一些常见的 JavaScript HTML DOM 操作实例,希望可以帮助你更好地理解如何使用 JavaScript 操作 DOM。