学习笔记-JS公开课三

DOM技术概述

DOM : DocumentObject Model

将HTML标记型文档，封装成对象，提供更多的属性和行为

DOM的三级模型

第一级：将标记型文档，封装成对象，提供更多的属性和行为

第二级：对原有的模型，进行了升级

第三级：XML文档封装成对象

DHTML：动态HTML dynamic 四个技术的组合体

HTML：将网页中的内容，封装到标签中

CSS：层叠样式表，提供更加丰富的页面显示效果

JavaScript:负责程序设计，JS对象，函数，循环，判断，变量

DOM:把标记封装成对象，提供更多的方法和属性

DOM树：学好DOM技术，必须要掌握节点对象，他们之间的关系

使用：

<scripttype="text/javascript">

function hide(){

//实现对div框的隐藏

//通过DOM技术，找到这个div节点对象

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

//操作这个div，可以操作div的样式(CSS)

divNode.style.display="none";

}

function view(){

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

divNode.style.display="";

}

</script>

<div id="div_id"style="background-color:#3F0";>这个网页是我做的</div>

window对象中的常用方法

代表浏览器中一个打开的窗口。

window对象，随着浏览器的打开后，这个对象就建立起来了

window对象中的alert(消息)方法

调试程序，给用户进行信息的提示

var x = 10 ;

window.alert(x+20);

window对象中的confirm方法,这个方法返回一个布尔类型值，点击的是确定按钮，将反回true

Web开发中，提示用户对数据删除时候的确认

if(window.confirm("你真的要删除吗")){

document.write("用户选择是真的要删除");

window对象中的close()方法，关闭当前的页面

window对象中的open方法，打开一个网页

window.open("Sample.htm",null,

"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

window对象中的打印方法print

window对象中的setInterval 每经过指定毫秒值后计算一个表达式。定时器，定时的去执行每一个功能

window对象中的clearInterval 使用setInterval 方法取消先前开始的间隔事件。取消定时器效果

使用取消定时器方法的时候，需要传递一个ID值，这个值可以确定，取消的是哪一个定时器的效果

setInterval会返回一个整数的ID值，如果要取消这个定时器效果，可以将setInterval方法返回的ID值，传递给

clearInterval方法

例子：

varid ;

function setIntervalDemo(){

id =setInterval("alert('定时运行')",3000);

}

function clearIntervalDemo(){

clearInterval(id);

}

document对象获取节点对象

<scripttype="text/javascript">

document对象代表给定浏览器窗口中的 HTML 文档。

使用document对象，获取HTML页面中的标签节点对象，对标签节点对象进行操作

document对象获取HTML页面中的标签节点对象的三个方法

getElementById("标签节点的id属性值")

getElementsByName("标签节点的name属性")

getElementsByTagName("标签名")

function documentDemo(){

var tableNode =document.getElementById("tab_id");

//表格table对象的属性 nodeName
是标签名

// alert(tableNode.nodeName);

//对表格节点对象的style属性进行设置

tableNode.style.border = "5px solid #00FF00";

}

function documentDemo2(){

var txtNode = document.getElementsByName("txt"); //
数组

//alert(txtNode[0].nodeName);

alert(txtNode[0].value);

}

function documentDemo3(){

var tdNode =document.getElementsByTagName("td");

// alert(tdNode.length);

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

tdNode[x].style.background = "#FFFF0"+x;

}

</script>

.onediv{

width:200px;

height:100px;

border:1px solid #F00;

margin-top:20px;

}

table,td{

border:1px solid #00F;

width:200px;

margin-top:20px;

text-align:center;}

</style>

</head>

<body>

这里是一个div区域

</div>

<tr>

</tr>

<tr>

</tr>

</table>

<span>这是一个span区域</span> <br />

<a href="#">这是一个超链接</a>

</body>

DIV节点的操作

<scripttype="text/javascript">

functioncreate()

{

需求：给div添加一个文本节点

分析：

A:创建一个文本节点

B:将文件节点的值添加到指定的div区域中

//如何创建文本节点呢?

//createTextNode

vartextNode = document.createTextNode("div区域1");

//获取指定的div

vardivNode = document.getElementById("div_1");

//div对象中有这样的一个方法：appendChild给对象追加一个子元素。

divNode.appendChild(textNode);

//我想给它添加一个超链接标签行不行呢?

//createElement为指定标签创建一个元素的实例。

varaNode = document.createElement("a");

//给a标签添加文本节点

//href 设置或获取目标 URL 或锚点

aNode.href= "http://www.baidu.com";

aNode.innerText= "百度";

//把a标签节点添加到div上

divNode.appendChild(aNode);

}

functiondeleteNode()

{

需求：删除div_2的内容。

分析：

A:找到div_2节点

B:删除内容即可

//找到div_2节点

//vardivNode = byId("div_2");

//childNodes返回div的所有儿子节点

//varnodes = divNode.childNodes;

//alert(nodes[0].nodeValue);

//获取文本节点

//vartextNode = divNode.childNodes[0];

//删除文本节点

//removeChild从元素上删除子结点。

//divNode.removeChild(textNode);

需求：我要删除div_2这个节点。

分析：

A:先找到div_2的父节点

B:通过父节点删除div_2这个节点

//vardivNode = byId("div_2");

//获取该节点的父节点

//parentNode 获取文档层次中的父对象

//alert(divNode.parentNode.nodeName);

//获取到了body节点

//varbodyNode = divNode.parentNode;

//采用删除方法即可

//bodyNode.removeChild(divNode);

//节点自己删除自己

vardivNode = byId("div_2");

//删除节点

//removeNode从文档层次中删除对象

//truechildNodes collection of the object is removed.

divNode.removeNode(true);//连同儿子都干掉 IE

//divNode.remove(true);//chrome

}

functionupdate()

{

需求：用div_1把div_3给替换调用

分析：

A:获取div_1节点对象

B:获取div_3节点对象

C:用div_1节点替换div_3节点

//获取div_1节点对象

vardiv1Node = byId("div_1");

//获取div_3节点对象

vardiv3Node = byId("div_3");

//替换节点

//object.replaceNode(oNewNode)

div3Node.replaceNode(div1Node);

}

functionclone()

{

需求：用div_3替换div_4。但是还是要去div_3存在

分析：

A:获取div_3节点对象

B:获取div_4节点对象

C:把div_3的节点对象复制一份

D:用复制后的div_3节点替换div_4节点

vardiv3Node = byId("div_3");

vardiv4Node = byId("div_4");

//复制节点呢

//cloneNode从文档层次中复制对对象的引用

vardiv3Node2 = div3Node.cloneNode(true);//表示连同子节点对象一起克隆

//替换

div4Node.replaceNode(div3Node2);

}

functionbyId(id)

{

returndocument.getElementById(id);

}

</script>

</head>

<body>

<divid="div_1">

</div>

div区域2

</div>

div区域3

</div>

div区域4

</div>

<hr/>

</body>