java（十八）DOM

最新推荐文章于 2023-03-09 14:42:19 发布

weixin_33912638

最新推荐文章于 2023-03-09 14:42:19 发布

阅读量88

点赞数

原文链接：http://blog.51cto.com/12956849/1958017

版权

DOM

DOM：document Object Model(文档对象模型)

用来将标记型文档封装成对象，并将标记型文档中的所有内容(标签，文本，属性等)都封装成对象。

封装成对象的目的是为了更为方便的操作这些文档以及文档中的内容。

因为对象的出现就可以有属性和行为被调用。

文档对象模型：

文档：标记型文档。

对象：封装了属性和行为的实例，可以直接被调用。

模型：所有标记型文档都具备一些共性特征的一个体现。

标记型文档所包含的内容无非是标签，属性和标签中封装的数据。

只要是标记型文档，DOM这种技术都可以对其进行操作。

常见的标记型文档：html xml

DOM这种技术是如何对标记型文档进行操作的呢？

要操作标记型文档必须先对其进行解析。

DOM解析按照标签的层次关系体现出标签的所属，形成一个树状结构，称为DOM树，而树中的标签，文本

以及属性称之为节点，这个节点也称为对象。标签通常也称为页面中的元素。

DOM技术的解析方式：将标记型文档解析成一棵DOM树，并将树中的内容都封装成节点对象。

注意：这种DOM解析方式的好处是可以对树中的节点进行任意操作，比如：增删改查。

但弊端是这种解析需要将整个标记型文档加载进内存，意味着如果文档体积很大，就会较为浪费内存空间。

另一种解析方式:SAX。这是一种民间常用的解析方式，并不是w3c标准，了解一下就行，而DOM是w3c标准。

SAX解析方式：基于事件驱动的解析。获取数据的速度很快，但是不能对标记进行增删改，只能查。

DOM模型有三种：

DOM level 1：将html文档封装成了对象。

DOM level 2：在level1的基础上添加了一些新功能。比如解析名称空间。

DOM level 3：将xml文档封装成了对象。

DHTML:动态的HTML。它不是一门语言，是多项技术综合体的简称。

其中包含了HTML,CSS,DOM,JavaScript。

这四个技术在动态的html页面效果定义时，都处于什么样角色呢？负责什么样的职责呢？

HTML:负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。

简单说，用标签封装数据。

CSS:负责提供样式属性，对标签中的数据进行样式的定义。

简单说，对数据进行样式定义

DOM:负责将标签型文档以及文档中的所有内容进行解析并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作。

简单说，将文档和标签以及其他内容变成对象。

JavaScript:负责提供程序设计语言，对页面中的对象进行逻辑操作。

简单说，负责页面的行为定义，就是页面的动态效果

所以说，JavaScript是动态效果的主力编程语言。

BOM模型：

BOM：browser object model（浏览器对象模型）

这个模型方便于操作浏览器。浏览器对应的对象就是window对象，这个可以通过查阅dhtml api知道。

<html>

<head>

</head>

<body>

<!--

window对象的演示：

为了演示方便，定义一个事件源，通过对事件源的触发，获取想要的结果。

比如让用户通过按钮就可以知道浏览器的一些信息。

-->

<!--

定义按钮onclick事件的处理方式

-->

function windowObjectDemo(){

//想要知道这个浏览器的信息，就要用到window中的navigator对象。

var name=window.navigator.appName;

var version=navigator.appVersion; //因为window对象一打开浏览器就存在了，所以可以不用写，像这样也行。

document.write("<font color='green' size='6'>"+name+"<br/>");

document.write(version+"<br/>");

}

</script>

</body>

</html>

除了navigator对象外，window还有一个比较常用的对象history，可以完成历史纪录的相关操作，比如前进，后退，去指定网页等，比较简单。

演示另一个比较重要的对象——location对象。

<html>

<head>

</head>

<body>

<!--

演示location对象。

-->

function windowObjectDemo(){

var prop=window.location.protocol; //设置或获取url的协议部分

var text=location.href; //设置或获取整个url字符串

document.write("<font color='yellow' size='6'>"+prop+"<br/>");

document.write(text+"<br/>");

location.href="http://www.hupu.com.cn";

//给location的href属性设置了一个值，改变了地址栏的值，并对其进行解析，如果是http，还会进行连接访问。

}

