DOM后续之Document

Document类型
Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

1.1文档子节点
   可以继承Node中所有的属性和方法
   属性：
   documentElement   始终指向HTML页面中的<html>元素。
   body       直接指向<body>元素
   doctype       访问<!DOCTYPE>, 浏览器支持不一致，很少使用
   title           获取文档的标题
   URL           取得完整的URL
   domain       取得域名，并且可以进行设置，在跨域访问中经常会用到。
   referrer   取得链接到当前页面的那个页面的URL，即来源页面的URL。
   @domain和referrrer需要部署到服务器上才能看到。
   images       获取所有的img对象，返回HTMLCollection类数组对象
    forms       获取所有的form对象，返回HTMLCollection类数组对象
   links          获取文档中所有带href属性的<a>元素
1.2查找元素的方法

getElementById() 返回元素/null

参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。
getElementsByTagName() 返回类数组对象

       参数为要取得元素的标签名，返回包含另个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问
   getElementsByName()            返回类数组对象
       参数为元素的name,返回符合条件的HTMLCollection
   getElementsByClassName()        返回类数组对象
       参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个。

这几个方法中：后三个是返回类数组对象，特别的是在使用这三种方式时需要在后面加'.[index]'，否则就无法准确指向某一选定元素。

下面举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>element</title>
	<script>
	window.onload=function(){
		var a=document.getElementById('one');
		var btns=document.getElementsByClassName('an');
                btns[0].onclick=function(){
				alert(1);
			}
	}
	</script>
</head>
<body>
<button class="an">按钮1</button>
<button class="an">按钮2</button>

	</div>
	
</body>
</html>

猜你喜欢