11-6DOM学习总结

一、DOM:Document Object Model 文档对象模型

作用：就是将整个标记型文档及文档中的标签和标签中的所有内容封装成对象

如何将标记型文档变成对象的呢？

DOM技术就是一种解析技术。

DOM解析方式就是按照标记型文档中标签的层次关系将文档和标签封装成对象。

DOM解析方式就是将标记型文档变成一颗DOM树，树中的标签及其内容都称为节点。

DOM本身就是一种底层技术，已经内嵌到应用程序中。

DHTML（动态的HTML）：多项技术的综合简体，技术有dom css html javascript

HTML:负责提供标签封装数据

CSS：负责提供样式，页面效果

DOM：负责解析将文档以及文档中的标签都封装成为对象

Javascript:负责提供程序设计语言的逻辑性。负责的是页面行为、

二、Window对象方法及属性：

function windowdemo1(){

var name=window.navigator.appName;//获取浏览器名称

var version=navigator.appVersion;//获取浏览器运行平台和版本。

alert(name+"..."+version);

}

function windowdemo2(){

//alert(location.href);//获取整个 URL 为字符串。

location.href="www.baidu.com";//设置整个 URL 为字符串。

}

function windowdemo3(){

var b=confirm("java0917?");//显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。

alert("b="+b);

}

function windowdemo4(){

for (var x = 0; x < 900; x++) {

moveBy(20, 0);//窗口向右移20

moveBy(0, 20);//窗口向下移20

moveBy(-20, 0);

moveBy(0, -20);

}

//moveBy(20,20);//将窗口的位置移动指定 x 和 y 偏移值。

//moveTo(20,20);//将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

}

var timeid;

function windowdemo5(){

//setTimeout("alert('hello')",3000);//经过指定毫秒值后计算一个表达式。

timeid=setInterval("alert('hello')",3000);//每经过指定毫秒值后计算一个表达式。

}

function windowdemo(){

window.open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");//打开新窗口并装入给定 URL 的文档。

}

window.open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");

onload = function(){//在浏览器完成对象的装载后立即触发。

//alert("onload run");

window.open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");

}

function stopInterval(){

clearInterval(timeid);使用 setInterval 方法取消先前开始的间隔事件。

}

</script>

<!--

为了演示window对象，定义一个事件源。通过点击的方式来获取所需的效果。

-->

<input type="button" value="演示按钮" onclick="windowdemo()" />

<input type="button" value="关闭按钮" onclick="stopInterval()" />

三、Document对象：代表的就是整个标记型文档

通过document对象如何获取节点的呢？

1.getElementById 获取对ID标签属性为指定值的第一个对象的引用，返回的是该id名称一个节点对象

2.getElementsByName 根据NAME标签属性的值获取对象的集合，返回是一个具备有name属性值的节点数组

3.getElementsByTagName 获取基于指定元素名称的对象集合

<!--演示Document对象。 该对象代表的是整个标记型文档。动态效果最终是通过操作文档中的标签来实现的，所以要操作标签需要先获取该标签对象。而获取对象整个文档对象最清楚。所以document最为重要的作用就是获取页面的中的节点对象。 -->

<script type="text/javascript">

function getNode(){

/*

var divNode=document.getElementById("divid");

alert(divNode.id);

alert(divNode.innerHTML);

var userNode=document.getElementsByName("user")[0];//得到的是数组，获取数组角标为0的元素

alert(userNode.value);

var divNode=document.getElementsByTagName("div")[0];

alert(divNode.innerHTML);*/

//获取到了页面中所有的div节点。

//var divNodes = document.getElementsByTagName("div");

//for(var x=0; x<divNodes.length; x++){

//alert(divNodes[x].innerHTML);

//}

//获取表格中的div节点

/*

 *思路：

 1.先获取表格的节点

 2.通过表格节点获取div节点。 

 */

var tableNodes=document.getElementsByTagName("table")[0];

var divNodes=tableNodes.getElementsByTagName("div")[0];

alert(divNodes.innerHTML);

}

</script>

<input type="button" value="演示Document对象获取节点" onclick="getNode()"/>

function getNodeByLevel(){

/*

 * 通过节点的层次关系获取节点对象

 * 父节点:parentNode

 * 子节点：childNodes对应的是一个集合

 * 兄弟节点：

 * 上一个兄弟节点：previousSibling

 * 下一个兄弟节点：nextSibling

 */

//通过表格来演示层次关系

var tabNode=document.getElementById("tabid");

//获取父节点

var node=tabNode.parentNode;

//alert(node.nodeName);

//获取子节点

var node=tabNode.childNodes[0];

//alert(node.nodeName);

//获取上一个兄弟节点

var node=tabNode.previousSibling;

alert(node.nodeName);

//获取下一个兄弟节点

var node = tabNode.nextSibling;

alert(node.nodeName);

}