Javascript——查找html元素的方法

javascript通过dom可以访问html文档的所有元素。

它可以改变页面中所有的html元素、能够改变页面中所有的html属性、还可以改变所有css属性以及对页面中的所有事件做出反应。

以下归纳访问html元素的几种方法：

先看以下简单例子

<!DOCTYPE html>
<html>
<body>
	<div class="hi">
	<p class="hi" name="hi" id="hi">hello</p><br>
	</div>
</body>

假设我们要通过javascript获取页面中p标签内的文本内容，并将它显示于页面上

<script>
	var x=document.getElementById("hi");
	console.log(x);
	document.write("通过javascript获取内容为："+x.innerHTML);
</script>

<script>
	var x=document.getElementsByClassName("hi");
	console.log(x);
	document.write("通过javascript获取内容为："+x[1].innerHTML);
</script>

分析：这里getElementsByClassName获取得到的是一个数组

其中x[0]为

<div class="hi">
	<p class="hi" name="hi" id="hi">hello</p><br>
</div>

x[1]为

<p class="hi" name="hi" id="hi">hello</p><br>

<script>
	var x=document.getElementsByTagName("p");
	console.log(x);
	document.write("通过javascript获取内容为："+x[0].innerHTML);
</script>

分析：这里getElementsByTagName获取的也是数组，不过只包含一个元素

x[0]为

<p class="hi" name="hi" id="hi">hello</p><br>

<script>
	var x=document.getElementsByName("hi");
	console.log(x);
	document.write("通过javascript获取内容为："+x[0].innerHTML);
</script>

分析：这里getElementsByName获取的也是数组，只包含一个元素

x[0]为

<p class="hi" name="hi" id="hi">hello</p><br>