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属性获取：getElementByName(); //name属性是可重用的，id是惟一的，所以通过getElementByName获取的是节点列表(NodeList)而不是一个节点

- 　　还有一种通过name获取标签节点的方法(不常用)：docuement.name值

通过标签名获取：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>

2.获取HTML标签的属性值

获取元素对象

操作元素属性

获取：

元素对象名.属性名//返回当前属性的属性值---固有属性
元素对象名.getAttribute("属性名");//返回自定义属性值---自定义属性，此方法也可以获取固有属性的值，但value较特殊获得的永远是默认值。

修改：

元素对象名.属性名=属性值
元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值---自定义

注意：

尽量的不要修改id和name值
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function test1(){
				var inp = document.getElementById("inp");
				alert("type:"+inp.type+" name:"+inp.name+" id:"+inp.id+" value:"+inp.value);
			}
			function test2(){
				var inp = document.getElementById("inp");
				alert("abc:"+inp.getAttribute("abc"));
				alert("value:"+inp.getAttribute("value"))//value较特殊，获取的是HTML代码中设置的默认值
			}
			function test3(){
				var inp = document.getElementById("inp");
				inp.type = "button";//改变固有属性
				//也可以使用此方法：inp.setAttribute("type","button");
				inp.setAttribute("abc","haha");
			}
		</script>
		<h2>获取标签属性</h2>
		<hr>
		<input type="button" value="获取固有标签属性 " onclick="test1()">
		<input type="button" value="获取自定义标签属性 " onclick="test2()">
		<input type="button" name="" id="" value="改变标签属性" onclick="test3()"/>
		<br>
		姓名：<input type="text" name="myinput" id="inp" value="默认值" abc="我是自定义属性的值" />
	</body>
</html>