DOM

DOM是针对HTML和XML文档的一个API。DOM1级将HTML和XML文档看做一个层次化的节点树，可以使用JavaScript来操作这个节点树，进而改变底层文档的外观和结构。

一.节点层次

1.HTML文档

(1)文档元素：<html> 每个文档只能有一个文档元素，文档中其他所有元素都包含在文档元素中

(2)12种节点类型：继承自一个基类型，每种类型分别表示文档中不同的信息或标记。有元素节点，特性节点，文档类型节点，注释节点等

2.Node类型

(1)最基本的节点类型时Node，用于抽象表示文档中一个独立的部分。所有类型的继承自Node类型，所以所有的节点类型都共享着基本的属性和方法

nodeType属性，用于表明节点的类型

我自己定义的最基本节点类型NodeType，又定义了一个Document类型：

function NodeType(nodeType){
    this.nodeType=nodeType;
    this.ELEMENT_NODE=1;
    this.ATTRIBUTE_NODE=2;
    this.DOCUMENT_NODE=9;
}
Node.prototype={
    constrcutor:NodeType
    
};
var Node=new NodeType("node");


function Document(nodeType){
    NodeType.call(this,nodeType);
    this.nodeType=9;
}
Document.prototype=new NodeType();
Document.prototype.constructor=Document;


var document=new Document("DOCUMENT_NODE");
if(document.nodeType==Node.DOCUMENT_NODE){
	alert("Node is document");
}
if(document.nodeType==9){
	alert("it is true")
}

(2)nodeName和nodeValue属性

对于元素节点，nodeName保存元素标签名，nodeValue为null

(3)节点关系

①childNodes属性，指向NodeList对象，用于保存子元素 someNode.childNodes[0]=someNode.childNodes.item(0) 有length属性:someNodes.childNodes.length

将NodeList对象转换为数组：

function convertToArray(nodes){
    var array=null;
    try{
        array=Array.prototype.slice.call(nodes.childNodes,0); //非IE
    }catch(ex){
        array=new Array();
        for(var i=0,len=nodes.length;i<len;i++){
            array.push(node[i]);
        }
    }
    return array;
}

②parentNode属性指向父节点

③previousSibling属性 nextSibling属性用于访问同一childNodes列表的前一个和后一个元素

④firstChild: someNode.firstChild=someNode.childNodes[0];

⑤lastChild: someNode.lastChild=someNode.childNodes[someNode.childNodes.length-1];

⑥hasChildNodes():节点包含一个或者多个子节点返回true

⑦owenerDocument属性：指向文档节点 html文档就是指向html节点

(4)操作（子）节点

①插入节点：

appendChild() 用于向childNodes列表末尾添加一个节点

insertBefore() 用于将节点插入到指定的位置，参照节点的前一个节点 insertBefore(newnode,作为参照的节点)

②插入并替换：

replaceChild() 插入新节点并替换原来的节点位置 replaceChild(newNode,要替换的节点)

③只移除不替换：

removeChild()

四种方法都要先取得父节点，如果没有类型不支持子节点，将出错

(5)其他方法

cloneNode() 创建节点的副本

normalize() 处理文本节点

3.Document类型

JS通过Document类型表示文档。document对象是HTMLDocument（继承自Document）的一个实例，表示整个html页面。document对象是window对象的一个属性，可以作为全局对象来访问。

子节点可能是一个DocumentType(<!DOCTYPE>),一个Element(<html>),ProcessingInstruction,Comment

(1)文档的子节点

①documentElement属性：指向<html>元素

document.documentElement=document.childNodes[0]=document.firstchild

②body属性：指向<body>元素

var body=document.body; //取得<body>的引用

③doctype属性：指向<!DOCTYPE> //文档类型说明

(2)文档信息

①title属性：document.title

②页面请求属性

URL属性：包含页面完整的url

domain属性：只包含页面的域名

referrer属性：保存链接到当前页面的那个页面的url

只有domain属性可以设置：可以通过设置document.domain相同，实现与内嵌框架的通信，访问对方的JS对象

(3)查找元素：取得某个或某组元素的引用

①getElementById()：区分大小写

<div id="myDiv">text</div>
var div=document.getElementById("myDiv"); //取得<div>元素的引用

注：表单中的name不要与其他元素的ID相同，会有怪癖

②getElementsByTagName():接受标签名，返回一个HTMLCollection对象，类似于NodeList。可以用[]或item()访问项

var images=document.getElementsByTagName(“img”); //取得页面中所有<img>元素

alert(images[0].src);

HTMLCollection对象的一个方法：namedItem() 通过name特性取得集合中的项

var myImage=images.namedItem(“name”)；

按名称访问项：

var myImage=images[0]; //后台调用item()

var myImage=images[“name”]; //后台调用namedItem()

