js文档基础

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
/*
		DOM是Document Object Model（文档对象模型）的简写，它表示访问和操作文档（如HTML、XML文档）的API。
		当网页被加载到客户端之后，浏览器就会调用DOM API组件，根据一定的规范解析网页文档结构，创建文档对象索引模型，
	为JavaScript访问文档提供接口和技术支持。
		DOM包含3个级别，0级、1级、2级。0级是非标准的文档对象模型，1级和2级是 W3C组织退出的完全标准的文档结构模型。
		标准文档结构模型将网页文档看作一棵树。树形结构遵循人类谱系进行标记，表示对象成员之间的关系。例如，parent(父)表示上一级元素，
	child(子)表示下一集元素，sibling(兄弟)表示同级相邻元素，借此将一个复杂的文档结构简单化。
	注意区分：元素节点，文本节点，属性节点
	为了方便用户遍历文档，获取对节点的控制，DOM提供了多个属性，这些属性可以根据节点树的结构特点准确进行定位。
		childNodes:
			该属性能够获取指定元素的多有子节点，具体返回值为一个数组。即使某个元素只有一个子节点，childNodes也返回一个节点数组而不是
		返回一个单个节点。每一个数组元素，都是一个节点对象，都有nodeType、nodeName、nodeValue属性。
		firstChild和lastChild:
			表示返回指定元素的第一个、最后一个子节点。它们返回一个节点对象的引用指针，因此自动拥有nodeType、nodeName、nodeValue属性。
		文本节点和属性节点的firstChile和lastChild属性总是返回空。
		parentNode:
			返回指定节点的父节点，该属性将放回一个节点对象的引用指针。parentNode返回的永远是一个元素节点，因为只有元素节点才能保护焊子
		节点，不过document节点没有父节点，document节点的parentNode属性返回null。
		nextSibling和previousSibling:
			nectSibling属性能够返回一个指定节点的下一个相邻节点。previousSibling属性能够返回一个指定节点的上一个相邻节点。返回的是
		一个节点对象的指针。
*/

/*
window.onload = function(){
	var tag = document.getElementsByTagName("ul")[0];
	var a = tag.childNodes;
	var str = "";
	for (var i = 0, len = a.length; i < len; i++){
		str += a[i].nodeName + ", ";	
	}
	alert(str);//#text, LI, #text, LI, #text, LI, #text, 
	//也就是说，空格内容算作是#text
}
*/

/*
nodeType
元素 1 
属性 2 
文本 3 
注释 8 
文档 9 
*/
function firstChildElemnt(tag){
	var tag = tag.firstChild;
	while (tag.nodeType != 1){
		tag = tag.nextSibling;	
	}
	return tag;
}

window.onload = function(){
	var tag = document.getElementsByTagName("body")[0];
	alert(firstChildElemnt(tag).nodeName);	//H1
}
</script>
</head>

<body>
	<h1>标准DOM</h1>
    <p>这是一份简单的<strong>文档对象模型</strong></p>
    <ul>
    <li>D表示文档，DOM的物质基础</li>
       	<li>O表示对象，DOM的思想基础</li>
        <li>M表示模型，DOM的方法基础</li>
    </ul>
</body>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//计算文档中元素节点的个数
function count(n){
	var num = 0;
	if (n.nodeType == 1) {
		num++;	
	}
	var son = n.childNodes;
	for (var i = 0; i < son.length; i++){
		num += count(son[i]);	
	}
	return num;
}
window.onload = function(){
	alert("当前文档中包含：" + count(document) + "个元素");//当前文档中包含：13个元素
}
</script>
</head>

<body>
	<h1>标准DOM</h1>
    <p>这是一份简单的<strong>文档对象模型</strong></p>
    <ul>
    <li>D表示文档，DOM的物质基础</li>
       	<li>O表示对象，DOM的思想基础</li>
        <li>M表示模型，DOM的方法基础</li>
    </ul>
</body>

猜你喜欢