WEB基础__Dom

DOM ：

全称：document  object  model  文档对象模型。

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

为什么要将这些文档以及其中的标签封装成对象呢？

因为可以在对象中定义其属性和行为，可以更方便的操作这些对象。

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

 

文档：标记型文档。

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

模型：所有标记型文档都具有一些共性特征。

 

三层模型：

dom1：将html文档封装成对象。

dom2：在dom1的基础上加入了新的功能，比如解析名称空间。将xml文档封装成对象。

dom3：将xml文档封装成对象。

 

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

 

常见的标记型文档：html  xml

 

DOM技术是如何操作标记型文档的呢？

在操作标记型文档前，须对其进行解析。

 

DOM解析方式：

按照标签的层次关系，将标记型文档解析成一棵DOM树。并将树中的内容都封装成节点对象。

 

DOM解析方式的好处：可以对树中的节点进行操作，如：增删改查

 

弊端：标记型文档会加载进内存，那么内存中有了一个对应的DOM树。如果文档过大，就相对消耗资源。对于   大型文档可以使用SAX这种解析。

 

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

 

标签之间存在着层次关系：

html

| -- head

| -- title

| -- base

| -- link

| -- meta

| -- style

| -- script

| -- body

| -- div

| -- form

| -- input

| -- select

| -- span

| -- a

| -- table

| -- tbody

| -- tr

| -- td

| -- th

| -- dl

| -- dt

| -- dd

 

通过这个标签层次，可以形象的看作是一个树型结构，那么也称标记型文档，加载进内存的是一颗DOM树。

这些标签以及标签的数据都是这棵树上的节点。

 

节点类型：

标签型节点：类型 1

属性节点：类型 2

文本型节点：类型 3

注释型节点：类型 8

docment ：类型 9 

 

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。

 

节点关系：

获取父节点：parentNode

获取子节点：childNodes ：直接子节点，注意返回的是一个节点对象集合。

兄弟节点

上一个兄弟节点：previousSibling

下一个兄弟节点：nextSibling 

如：document.parentNode;

 

如何获取节点对象？

可以通过节点的层次关系完成。也可以通过document对象完成。

注意：这些返回的都是其调用节点下的。也就是在调用节点内部查找相应的值。

    1，getElementById ：通过id属性值获取对应的节点对象，如果有多个相同的id值，则获取到的就是第一个id值所属对象。

    例：

　　function getElement()
　　{	
　　	var divobj = document.getElementById("divid"); 	//通过id 值获取该节点对象
　　	//获取其属性
　　	var name = divobj.nodeName;
　　	var type = divobj.nodeType;
　　	var value = divobj.nodeValue;
　　 }
　　
　　<div id="divid" >
　　	我是一排数据
　　</div>

2，getElementsByName：通过标签的name属性值获取对象，返回的一堆对象，其实是一个对象数组。   

 

3，getElementsByTagName：即没有id也没有name时，可以通过标签名来获取节点对象，返回的是一堆对 象，其实是一个对象数组。大多容器型标签都具备该方法。

 

节点操作：

1，增加

一：创建所要增加的节点

如：文本节点  var  TextNode = document.createTextNode(“这是一个文本节点”);

按键节点  var ButNode = document.createElement(“input”);

  ButNode.type = “button”;

  ButNode.value = “一个新的按钮”;

 

二：获取须要增加到的节点对象

如：<div id=div_1>节点下  var DivNode = document.getElementById(“div_1”);

 

三：将节点添加到指定节点下

如：DivNode.appendChild(TextNode);

 

注：使用容器标签属性 innerHTML 增加(这种方法使用比较多)，这个属性可以设置html文本

如：

var DivNode = document.getElementById(“div_1”);

DivNode.innerHTML = “HEHEHEHEH”;  

DivNode.innerHTML = “ < input  type = ‘button’  value= ‘我是按钮’   />”;  

DivNode.innerHTML = “ <a  href = ‘http://www.baidu.com’>我是超链接</a> ”;  

注：这个增加，会覆盖原来的，只会显示一个。

 

2，删除

一：找到要删除的节点。

如：var DivNode = document.getElementById(“dIv_2”);

二：删除该节点。

使用节点的removeNode方法删除  DivNode.removeNode(true);  //ture  表示删除该节点下的所有子节点

 

一般使用 removeChild方法,删除节点

先获取父节点，然后在用父节点的方法删除子节点

DivNode.parentNode.removeChild(DivNode);

 

3，修改

使用replaceNode进行替换

    var DivNode_1 = document.getElementById(“div_1”);

    var DivNode_3 = document.getElementById(“div_3”);

 

DivNode_3.replaceNode(DivNode_1);

 

建议使用replaceChild方法

DivNode_3.parentNode.replaceChild(DivNode_1,DivNode_3);

 

注：克隆节点  如 var copy = DivNode_3.cloneNode(treu);

 

DHTML：

是多个技术的综合体，叫做动态html ，由 html  css  dom  javascript 组成。

 

html ：提供标签，并将数据进行封装。

dom ：将标签型文档以及文档中的所有内容进行解析，并封装成对象。

例：

css ：负责标签中数据的样式。

javascript ：将html 、css、 dom三个进行融合，通过程序设计方式来完成动态效果的操作。

 

dhtml+xmlHttpRequest  =  ajax

　　< script  type = “text/javascript” >
　　function demo()
　　{
　　var  obj =  document.getElementById(“divid”);  //封装div 标签，通过相同id值
　　alert(obj.tagName);
　　alert(obj.innerText);
　　obj.innerText = “kkkkk”;
　　}
　　< /script >
　　
　　< div  id =  “divid”>
　　hahahahaha
　　< / div>