取得文档中所有元素：var allElements=document.getElementsByName(“*")；

③getElementsByName():返回带有给定name的所有元素

多用于取得单选按钮 var radios=document.getElementsByName(“name”);

namedItem()只取得第一项

(4)特殊集合

document.anchors

document.applets

document.forms

document.images

document.links

(5)DOM一致性检测

document.implementation.hasFeature(“XML”,"1.0”) //支持给定的名称和版本号返回true

(6)文档写入

write():原样写入

writeln()：会在字符串末尾添加换行符（/n）

open()

close()

document.write(("<strong>"+new Date()).toString()+"</strong>");

包含</script>标签时：document.write("<\/script>”);

文档加载结束后调用document.write()将重写真个页面

4.Element类型

Element类型用于表现XML或HTML元素，提供了对元素标签名，子节点及特性的访问

要访问元素的标签名可以使用nodeName属性和tagName属性：document.getElementById(“myDiv”).nodeName；

在HTML中，标签名始终都是大写

if(element.tagName.toLowerCase()=="div"){
    //操作
}

两种方法访问元素的特性：通过对象属性访问和通过特定方法取得特性

(1)HTML元素属性

HTML元素都由HTMLElement类型表示,HTMLElement直接继承自Element并添加了一些属性。这些属性分别对应于元素的标准特性：

id,title,lang,dir,className(因为class是ECMAScript中的保留字,所以定义为className,对应class特性)

例：

var div=document.getElementById(“myDiv”);

alert(div.id); //”myDiv” 元素的属性对应元素的特性

div.id=”newid”; //修改

(2)取得特性

①getAttribute()

例：div.getAttribute(“class”);

由于在取得style和时间处理程序（如onclick）的时候，通过属性和getAttribute方法得到的值不同。

一般指使用对象的属性，在取得自定义特性的时候才使用getAttribute()f方法

(3)设置特性

setAttritube(“要设置的特性名",”值”)

设置的特姓名统一转换为小写

removeAttribute() 删除特性

(4)attributes属性

包含一个对象，这个对象将特性用节点表示，节点的nodeName是特性的名称，节点的nodeValue是特性的值

var id=element.attributes[“id”].nodeValue;

多用于遍历元素的特性：

function outputAttributes(element){
    var myArray=new Array(),
        attrName,
        attrValue,
        i,
        len;

    for(i=0,len=element.attributes.length;i&lt;len;i++){
        attrName=element.attributes[i].nodeName;
        attrValue=element.attributes[i].nodeValue;
        if(element.attributes.specified){
            myArray.push(attrName+"=\"+attrValue+"=\");
        }
    }
    return myArray.join(" ");
}

(5)创建元素

document.createElement()

例：

var div=document.createElement(“div”);

div.id=”myDiv”;

div.className=”box”;

document.body.appendChild(“div”);

(6)元素的子节点

元素也支持getElementsByTagname()方法

var ul=document.getElementsById(“myList”);

var li=ul.getElementsByTagName(“li”);

5.Text类型

文本节点包含可以照字面解释的纯文本内容

nodeValue和data属性包含节点中的文本

节点的length属性中保存节点中字符的数目

(1)创建文本节点

document.createTextNode()

例：

var element=document.createElement(“div”);

element.className=”message”;

var textNode=document.createElement(“Hello world”);

element.appendChild(“textNode”);

document.body.appendChild(“element”);

(2)规范化文本节点

normalize():将所有节点合并为一个节点

(3)分割文本节点

splitText():用于从文本节点中提取数据

6.Comment类型

createComment()

7.CDATASection类型

8.DocmentType类型

9.DocumentFragment类型

10.Attr类型

二.DOM操作技术

1.动态脚本

①外联样式的动态脚本

function loadScript(url){
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src=url;
    document.body.appendChild(script);
}

laodScript("my.js");

②内敛样式的动态脚本

function loadScript(code){
    var script=document.createElement("script");
    script.type="text/javascript";
    try{
        script.appendChild(document.createTextNode(code));
    }catch(ex){
        script.text=code; //IE将script视为一个特殊的节点,不允许访问其子节点,但有一个text属性
    }
    document.body.appendChild(script);
}

2.动态样式

①外联动态样式

function loadStyle(url){
    var link=document.createElement("link");
    link.rel="stylesheet";
    link.type="text/css";
    link.href=url;
    var head=document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

②内敛动态样式

function loadStyle(css){
    var style=document.createElement("style");
    style.type="text/css";
    try{
        style.appendChild(document.createTextNode(css));
    }catch(ex){
        style.stylesheet.cssText=css;
    }    
    var head=document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

loadStyle("body{background-color:blue}");

3.操作表格

用DOM创建表格

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

var table=document.createElement("table");
table.border=1;
table.width="100%";

//创建tbody
var tbody=document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
tbody.insertRow(0);
tbody.rows[0],insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell2,1"));

//创建第二行
tbody.insertRow(1);
tbody.rows[1],insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell2,2"));

document.body.appendChild(table);

4.使用NodeList

NodeList,NamedNodeMap,HTMLCollection三个集合都是动态的

要减少使用，每次访问都要运行一次基于文档的查询，可以将其值保持起来len=divs.length

posted @ 2013-12-21 22:51 刘忠意阅读(419) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Be you want to be

DOM

公告