HTML DOM 使用方法

使用 HTML DOM - 查找 HTML 元素。


查找 HTML 元素(节点)

查找 HTML 元素等同于查找节点

您能够以不同的方式来查找 HTML 元素:

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素:

语法
  1. node.getElementById("id");

下面的例子获取 id="intro" 的元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="intro">Hello World!</p>
  5. <p>本例演示 <b>getElementById</b> 方法!</p>
  6. <script>
  7. x=document.getElementById("intro");
  8. document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");
  9. </script>
  10. </body>
  11. </html>

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

语法
  1. node.getElementsByTagName("tagname");

下面的例子返回包含文档中所有 <p> 元素的列表:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>Hello World!</p>
  5. <p>DOM 很有用!</p>
  6. <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
  7. <script>
  8. x=document.getElementsByTagName("p");
  9. document.write("第一段的文本: " + x[0].innerHTML);
  10. </script>
  11. </body>
  12. </html>

下面的例子返回包含文档中所有 <p> 元素的列表,并且这些 <p> 元素应该是 id="main" 的元素的后代(子、孙等等):

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>Hello World!</p>
  5. <div id="main">
  6. <p>DOM 很有用!</p>
  7. <p>本例演示 <b>getElementsByTagName</b> 方法。</p>
  8. </div>
  9. <script>
  10. x=document.getElementById("main").getElementsByTagName("p");
  11. document.write("div 中的第一段的文本: " + x[0].innerHTML);
  12. </script>
  13. </body>
  14. </html>

getElementsByClassName() 方法

如果您希望查找带有相同类名的所有 HTML 元素,请使用这个方法:

  1. document.getElementsByClassName("intro");

上面的例子返回包含 class="intro" 的所有元素的一个列表:

注释:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

分类导航