</script>

</body>

</html>

接下来演示一些window中的常见方法。

<html>

<head>

</head>

<body>

<!--

演示window中常见的方法。

-->

function windowMethodDemo(){

var b=confirm("你真的确定要点击吗？"); //confirm方法，带回运行时底下会自动出现确定和取消选项。

alert("b="+b);

setTimeout("alert('timeout run'),4000"); //经过指定毫秒值后计算一个表达式。比如这个就是4秒后弹一个对话框。

setInterval("alert('timeout run0.0'),3000"); //每经过指定毫秒值后计算一个表达式。重复执行。可以用clearInterval方法终止他的运行。

}

function stop(){

clearInterval(timeid);

}

function windowMove(){

moveBy(20,20);

//moveTo(40,40);

}

function windowOpen(){

open("","_blank","height=400,width=200,status=yes,toolbar=yes,location=yes");

}

</script>

</body>

</html>

接下来演示一些window中常见的事件

<html>

<head>

</head>

<body>

window.οnunlοad=function(){ //onunload事件，在对象卸载前立即触发。

alert("onunload run");

}

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

alert("onload run");

}

οnbefοreunlοad=function(){ //onbeforeunload事件，在页面将要被卸载前触发。

alert("onbeforeunload run");

}

</script>

</body>

</html>

关于document对象：

<html>

<head>

</head>

<body>

<!--

*document对象的演示

*该对象将标记型文档进行了封装。它的作用是可以对标记型文档进行操作。

*最常见的操作就是实现动态效果，这就要对节点操作，就要先获取到节点。

*要获取节点，必须要先获取到节点所属文档对象document。

*所以document对象最常见的操作就是获取页面中的节点。

*获取节点的方法体现：

*1.getElementById():通过标签的id属性值获取该标签节点。

*2.getElementsByName():通过标签的name属性获取节点，因为name有相同，所以这里element加s了，返回的是一个数组。

*3.getElementsByTagName():通过标签名获取节点。因为标签会发生重复，所以返回的也是一个数组。

-->

function getNodeDemo(){

//需求：获取页面中的div节点。

//要通过document对象完成，因为div节点有id属性，所以通过id属性来完成。

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

document.write("<font color='red' size='5'>"+divNode.nodeName+"-"+divNode.nodeType+"-"+divNode.nodeValue+"<br/>");

*节点都有三个必备的属性：节点名称，节点类型，节点值

*常见节点有三种：

*1.标签型节点类型1

*2.属性节点类型2

*3.文本节点类型3

* 标签型节点是没有值的，属性节点和文本节点是可以有值的。

//获取div节点中的文本

var text=divNode.innerHTML;

document.write("<font color='red' size='5'>"+text+"<br/>");

//修改div中的文本

divNode.innerHTML="哈哈，文本被我修改了！";

document.write("<font color='red' size='5'>"+divNode.innerHTML+"<br/>");

}

function getNodeDemo2(){

//获取文本框节点演示getElementsByName方法

var node=document.getElementsByName("user");

alert(node[0].name+"--"+node[0].value);

}

function getNodeDemo3(){

//获取超链接节点对象，演示getElementsByTagName方法。

//直接用标签名获取

var nodes=document.getElementsByTagName("a");

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

nodes[x].target="_blank"; //这句话就是让超链接的网址在一个新的网页中打开。

}

function getNodeDemo4(){

*对于页面中的超链接，如果要求新闻链接在新窗口打开，而门户网站在当前页面打开，该怎么办呢？

*当然是要获取其中被操作的超链接对象啊。

*可是通过document获取超链接，拿到的是页面中所有超链接节点。

*只想获取其中一部分怎么办呢？

*只要获取到被操作超链接所属节点即可。

*再通过这个节点获取到它里面所有超链接节点。

var divNode=document.getElementById("news link");

var aNodes=divNode.getElementsByTagName("a");

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

aNodes[x].target="_blank";

}

</script>

<div id="divid">这是一个div区域</div>

