java学习笔记33

来源：互联网发布：知乎女友智障编辑：程序博客网时间：2024/06/05 17:32

1、DOM : Document Object Model(文档对象模型)

当遇见html文档时，游览器用DOM技术对其解析，先将文档封装对象（命名为document），

通过将文档解析为DOM树，就可以很方便的操作文档中的标签。为实现动态页面做出了贡献。

2、DOM解析和SAX解析

3、DOM的三级模型

名称空间可以使域名（不管这个域名存在不存在，反正只是个名字，用来区别的，避免重名标签）

4、DHTML概述

之前CSS+HTML只是静态的，但是想要动态的HTML就要包含HTML，CSS，DOM，javascript四种技术 .

5、DOM （BOM&Navigator对象&History对象）

一打开游览器，游览器的窗口已经加载在内存中了。

窗口一打开，window对象就已经存在了，调用Window对象是，可以不写window.，直接调用方法。

一点击按键，就会显示游览器的信息，程序如下：

6、DOM的location对象

下面程序实现按下一个按钮跳转到一个网址：

通过location.href的设定就可以实现该店地址栏的值，默认得到的地址就是本HTML文件的本地FIle类型的地址。也可以修改href的值，让他实现点击按钮，实现跳转到服务器的特定网址。

7、Window对象的常见方法

alert（）函数也是Window对象的方法

confirm（）方法就是弹出确定，取消窗口、

9、window常见事件。

onload（）就是页面数据加载完之后运行，onbeforeunload()就是页面对象呗卸载之间运行，简单地说就是关闭页面时运行。onunload就是页面关闭后运行。

10、小广告练习

小广告的写法如下：

onunload()保证在探出来后，你点关闭广告，它有重新弹出。而setInterval保证每隔一秒调用focus（）函数，也就是每隔1s广告窗口出现在显示器中间。

主程序：

11、节点类型为1代表标签型节点，节点内容是空代表这个节点是用来封装数据的，本身没有值。属性节点和文本节点都有值，就是里面的文本数据或者=后面的文字。

获得节点后就可以对里面的文本数据进行获取或者修改。

name相当是组名，多个标签可以是name一样，就像前面的男，女name都是sex，但是id是唯一的。

document.getElementById得到的是一个标签节点。而document.getElementsByName得到的是一组标签。

文本框里可以写value=“sda”，也可以不写value，在页面中输入是什么value就是什么。

标签里target属性是指定超链接打开的地方，如果target = "_blank",则表示是在新的页面打开那个超链接。如果不写taget则是默认在原网页上打开超链接。

标签名如input, div,a 就是标签开头的第一个字母。<div id....> <a href=".....">

