ECMASCRIPT5 DOM Document类型详解

最新推荐文章于 2024-09-15 10:02:17 发布

荆莿鸟的绝唱

最新推荐文章于 2024-09-15 10:02:17 发布

阅读量421

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/only_Love_Strangers/article/details/46596803

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<html>	
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>
			DOM Document类型详解
		</title>
		<script type="text/javascript">
				window.onload = function(){	
				/*发现document第一个子节点不是head 而是body 并且document没有head属性。
				通过查资料得到 var head = document.head||document.getElementByTagName('head')[0];
				其中html5中head是document的一个属性，而且html4用document.getElementByTagName('head')[0];获取head标签
				*/
				var html = document.documentElement;//documentElement 是<html>的引用
				alert(html === document.childNodes[0]);//true
				alert(html === document.firstChild);//true 
				/*
					documentElement 、firstChild 、childNode[0] 的值是相同的都指向<html>元素
				*/
				
				//1.文档信息
				var title = document.title;//获取文档标题
				alert(title);//DOM Document类型详解
				document.title = "我来设置文档标题";//设置文档标题
				
				var url = document.URL; //取完整的URL
				alert(url);//file:///C:/Users/Tan/Desktop/Js/DOM_Document.html
				
				//domain详解
				var domain = document.domain;//取域名 只读
				alert(domain); //因为该文件为本地学习测试的html文件，不存在域名，值为""
				//document.domain = "123.com"; //此处报错 由于安全方面的限制，
											//不能随便给domain任意值如果URL中包含包含一个子域名,
											//例如p2p.wrox.com，那么只能将domain设置为wrox.com
											//(URL中包含"www"，如www.wrox.com时，也是如此)。不能将这些属性设置<span style="white-space:pre">											</span>//为URL中不包含的域，
											//如下面例子所示
											//假设页面来自于p2p.wrox.com域
				//							document.domain = "wrox.com";//成功
				//							document.domain = "luotan.net";//出错
				/*当页面中包含其他子域的框架或者内嵌框架时，能够设置document.domain就非常方便了。							
				  由于跨域的安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每一个页面
				  的document.domain设置为相同，这些页面就可以相互访问对方所包含的JavaScript对象了。
				  例如：
				     假设有一个页面加载自www.wrox.com，其中包含一个内嵌框架，框架内的页面加载自p2p.wrox.com。
				  由于document.domain字符串不一致，内外两个页面之间无法相互访问对方的javascript对象。但如果将
				  这两个页面的document.domain值都设为wrox.com,他们之间就可以相互通信。
					 浏览器对domain属性还有一个限制，即如果域名一开始是”松散的“，那么不能将它设置为”紧绷的“。
				  换句话说，在将document.domain设置为wrox.com之后，就不能再将其设置回”p2p.wrox.com“，否则会导致
				  错误，如下面的例子所示。
				*/						
				//假设页面来自于p2p.wrox.com域
				//document.domain = "wrox.com";//松散的（成功）
				//document.domain = "p2p.wrox.com";//紧绷的（出错）
				//所有的浏览器都存在这个限制，但ie8是实现这一限制的最早IE版本。
				
				alert(document.domain);
				var referrer = document.referrer;// 取来源页面URL 只读
				alert(referrer);
				
				//2.查找元素
				/*
				 俩个方法 getElementById(), getElementsByTagName()
				 getElementById()接受一个参数：要求元素的ID。如果找到则返回该元素，
				 如果不存在该ID的元素，则返回null。
				 ID 对大小写是敏感（IE8及ID不区分大小写）。
				 例如:
					<div id="myDiv">Some text</div>
					取该元素
					var div = document.getElementById("myDiv");//取得div元素的引用。
			  */
			  
			  var imgList = document.getElementsByTagName("img");
			  /*返回一个HTMLCollection对象可以使用
				方括号语法或者item()来访问HTMLCollection
				对象中的项*/
			  alert(imgList.length);
			  alert(imgList[0].src);
			  alert(imgList.item(0).src);
			  //取得文档中所有的元素，HTMLCollection的元素是按文档中元素顺序排列。
			  //IE中取得的值包含注释（Comment），因为IE把注释实现为Element
			  var allElements = document.getElementsByTagName("*");
			  alert(allElements.length);
			  
			  //通过name属性获取元素
			  var colors = document.getElementsByName("color");
			  alert(colors.length);
			  
			  //特殊集合
			  var anchors = document.anchors;//包含文档中所有带name特性的<a>。
			  alert(anchors.length);
			  
			  var applets = document.applets;//包含文档中的所有的<applet>元素。<applet>不推荐使用，所以这个集合已经不使用。
			  alert(applets.length);
			  
			  var forms = document.forms;//包含文档中的所有的<form>元素，与document.getElementsByTagName("form");结果一样。
			  alert(forms.length);
			
			  var images = document.images;//包含文档中的所有的<img>元素，与document.getElementsByTagName("img");结果一致。
			  alert(images.length);
			  
			  var links = document.links;//包含文档中所有带herf特性的a标签。
			  alert(links.length);
			   
			  
			};
		</script>
	</head>
	<body>
		<img src ="img1"/>
		<img src ="img2"/>
		<img src ="img3"/>	

		<fieldset>
			<legend>
				Which color do you prefer?
			</legend>
			<ul>
				<li>
					<input type="radio" value="red" name="color" id="colorRed"/>
					<label for="colorRed" >Red</label>
				</li>
				<li>
					<input type = "radio" value="green" name = "color" id ="colorGreen"/>
					<label for ="colorGreen">Green</label>
				</li>
				<li>
					<input type  = "radio" value="blue" name="color" id = "colorBlue"/>
					<label for ="colorBlue">Blue</label>
				</li>
			</ul>
		</fieldset>
	</body>
	
</html>