DOM文档概述、window对象及常见方法演示、获取/创建/添加/删除/克隆节点

dom文档概述：

DOM:Document object Model(文档对象模型)
  用来将标记型文档封装成对象，并将标记型文档中的所有内容（标签，文本，属性等）都封装成对象。
  封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。
  因为对象的出现就可以有属性和行为被调用。
文档对象模型
文档：标记型文档。
对象：封装了属性和行为的实例，可以被直接调用。
模型：所有标记型文档都具备一些共性特征的一个体现。
  标记型文档（标签，属性，标签中封装的数据）

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

常见的标记型文档： html xml

DOM这种技术是如何对标记型文档进行操作的呢？
要操作标记型文档必须对其进行解析。

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

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

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

简介另一种解析方式：SAX，是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，是DOM是w3c标准。

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

DOM模型有三种：
DOM levael 1：将html文档封装成对象。
DOM levael 2：在levael 1基础上加入了新功能，比如解析名称空间。
DOM levael 3：将xml文档封装成了对象。

DHTML：动态的HTML。不是一门语言。是多项技术综合体的简称。
其中包含了HTML,CSS,DOM,Javascript

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

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

CSS：负责提供样式属性，对标签中的数据进行样式的定义
简单说：对数据进行样式定义

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

JS：负责提供程序设计语言，对页面中的对象进行逻辑操作。
简单说：负责页面的行为定义。就是页面的动态效果。

所以javascript是动态效果的主力变成语言。
DHTML+XMLhttpRequest = AJAX

BOM:Browser Object Model 浏览器对象模型。
这个模型方便于操作浏览器。

浏览器对应的对象就是window对象。这个可以通过查阅dhtml api获得。
------------------------------------------------------------------------------------------------------------

bom中的window对象。
<script type ="text/javascript" src="../Day32Test/outT.js"></script>
<!--
为了演示方便，定义一个事件源。通过对事件源的触发，获取想要的结果。
比如让用户通过点击按钮就可以知道浏览器的一些信息。

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

println(name+":"+version);
}

//演示location
function windowObjDemo2(){
var pro = location.protocol;//地址栏协议
var text = location.href;//地址栏链接

  alert(text);
  //给location的href属性设置一个值。改变了地址栏的值，并对其进行了解析如果是http，还进行连接访问。
  location.href = "http://www.sina.com.cn";
}
</script>

<input type="button value="演示window中的对象" onclick="windowObjDemo2()" />
------------------------------------------------------------------------------------------------------------

演示window中的常见方法。

var timeid;
function windowMethodDemo(){
var b = confirm("你真的确定要点击吗");
alert("b="+b);

setTimeout("alert('time out run')",4000);//4秒后弹出指定内容
timeid = setInterval("alert('interval run')",3000);//每间隔三秒弹出指定内容
}

function stopTime(){
clearInterval(timeid);清除间隔
}

function windowMove(){
  moveBy(10,10);//向右上方向移动10坐标
  moveTo(40,40);//移动到40,40坐标
  for(var x=0; x<700; x++){//窗口抖动。
   moveBy(20,0);
   moveBy(0,20);
   moveBy(-20,0);
   moveBy(0,-20);
  }
}

function windowOpen(){
  //在新窗口中打开ad.html文件，高为400，宽为400，状态栏无，工具条无，菜单栏无，地址栏无。
  open("ad.html","_blank","height=400,width=400,status=no,toolbar=no,menubar=no,location=no");
  close();
}
</script>

<input type="button" value="演示window对象的方法" onclick="windowOpen()" />
<input type="button" value="停止" onclick="stopTime()" />
------------------------------------------------------------------------------------------------------------

window常见事件
<script type="text/javascript">
  /*
  onunload = function(){//在对象卸载前立即出发。
   alert("onunload run");
  }

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

  onbeforeunload = function(){在页面将要被关闭前触发。
   alert("onbeforeunload run");
  }
  */
  onload = function(){
   widow.status = "啊！，加载完毕啦！";
  }
</script>
------------------------------------------------------------------------------------------------------------

document对象的演示。

该对象将标记型文档进行封装。
该对象的作用，是对可以标记型文档进行操作。
最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。
要想获取节点，必须要先获取到节点所属的文档对象document

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

获取节点的方法体现：
1，getElementById():通过标签的id属性值获取该标签节点。返回该标签节点。
2，getElementsByName():通过标签的name属性获取节点，因为name有相同，所以返回的是一个数组
3，getElementsByTagName():通过标签名获取节点。因为标签名会重复，所以返回的是一个数组

反是带s返回的都是数组。

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

//节点都有三个必备的属性。节点名称，节点类型，节点值。//DIV:1:null 1代表标签节点
alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);

   /*
   常见节点有三种：
   1，标签型节点
   2，属性节点
   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>
------------------------------------------------------------------------------------------------------------

通过节点的层次关系获取节点对象
<--
关系：
1，父节点：parentNode:对应一个节点对象。
2，子节点：childNodes:对应一个节点集合。
3，兄弟节点：
  上一个兄弟节点：previousSibling
  下一个兄弟节点：nextSibling
-->
<body>
<script type="text/javascript">
  function getNodeByLevel(){
   //获取页面中的表格节点。
   var tabNode = document.getElementById("tabid");

   //获取父节点。parentNode
   var node = tabNode.parentNode;
   alert(node.nodeName);

   //获取子节点。childNodes
   var nodes = tabNode.childNodes;
   alert(node[0].childNodes[0].nodeName);

   //获取兄弟节点。
   //上一个
//   var node = tabNode.previousSibling;
//   alert(node.nodeName);

var node = tabNode.nextSibling.nextSibling;
alert(node.nodeName);

   //尽量少用兄弟节点，因为在解析的时候会出现浏览器不同解析不一致，
   //会解析出标签间的空白文本节点
  }
  </script>

  <div>div区域</div>
  <span>span区域</span>
  <table id="tabid">
   <tr>
    <td>单元格一</td>
    <td>单元格二</td>
   </tr>
  </table>
  <span>span区域2</span>
  <dl>
   <dt>上层项目</dt>
   <dd>下层项目</dd>
  </dl>
  <a href=''>一个超链接</a>
</body>
------------------------------------------------------------------------------------------------------------

创建并添加、删除、克隆节点。
<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>
<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文本。
   当再次使用方法中的innerHTML时，会覆盖掉之前的创建内容。
   */

//1，获取div_1节点。
var oDivNode = document.getElementById("div_1");

   //oDivNode.innerHTML = "<input type='button' value='有个按钮'/>";
   oDivNode.innerHTML = "<a href='http://163.com'>有个超链接</a>";
  }

//需求：将div_2节点删除。
function delNode(){

//1，获取div_2节点。
var oDivNode = document.getElementById("div_2");

//2，使用div节点的removeNode方法删除。
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);
}
</script>

<div id="div_3">
div区域演示文字
</div>

<div id="div_4">
节点的增删改查
</div>

发表于 2013-04-23 15:47 JavaLaw 阅读(345) 评论(0) 编辑收藏举报

公告