Document类型

JavaScript 通过 Document 类型表示文档。在浏览器中，表示整个 HTML 页面。
document 对象是 window 对象的一个属性，因此可以将其作为全局对象来访问。

节点特征

nodeType 的值为 9;
nodeName 的值为”#document”;
nodeValue 的值为 null;
parentNode 的值为 null;
ownerDocument 的值为 null;
其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction

或 Comment。

console.log(document);

两个内置的访问其子节点的快捷方式：

documentElement 属性，该属性始终指向 HTML 页面中的元素。
childNodes 列表访问文档元素，但通过 documentElement 属性则能更快捷、更直接地访问该元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script type="text/javascript">
			
			//document.write("hello");
			
			console.log(document);
			
			//子节点
			console.log(document.documentElement); //HTML节点 (元素)
			console.log(document.firstElementChild); //HTML节点 (元素)
			console.log(document.childNodes[1]);   //HTML节点(元素)
			
			console.log(document.childNodes[0]);   //文档类型
			console.log(document.firstChild);  //文档类型  (节点)
			console.log(document.doctype);   //文档类型  (节点)
			
			
		</script>
	</head>
	<body>
		<p> hello</p>
		
		<script type="text/javascript">
			console.log(document.body);   //获取body
			console.log(document.childNodes[1].childNodes[2]);   //获取body
			console.log(document.documentElement.getElementsByTagName("body"))  //获取body
		</script>
	</body>
</html>

文档信息

//文档信息
console.log(document.title);   //获取标题信息
document.title  = "hello world";     //修改标题
console.log(document.title);

console.log("网站URL  " + document.URL);   //获取网址
console.log(document.URLUnencoded);

console.log("网站域名 " + document.domain);

//最好不要改网站的域名
//document.domain = "123.123.123.123";
//console.log(document.domain);

console.log(document.referrer);

查找元素

getElementById()
- 接收一个参数:要取得的元素的 ID。
- 如果找到相应的元素则返回该元素，如果不存在带有相应 ID 的元素，则返回 null。
- ID 必须与页面中元素的 id 严格匹配，包括大小写。
- 如果页面中多个元素的 ID 值相同，getElementById()只返回文档中第一次出现的元素
getElementsByTagName()。
- 这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的 NodeList。
- 要想取得文档中的所有元素，可以向 getElementsByTagName()中传入”*"。
getElementsByName()。
- 返回带有给定 name 特性的所有元素。
- 最常使用 getElementsByName()方法的情况是取得单选按钮;
- 为了确保发送给浏览器的值正确无误，所有单选按钮必须具有相同的 name 特性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="test">
			hello world!
		</div>


		<div id="tast">
			hello world1!
		</div>
        
		<div class="tast" name="abc">
			hello world2!
		</div>		
		
		<script>
			
			//通过ID获取元素
			var test = document.getElementById("test");
			console.log(test.innerHTML);
			
			
			//通过标签名获取元素
			var test = document.getElementsByTagName("div");
			console.log(test[1].innerHTML);
			
			
			//通过类名称获取元素
			var test = document.getElementsByClassName("tast");
			
			console.log(test[0].innerHTML);
			
			//通过name属性获取元素
			var test = document.getElementsByName("abc");
			console.log(test[0].innerHTML);
			
			
		</script>
	</body>
</html>

扩展

document.anchors，包含文档中所有带 name 特性的元素;

document.forms，包含文档中所有的

document.images，包含文档中所有的元素，

document.links，包含文档中所有带 href 特性的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="www.baidu.com" name="test1"></a>
		<a href="www.baidu.com" name="test2"></a>
		<a href="www.baidu.com" name="test3"></a>
		
		
		
		<form>
			<input type="button" name="abc" />
			<input type="button" name="abc1" />
			<input type="button" name="abc2" />
			<input type="button" name="abc3" />
		</form>
		
		
		<img src="../../01/../images/01.png" />
		
		<script>
			
			//获取所有带有name属性的a标签
			var test = document.anchors;
		    console.log("此页面共有 " + document.anchors.length + "个a标签")	
			
			for (i=0; i<document.anchors.length;i++){
			
			   console.log("第" + i + "个name属性的值是: " + test[i].name);
			}
			
			
			//获取form标签
		
			var test = document.forms;
			console.log("此页面共有 " + document.forms.length + "个form元素");
			
			if (document.forms.length == 1 ){
				console.log("此form共有 " + test[0].length + "个元素");
				
				for (i=0; i<test[0].length; i++){
					console.log("第" + i + "个元素类型是: " + test[0][i].type +"名称：" + test[0][i].name );
				}
			}
			
			
			//获取images标签
			console.log(document.images[0].src);
			
			//获取所有带有href属性的a标签
			
			var test = document.links;
			//console.log(document.links);
			
			console.log("此页面共有 " + document.links.length + "个a标签")
			
			for (i=0; i<document.links.length;i++){
			
			   console.log("第" + i + "个href属性的值是: " + test[i].href);
			}
			
		</script>
	</body>
</html>

实验效果

此页面共有 3个a标签
03.html:32 第0个name属性的值是: test1
03.html:32 第1个name属性的值是: test2
03.html:32 第2个name属性的值是: test3
03.html:39 此页面共有 1个form元素
03.html:42 此form共有 4个元素
03.html:45 第0个元素类型是: button名称：abc
03.html:45 第1个元素类型是: button名称：abc1
03.html:45 第2个元素类型是: button名称：abc2
03.html:45 第3个元素类型是: button名称：abc3
03.html:51 http://127.0.0.1:8848/web%E5%89%8D%E7%AB%AF%E6%95%99%E7%A8%8B/JavaScript%E6%95%99%E7%A8%8B/01/../images/01.png
03.html:58 此页面共有 3个a标签
03.html:62 第0个href属性的值是: http://127.0.0.1:8848/web%E5%89%8D%E7%AB%AF%E6%95%99%E7%A8%8B/JavaScript%E6%95%99%E7%A8%8B/codes/08/www.baidu.com
03.html:62 第1个href属性的值是: http://127.0.0.1:8848/web%E5%89%8D%E7%AB%AF%E6%95%99%E7%A8%8B/JavaScript%E6%95%99%E7%A8%8B/codes/08/www.baidu.com
03.html:62 第2个href属性的值是: http://127.0.0.1:8848/web%E5%89%8D%E7%AB%AF%E6%95%99%E7%A8%8B/JavaScript%E6%95%99%E7%A8%8B/codes/08/www.baidu.com