JavaScript HTML DOM元素

• 

  查找HTML元素

  通常，使用JavaScript，您希望操纵HTML元素。为此，您必须首先找到元素。做这件事有很多种方法：

  • 按ID查找HTML元素
  • 按标签名称查找HTML元素
  • 按类名查找HTML元素
  • 通过CSS选择器查找HTML元素
  • 通过HTML对象集合查找HTML元素
• 

  按ID查找HTML元素

  在DOM中查找HTML元素的最简单方法是使用元素id。此示例查找具有id="intro"以下内容的元素

  var myElement = document.getElementById("intro");

  尝试一下

  如果找到该元素，该方法将该元素作为对象返回（在myElement中）。如果找不到该元素，myElement将包含null。
• 

  按标记名称查找HTML元素

  此示例查找所有<p>元素：

  var x = document.getElementsByTagName("p");

  尝试一下

  这个例子先找到元素id="main"，然后找到里面的所有的<p>元素：

  var x = document.getElementById("main");
  var y = x.getElementsByTagName("p");

  尝试一下
• 

  按类名查找HTML元素

  如果要查找具有相同类名的所有HTML元素，请使用getElementsByClassName()。此示例返回所有元素的列表class="intro"。

  var x = document.getElementsByClassName("intro");

  尝试一下

  按类名查找元素在Internet Explorer 8和早期版本中不起作用。

• 

  通过CSS选择器查找HTML元素

  如果要查找与指定的CSS选择器匹配的所有HTML元素（id，类名，类型，属性，属性值等），请使用querySelectorAll()方法。此示例返回所有<p>元素class="intro"的列表。

  var x = document.querySelectorAll("p.intro");

  尝试一下

  querySelectorAll()方法在Internet Explorer 8和早期版本中不起作用。

• 

  通过HTML对象集合查找HTML元素

  此示例在窗体集合中查找带有的id="frm1"表单元素，并显示所有元素值：

  var x = document.forms["frm1"];
  var text = "";
  var i;
  for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "
  ";
  }
  document.getElementById("demo").innerHTML = text;

  尝试一下

  还可以访问以下HTML对象（和对象集合）：

  • document.anchors
  • document.body
  • document.documentElement
  • document.embeds
  • document.forms
  • document.head
  • document.images
  • document.links
  • document.scripts
  • document.title