好的,我将为您生成一本 Markdown 格式的学习笔记,主题是 HTML DOM 方法学习笔记。

HTML DOM 方法学习笔记

HTML DOM 方法是基于文档对象模型(DOM)的一组内置 JavaScript 函数。它们允许开发者通过 JavaScript 操作 HTML 元素和文档内容,从而实现动态的网页效果。

常用 HTML DOM 方法

在这里,我们列出几个常用的 HTML DOM 方法。

getElementById()

getElementById() 方法允许通过指定的元素 ID 获取元素。例如:

javascriptCopy Code
const element = document.getElementById("myElement");

上述代码会将 ID 为 myElement 的元素存储在变量 element 中。

getElementsByTagName()

getElementsByTagName() 方法可通过标签名获取元素。例如:

javascriptCopy Code
const elements = document.getElementsByTagName("p");

上述代码会将页面中所有 <p> 元素存储在变量 elements 中。

getElementsByClassName()

getElementsByClassName() 方法可通过类名获取元素。例如:

javascriptCopy Code
const elements = document.getElementsByClassName("myClass");

上述代码会将拥有 myClass 类名的所有元素存储在变量 elements 中。

appendChild()

appendChild() 方法可向指定元素的子节点列表末尾添加新的子节点。例如:

javascriptCopy Code
const newParagraph = document.createElement("p"); const textNode = document.createTextNode("Hello, World!"); newParagraph.appendChild(textNode); document.body.appendChild(newParagraph);

上述代码会创建新的 <p> 元素,向其中添加文本节点,并将其添加到文档的末尾。

removeChild()

removeChild() 方法可从指定元素的子节点列表中删除子节点。例如:

javascriptCopy Code
const parentElement = document.getElementById("parent"); const childElement = document.getElementById("child"); parentElement.removeChild(childElement);

上述代码会将 ID 为 child 的子元素从 ID 为 parent 的父元素中删除。

总结

以上是几个常用的 HTML DOM 方法。了解这些方法可以帮助您更好地操作 HTML 元素和文档内容,实现更动态的网页效果。