tagName就是标签名。容器标签例如div这种的内部还可以在定义标签，div这种容器标签都有getElementsByTagName方法，因为标签都有标签名，但是没有getElementsByName,getElementByI的，因为容器里面的标签不一定都有name和id属性。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>Untitled Document</title></head><body><!--document对象的演示。该对象将标记型文档进行封装。该对象的作用，是对可以标记型文档进行操作。最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。要想获取节点，必须要先获取到节点所属的文档对象document。所以document对象最常见的操作就是获取页面中的节点。 获取节点的方法体现：1，getElementById():通过标签的id属性值获取该标签节点。返回该标签节点。2，getElementsByName(): 通过标签的name属性获取节点，因为name有相同，所以返回的一个数组。3，getElementsByTagName(): 通过标签名获取节点。因为标签名会重复，所以返回的是一个数组。凡是带s返回的都是数组。--><script type="text/javascript">function getNodeDemo(){/* * 需求：获取页面中的div节点。 * 思路： * 通过docment对象完成。因为div节点有id属性。 所以可以通过id属性来完成获取。  *  */var divNode = document.getElementById("divid");//节点都有三个必备的属性。节点名称，节点类型，节点值。//alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);/* * 常见节点有三种： * 1，标签型节点：类型 1 * 2，属性节点：     类型 2 * 3，文本节点。     类型 3 *  * 标签型节点是没有值的，属性和文本节点是可以有值的。 *  *///获取div节点中的文本。//var text = divNode.innerHTML;//alert(text);//改变div中的文本。divNode.innerHTML = "哈哈，文本被我改掉了".fontcolor("red");}//获取文本框节点演示getElementsByName方法function getNodeDemo2(){//var nodes = document.getElementsByName("user");//alert(nodes[0].value);var userNode = document.getElementsByName("user")[0];alert(userNode.value);}//获取超链接节点对象。演示getElementsByTagName方法。function getNodeDemo3(){//直接用标签名获取。 var nodes = document.getElementsByTagName("a");//alert(nodes.length);//alert(nodes[0].innerHTML);for(var x=0; x<nodes.length; x++){//alert(nodes[x].innerHTML);nodes[x].target = "_blank";}}/* * 对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开。 * 当然是要获取其中被操作的超链接对象啊。 * 可是通过document获取超链接，拿到的是页面中所有的超链接节点。 * 只想获取一部分该如何办呢？ * 只要获取到被操作的超链接所属的节点即可。  *  * 在通过这个节点获取到它里面所有的超链接节点。 *  */function getNodeDemo4(){//获取超链接所属的div节点var divNode = document.getElementById("newslink");//通过对div对象方法的查找发现它也具备getElementsByTagName方法。//记住：所有的容器型标签都具备这个方法。在该标签范围内获取指定名称的标签。var aNodes = divNode.getElementsByTagName("a");for(var x=0;x<aNodes.length; x++){//alert(aNodes[x].innerHTML);aNodes[x].target = "_blank";}}</script><input type="button" value="演示document对象获取节点" onclick="getNodeDemo4()" /><div id="divid">这是一个div区域</div><input type="text" name="user"  /><a href="http://www.sina.com.cn">新浪网站11</a><a href="http://www.SOHU.com.cn">新浪网站22</a><div id="newslink"><a href="http://www.163.com.cn">新闻链接1</a><a href="http://www.164.com.cn">新闻链接2</a><a href="http://www.itcast.com.cn">新闻链接3</a></div></body></html>

如果想实现新浪网的连接都在本页跳转，而新闻连接都在心网页打开，就必须将那个新闻的网页连接的标签全部归为一类，用div标签将他们封装到一起，这样可以通过拿到div标签来得到全部的新闻的标签，通过遍历就指定tagart就可以实现上述要求。

15、通过节点见得层次关系获得节点。
兄弟节点尽量少用，不同游览器解析不一致，容易出现混乱。

span标签是行内标签，后面没有换行的。所以在不同浏览器解析兄弟节点时，后面的空白会出现问题。想要避免出现问题最好就是把这些兄弟标签紧紧一个接着一个。但是最好还是少用兄弟节点，这样的错误就会少点。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>Untitled Document</title></head><body><!--通过节点的层次关系获取节点对象。关系：1，父节点: parentNode:对应一个节点对象。2，子节点：childNodes:对应一个节点集合。3，兄弟节点：上一个兄弟节点：previousSibling下一个兄弟节点：nextSibling--><script type="text/javascript">function getNodeByLevel(){//获取页面中的表格节点。 var tabNode = document.getElementById("tabid");//获取父节点。parentNode//var node = tabNode.parentNode;//alert(node.nodeName);//body//获取子节点。childNodes//var nodes = tabNode.childNodes;//alert(nodes[0].childNodes[0].nodeName);//获取兄弟节点。//上一个。//var node = tabNode.previousSibling;//alert(node.nodeName);//var node = tabNode.nextSibling.nextSibling;//alert(node.nodeName);//尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，//会解析出标签间的空白文本节点}</script><input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel()" /><div>div区域</div><span>span区域</span><table id="tabid"><tr><td>单元格一</td><td>单元格二</td></tr></table><span>span区域11</span><dl><dt>上层项目</dt><dd>下层项目</dd></dl><a href=''>一个超链接</a></body></html>

16、创建并添加节点

下图是创建文本节点并添加的一种方式：

下面是创建按钮标签：

<script type="text/javascript">//创建并添加节点。//需求：在div_1节点中添加一个文本节点。 function crtAndAdd(){/* * 1，创建一个文本节点。 * 2，获取div_1节点。 * 3，将文本节点添加到div_1节点中。 *///1, 创建节点。使用document中的createTextNode方法。 var oTextNode = document.createTextNode("这是一个新的文本 ");//2，获取div_1节点。var oDivNode = document.getElementById("div_1");//3，将文本节点添加到div_1节点中。oDivNode.appendChild(oTextNode);}//需求：在div_1中创建并添加一个按钮节点。function crtAndAdd2(){//1,创建一个按钮节点。var oButNode = document.createElement("input");oButNode.type = "button";oButNode.value = "一个新按钮";//2，获取div_1节点。var oDivNode = document.getElementById("div_1"); //3，将按钮节点添加到div_1节点中。oDivNode.appendChild(oButNode);}//通过另一种方式完成添加节点。function crtAndAdd3(){/* * 其实是使用了容器型标签中的一个属性。innerHTML. * 这个属性可以设置html文本。 *///1，获取div_1节点。var oDivNode = document.getElementById("div_1");//oDivNode.innerHTML = "<input type='button' value='有个按钮'/>";oDivNode.innerHTML = "<a href='http://www.163.com'>有个超链接</a>";}

18、节点操作-删除节点

首先获得div节点

var oDivNode = document.getElementById("div_2");

oDivNode.removeNode(false);////使用div节点的remvoeNode方法删除。默认是false，但是只删掉div的儿子节点，孙子节点自动向上升一级额，变成新的div儿子节点。

oDivNode.removeNode(true)///则是删除div下面全部的子节点（包括孙子节点等）。这种方法使用的少

一般使用removeChild方法。删除子节点。
相当于自己没办法删掉自己，就先找到父节点，让父节点来删掉他的子节点，也就是删掉自己。获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。

//=======================//需求将div_2节点删除。 function delNode(){//1,获取div_2节点。var oDivNode = document.getElementById("div_2");//2,使用div节点的remvoeNode方法删除。//oDivNode.removeNode(true);较少用。 //一般使用removeChild方法。 删除子节点。//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。oDivNode.parentNode.removeChild(oDivNode);}//需求：用div_3节点替换div_1节点。

19、节点的操作-替换&克隆节点

DOM中的节点替换就是把被替换那个删去，将替换的移到被替换的地方。也就是说，节点的个数少了1。

想要用3节点替换掉1节点，但是仍保留3节点在原来的位置（也就是还是那么多的节点，并不少1）。可以先把3节点克隆一下，再拿这个克隆的去替换节点1。

//需求：希望用div_3替换div-1，并保留div-3节点。//其实就是对div_3进行克隆function cloneDemo(){var oDivNode_1 = document.getElementById("div_1");var oDivNode_3 = document.getElementById("div_3");var oCopyDiv_3 = oDivNode_3.cloneNode(true);//oDivNode_1.replaceNode(oDivNode_3);// 建议使用replaceChild方法。oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);}//firstNode = childNodes[0];//lastNode = childNodes[childeNodes.length-1];</script>

完整的生成，删除，替换节点的程序如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>Untitled Document</title><style type="text/css">div{border:#00ccff 1px solid;width:200px;padding:30px;margin:10px;}#div_1{background-color:#00ccff;}#div_2{background-color:#FFccff;}#div_3{background-color:#cc00ff;}#div_4{background-color:#00FF00;}</style></head><body><script type="text/javascript">//创建并添加节点。//需求：在div_1节点中添加一个文本节点。 function crtAndAdd(){/* * 1，创建一个文本节点。 * 2，获取div_1节点。 * 3，将文本节点添加到div_1节点中。 *///1, 创建节点。使用document中的createTextNode方法。 var oTextNode = document.createTextNode("这是一个新的文本 ");//2，获取div_1节点。var oDivNode = document.getElementById("div_1");//3，将文本节点添加到div_1节点中。oDivNode.appendChild(oTextNode);}//需求：在div_1中创建并添加一个按钮节点。function crtAndAdd2(){//1,创建一个按钮节点。var oButNode = document.createElement("input");oButNode.type = "button";oButNode.value = "一个新按钮";//2，获取div_1节点。var oDivNode = document.getElementById("div_1"); //3，将按钮节点添加到div_1节点中。oDivNode.appendChild(oButNode);}//通过另一种方式完成添加节点。function crtAndAdd3(){/* * 其实是使用了容器型标签中的一个属性。innerHTML. * 这个属性可以设置html文本。 *///1，获取div_1节点。var oDivNode = document.getElementById("div_1");//oDivNode.innerHTML = "<input type='button' value='有个按钮'/>";oDivNode.innerHTML = "<a href='http://www.163.com'>有个超链接</a>";}//=======================//需求将div_2节点删除。 function delNode(){//1,获取div_2节点。var oDivNode = document.getElementById("div_2");//2,使用div节点的remvoeNode方法删除。//oDivNode.removeNode(true);较少用。 //一般使用removeChild方法。 删除子节点。//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。oDivNode.parentNode.removeChild(oDivNode);}//需求：用div_3节点替换div_1节点。function updateNode(){/* * 获取div-3和div-1. * 使用replaceNode进行替换。 */var oDivNode_1 = document.getElementById("div_1");var oDivNode_3 = document.getElementById("div_3");//oDivNode_1.replaceNode(oDivNode_3);// 建议使用replaceChild方法。oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);}//需求：希望用div_3替换div-1，并保留div-3节点。//其实就是对div_3进行克隆function cloneDemo(){var oDivNode_1 = document.getElementById("div_1");var oDivNode_3 = document.getElementById("div_3");var oCopyDiv_3 = oDivNode_3.cloneNode(true);//oDivNode_1.replaceNode(oDivNode_3);// 建议使用replaceChild方法。oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);}//firstNode = childNodes[0];//lastNode = childNodes[childeNodes.length-1];</script><input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/><input type="button" value="删除节点" onclick="delNode()"/><input type="button" value="修改节点" onclick="updateNode()"/><input type="button" value="克隆节点" onclick="cloneDemo()"/><hr/><div id="div_1"></div><div id="div_2">好好学习，day day up！</div><div id="div_3">div区域演示文字</div><div id="div_4">节点的增删改查</div></body></html>

0 0