DOM中访问 HTML 元素（节点）的方法_通过dom访问html文档节点-优快云博客

本文链接：https://blog.youkuaiyun.com/ANGWH/article/details/103757468

访问元素（节点）的方法：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>DOM</title>
	</head>
	<body>
		<div id="nav">今天真是个睡觉的好日子</div>
		<ul>
			<li class="active">1</li>
			<li>2</li>
			<li class="active">3</li>
			<li>4</li>
		</ul>
		<input type="radio" name='sex' value="1">男
		<input type="radio" name='sex' value="0">女
	</body>
</html>

其中有三个元素html、head、body不需要找，分别可以直接用表示：

<script>
	var html = document.documentElement;  	
	var head = document.head;  
	var body = document.body;   
</script>

getElementById() 方法

只能通过document调用
getElementById() 方法返回带有指定 id 的元素：


	<script>
		var box = document.getElementById("nav"); 
	</script>

getElementsByTagName() 方法

定义在Document.prototype和Element.prototypes上
getElementsByTagName() 返回带有指定标签名的所有元素,查找的是一个子元素对象集合


	<script>
		var oLi = document.getElementsByTagName("li"); //HTMLCollection(4) [li, li, li, li]
	</script>

getElementsByClassName() 方法

getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
返回带有指定 calss属性的元素对象


	<script>
		var oLi = document.getElementsByClassName("active"); //HTMLCollection(2) [li.active, li.active]
	</script>

getElementsByName() 方法

getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
返回带有指定 name属性的元素对象

<script>
	var sex = document.getElementsByName("sex"); //NodeList(2) [input, input]
</script>