JavaScript HTML DOM_element(查找和访问html元素)

查找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>