JavaScript HTML DOM

查找HTML元素

通常，使用JavaScript，您需要操作HTML元素。

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

ID

在DOM中找到HTML元素的最简单方法是使用元素ID。

如果找到该元素，则该方法将把该元素作为对象返回。 如果找不到该元素，则myElement将包含null。

<p id="intro">Hello World!</p> <p id="demo"> </p> <!--Script to uses innerHTML --> <script> var myelement=document.getElementById("intro"); document.getElementById("demo").innerHTML="The text from the intro paragraph is "+myelement.innerHTML; </script>

TagName

通过标签名称查找HTML元素

<p id="intro">Hello World!</p> <p>this example demonstrates the <b>getElementsByTagName</b> method.</p> <p id="demo"> </p> <!--Script to uses innerHTML --> <script> var x=document.getElementsByTagName("p"); document.getElementById("demo").innerHTML="the text in first paragraph (index 1) is: "+x[1].innerHTML;

本示例查找id =“ main”的元素，然后查找“ main”内的所有

元素：

<div id="main"> <p>The dom is very useful.</p> <p>this example demonstrates the <b>getElementsByTagName</b> method.</p> <p id="demo"> </p> </div> <!--Script to uses innerHTML --> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.getElementById("demo").innerHTML="the text in first paragraph (index 0) is: "+y[0].innerHTML;

className

如果要查找具有相同类名的所有HTML元素，请使用getElementsByClassName（）。

<div id="main"> <p class="intro">The dom is very useful.</p> <p class="intro">this example demonstrates the <b>getElementsByTagName</b> method.</p> <p id="demo"> </p> </div> <!--Script to uses innerHTML --> <script> var x=document.getElementsByClassName("intro"); document.getElementById("demo").innerHTML= "the text in first paragraph (index 0) with class=\"intro\" is: "+x[0].innerHTML;

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

CSS Selectors

如果要查找与指定CSS选择器匹配的所有HTML元素（ID，类名，类型，属性，属性值等），请使用querySelectorAll（）方法。

<div id="main"> <p class="intro">The dom is very useful.</p> <p class="intro">this example demonstrates the <b>getElementsByTagName</b> method.</p> <p id="demo"> </p> </div> <!--Script to uses innerHTML --> <script> var x=document.querySelectorAll("p.intro"); document.getElementById("demo").innerHTML= "the first paragraph (index 0) with class=\"intro\" is: "+x[0].innerHTML; </script>

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

<form id="form1" action="" > First name:<input type="text" name="firstname" value="Donald"><br> Last name:<input type="text" name="lastname" value="Duck"><br> <p>Click "try it" to display the value of each element in the form.</p> <button onclick="myFunction()">Try it</button> </form> <p id="demo"> </p> <!--Script to uses innerHTML --> <script> function myFunction(){ var x=document.forms["form1"]; var text=""; var i; for(i=0;i<x.length;i++) { text+=x.elements[i].value+"<br>"; } document.getElementById("demo").innerHTML=text; } </script>