【JavaWeb基础 · JavaScript--获取元素节点对象】

“这是我参与8月更文挑战的第19天，活动详情查看： 8月更文挑战”

获取元素对象的四种方式

在JavaScript中，我们可以通过DOM对象的4中方式获取对应的元素对象。

getElementById()

getElementById() 通过元素ID获取对应的元素对象，如果找不到，返回null。

var input1 = document.getElementById("input1");
alert(input1);

从图上我们可以看到是一个inpu标签。

那我们如果找不到会得到什么结果呢？

var input1 = document.getElementById("input2");
alert(input1);

getElementsByName()

getElementsByName() 通过元素的name属性获取符合要求的所有元素。用数组接收，如果找不到，返回空数组。

<input type = "text" id = "input1" />
		<input type = "checkbox" name = "hobby" value="read" />
		<input type = "checkbox" name = "hobby" value="run" />
		<input type = "checkbox" name = "hobby" value="writing" />
		<input type = "checkbox" name = "hobby" value="sing" />
		<script>
			var array = document.getElementsByName("hobby");
			alert(array.length);
		</script>

可以看到我们的到了所有名为hobby的元素对象。，这里我们使用数组来接收获取的元素对象，以后操作元素对象时，根据下标来找到所需元素对象。

那这个如果找不到会得到什么结果呢?

这里就不再是null，而是0。

getElementsByTagName()

getElementsByTagName() 通过元素的元素名属性获取符合要求的所有元素。

对于像li这样的标签，没有name属性，并且如果使用id，那每一个li标签都要写，太过麻烦，这时我们就在可以通过标签名来获取元素对象。

<ul>
			<li>JavaSE</li>
			<li>PHP</li>
			<li>C++</li>
		</ul>
		<script>
			var array = document.getElementsByTagName("li");
			alert(array.length);
		</script>

getElementsByClassName()

getElementsByClassName() 通过元素的class属性获取符合要求的所有元素。

最后就是通过class属性获取元素对象，获取样式相同的元素对象。

<input type="radio" name="sex" value="man" class="h1"/>
		<input type="radio" name="sex" value="woman" class="h1"/>
		<script>
			var array = document.getElementsByClassName("h1")
			alert(array.length);
		</script>

获取元素对象的注意事项

获取某个/某些元素对象是，必须保证元素节点对象被先加载到内存中！

写在最后

以上就是获取元素节点对象的四种方法，如有不正之处，欢迎掘友们批评指正。

动手试起来吧！