版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cheng_cuo_tuo/article/details/86643401
<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>