</body>

</html>

获取节点还有另外一种常用的方式：通过节点的层次关系获取节点对象。

关系：1.父节点：parentNode，对应一个节点对象

2.子节点：childNodes，对应一个节点集合

3.兄弟节点：

上一个兄弟节点：previousSibling

下一个兄弟节点：nextSibling

<html>

<head>

</head>

<body>

function getNodeByLevel(){

//获取页面中的表格节点

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

//获取父节点。

var node=tabNode.parentNode;

//获取子节点

var nodes=tabNode.childNodes;

alert(nodes[0].childNodes[0].nodeName);

//获取兄弟节点

var node2=tabNode.previousSibling;

alert(node2.nodeName);

//尽量少用兄弟节点，因为在解析的时候或出现浏览器不同，解析结果不一致的问题。

//会解析出标签间的空白文本节点。

}

</script>

</body>

</html>

获取到节点之后就是对节点的操作了，操作无非就是增删改查，查已经完成了，就是获取。

<html>

<head>

div{

border:#00ccff 1px solid;

width:500px;

padding:80px;

margin:20px;

}

#div_1{

background-color:#00ccff;

}

#div_2{

background-color:#FFccff;

}

#div_3{

background-color:#cc00ff;

}

#div_4{

background-color:#00FF00;

}

</style>

</head>

<body>

function creAndAdd(){

//需求：在div_1节点中添加一个文本节点

//思路：1.创建一个文本节点，使用document中的createTextNode方法

// 2.获取div_1节点

// 3.将文本节点添加到div_1节点中。

var oTextNode=document.createTextNode("这是一个新的文本节点");

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

oDivNode.appendChild(oTextNode);

}

function creAndAdd2(){

//需求：在div_1中创建并添加一个按钮节点。

var oNode=document.createElement("input");

oNode.type="button";

oNode.value="一个新按钮";

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

oDivNode.appendChild(oNode);

}

function creAndAdd3(){

//需求：通过另一种方式完成添加节点

//其实是使用了容器型标签的一个属性——innerHTML。这个属性可以设置html文本。

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

oDivNode.innerHTML="<input type='button' value='有个按钮'/>";

}

function delNode(){

//需求：将div_2节点删除

//1.获取div_2节点

//2.使用div节点的removeNode方法删除

// 但是这个方法用的比较少，一般使用removeChild方法，删除子节点，

// 所以就得先获取div_2的父节点，然后用父节点的removeChild方法将div_2删除。

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

// oDivNode.removeNode(true); //传个false，div区域的字还会留下来，传个true就会把子节点全部删除。

oDivNode.parentNode.removeChild(oDivNode);

}

function updateNode(){

//需求：用div_3节点替换div_1节点。

//1.获取div_3和div_1节点

//2.使用replaceNode方法进行替换。

//但是不建议使用这个方法，建议使用replaceChild方法。

var oDivNode_1=document.getElementById("div_1");

var oDivNode_3=document.getElementById("div_3");

// oDivNode_1.replaceNode("var oDivNode_3");

oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);

}

function cloneNode(){

//需求：希望用div_3替换div_1，但是要求保留div_3.

var oDivNode_1=document.getElementById("div_1");

var oDivNode_3=document.getElementById("div_3");

var oCopyDiv_3=oDivNode_3.cloneNode(true); //true表示还要复制该节点的子节点，这里就是还要赋值div区域的文字。

//否则赋值过去的只有div_3这个区域，没有里面的文字。

oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);

}

</script>

<hr/>

</div>

好好学习。day day up!

</div>

div区域演示文字

</div>

节点的增删改查

</div>

</body>

</html>

转载于:https://blog.51cto.com/12956849/1958017

weixin_33912638

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java（十八）DOM

DOMDOM：document Object Model(文档对象模型) 用来将标记型文档封装成对象，并将标记型文档中的所有内容(标签，文本，属性等)都封装成对象。封装成对象的目的是为了更为方便的操作这些文档以及文档中的内容。因为对象的出现就可以有属性和行为被调用。文档对象模型：文档：标记型文档。对象：封装了属性和行为的实例，可...
复制链接

扫一扫