15 document对象 | 易学教程

document对象

document对象可以说是window对象的一个属性，可以通过window.document来调用，也可以省略window直接写document。

document对象是浏览器生成的一个对象。我们这样来理解:

HTML语言与JavaScript语言是两门不同的语言，它们不能直接交互，就需要一个中间介质，而这个介质就是document。浏览器提供的document对象，它封装了整个HTML文档为一个对象，是一个树结构的对象，就像xml一样。所以我们可以把document对象看做HTML的一个模子，HTML中的每一个标签对应着document中的一个节点，节点也是一个对象。所以整个document就是一个大的对象，它提包含了这个HTML文件中的所有标签对象。

浏览器加载HTML文件到内存中，通过js代码与document对象的交互实现对HTML页面的动态改变。

document的方法使用

1.获取html中的节点（标签）的方法

直接获取方式

通过标签的id获取：getElementById("标签名");获取标签节点对象
通过标签name属性获取：name属性是可重用的，id是惟一的，所以通过getElementByName获取的是节点列表而不是一个节点<br>
通过标签名获取：getElementByTagName();
通过类名获取：getElementByClassName();

间接获取方式

父子关系获取
- 　　从父节点获取子节点：父节点变量.childNotes;
- 　　从子节点获取父节点：子节点变量.parentNote;
兄弟关系获取:只能获取同级的标签节点，如没有则为null
- 　　上一个兄节点：子节点变量.previousElementSibling;
- 　　下一个兄节点：子节点变量.nextElementSibling;

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>document节点获取</title>
	</head>
	<body>
		<!-- 
		 
		 -->
		 <script type="text/javascript">
		 	function byIdTest(){
				var byId = document.getElementById("button1");
				alert(byId);
			}
			function byNameTest(){
				var byName = document.getElementsByName("button2");
				alert(byName+" 长度为："+byName.length);
			}
			function byTagNameTest(){
				var tagName = document.getElementsByTagName("a");
				alert(tagName+" 长度为："+tagName.length);
			}
			function byClassNameTest(){
				var className = document.getElementsByClassName("navi");
				alert(className+" 长度为："+className.length);
			}
			function getSonTest(){
				var father = document.getElementById("father");
				var childs = father.childNodes;
				alert(childs+" 子节点数量："+childs.length+" 子节点包括标签和标签之间的文本")
			}
			function getFatherTest(){
				var son = document.getElementById("son1");
				var father = son.parentNode;
				alert(father+" 节点的标签名:"+father.tagName)
			}
			function preBrother(){
				var me = document.getElementById("son1");
				var preBro = me.previousElementSibling;//sibling即兄妹的意思
				alert(preBro +" 很明显第一个li标签没有上一个兄弟元素所以为空");
			}
			function nextBrother(){
				var me = document.getElementById("son1");
				var nextBro = me.nextElementSibling;
				alert(nextBro);
			}
		 </script>
		 <style type="text/css">
		 	#father{
				border:red 1px solid;
			}
		 </style>
		 <h1>document节点获取</h1>
		 <hr>
		 <h3>直接获取方式</h3>
		 <button type="button" onclick="byIdTest()" value="byId获取" id="button1">byId获取</button><br>
		 name属性是可重用的，id是惟一的，所以通过getElementByName获取的是节点列表而不是一个节点<br>
		 <button type="button" onclick="byNameTest()" value="byName获取" name="button2">byName获取</button><br>
		 通过标签名获取<br>
		 <button type="button" onclick="byTagNameTest()">byTagName获取</button>
		 <a href=""></a><br>
		 通过类名获取<br>
		 <a href="" class = "navi"></a>
		 <button type="button" onclick="byClassNameTest()">byClassName获取</button>
		 <h3>间接获取方式</h3>
		 <h4>父子关系获取</h4>
		 <ul id="father">
			 <li id="son1">子1</li>
			 <li>子2</li>
			 <li>子3</li>
		 </ul>
		 从父节点获取子节点<br>
		 <button type="button" onclick="getSonTest()">获取子节点</button><br>
		 从子节点获取父节点<br>
		 <button type="button" onclick="getFatherTest()">获取父节点</button>
		 <h4>兄弟关系获取:上一个节点与下一个节点</h4>
		 <button type="button" onclick="preBrother()">上一个兄弟</button>
		 <button type="button" onclick="nextBrother()">下一个兄弟</button>
	</body>
</html>

来源：https://www.cnblogs.com/Scorpicat/p/12217185.html

标签

html代码

html语言

html文件