上一篇
如何高效利用HTML实现精确获取并操作DOM节点？
在HTML中,DOM（文档对象模型）是用于访问和操作HTML文档的接口，要获取DOM节点，你可以使用多种方法，以下是一些常见的方法和示例：
使用getElementById()
getElementById()是获取DOM节点最常用的方法之一，它通过元素的ID来查找元素。
<!DOCTYPE html> <html> <head>DOM Example</title> </head> <body> <div id="myDiv">Hello, World!</div> <script> var div = document.getElementById("myDiv"); console.log(div.innerHTML); // 输出：Hello, World! </script> </body> </html>
使用getElementsByClassName()
getElementsByClassName()通过元素的类名来查找元素。
使用getElementsByTagName()
getElementsByTagName()通过元素的标签名来查找元素。
<!DOCTYPE html> <html> <head>DOM Example</title> </head> <body> <p>Hello, World!</p> <p>Hello, Again!</p> <script> var paras = document.getElementsByTagName("p"); console.log(paras.length); // 输出：2 </script> </body> </html>
使用querySelector()
querySelector()允许你使用CSS选择器来查找元素。
<!DOCTYPE html> <html> <head>DOM Example</title> </head> <body> <div id="myDiv">Hello, World!</div> <script> var div = document.querySelector("#myDiv"); console.log(div.innerHTML); // 输出：Hello, World! </script> </body> </html>
使用querySelectorAll()
querySelectorAll()与querySelector()类似，但它返回一个包含所有匹配元素的NodeList。
使用document.getElementById()
document.getElementById()是getElementById()的别名，它同样通过元素的ID来查找元素。
<!DOCTYPE html> <html> <head>DOM Example</title> </head> <body> <div id="myDiv">Hello, World!</div> <script> var div = document.getElementById("myDiv"); console.log(div.innerHTML); // 输出：Hello, World! </script> </body> </html>
使用document.getElementsByClassName()
document.getElementsByClassName()是getElementsByClassName()的别名，它通过元素的类名来查找元素。
<!DOCTYPE html> <html> <head>DOM Example</title> </head> <body> <div class="myClass">Hello, World!</div> <div class="myClass">Hello, Again!</div> <script> var divs = document.getElementsByClassName("myClass"); console.log(divs.length); // 输出：2 </script> </body> </html>
使用document.getElementsByTagName()
document.getElementsByTagName()是getElementsByTagName()的别名，它通过元素的标签名来查找元素。
<!DOCTYPE html> <html> <head>DOM Example</title> </head> <body> <p>Hello, World!</p> <p>Hello, Again!</p> <script> var paras = document.getElementsByTagName("p"); console.log(paras.length); // 输出：2 </script> </body> </html>
FAQs
Q1：如何获取HTML页面中第一个p元素的文本内容？
A1： 你可以使用getElementById()、getElementsByClassName()或getElementsByTagName()来获取第一个p元素，然后使用innerHTML属性来获取其文本内容。
<!DOCTYPE html> <html> <head>DOM Example</title> </head> <body> <p>Hello, World!</p> <p>Hello, Again!</p> <script> var para = document.getElementsByTagName("p")[0]; console.log(para.innerHTML); // 输出：Hello, World! </script> </body> </html>
Q2：如何获取HTML页面中所有class为”myClass”的元素的文本内容？
A2： 你可以使用getElementsByClassName()来获取所有class为”myClass”的元素，然后使用forEach循环来遍历这些元素并获取它们的文本内容。
<!DOCTYPE html> <html> <head>DOM Example</title> </head> <body> <div class="myClass">Hello, World!</div> <div class="myClass">Hello, Again!</div> <script> var divs = document.getElementsByClassName("myClass"); divs.forEach(function(div) { console.log(div.innerHTML); }); // 输出： // Hello, World! // Hello, Again! </script> </body> </html>
