DOM

来源：互联网发布：北京超图软件怎么样编辑：程序博客网时间：2024/06/05 02:33

DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面某的一部分。

节点

DOM可以将html和xml文档描绘成一个由多层节点构成的结构，节点有不同的类型，每种类型表示不同的信息，每种类型的节点有各自的特点、数据、方法，另外也与其他节点存在某种关系。<html>：文档元素

Node类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。javascript中的所有节点都继承自Node类型。（IE不支持这个类型）nodeType属性

if(someNode.nodeType == 1) //来判断是否是元素节点{    value = someNode.nodeName; //nodeName为元素的标签名}

childNodes属性

每个节点都有一个childNodes属性，其中保存着一个NodeList对象(非Array实例)。NodeList是一种类数组对象，用于保存一组有序的节点。是基于DOM结构动态执行查询的结果。

var firstChild = someNode.childNodes[0];var secondChild = someNode.childNodesitem(1);var count = someNodes.childNodes.length;

将NodeList对象转化为数组：

function convertToArray(nodes){    var array = null;    try{        //针对非IE8及之前浏览器        array = Array.prototype.slice.call(nodes,0);    }catch(ex){        array = new Array();        for(var i=0;i<nodes.length;i++){            array.push(node.[i]);        }    }    return array;}

parentNode属性

该属性指向文档树中的父节点。包含在chiledNodes列表中的节点的parentNode属性值相同，且每个节点互相之间都是同胞节点。

previousSibling属性：

nextSibling属性：

父节点的previousSibling和nextSibling属性分别指向其childNodes列表中的第一个和最后一个节点。

hasChildNodes()方法：

节点包含一个或多个子节点的情况下返回true;

ownerDocument：

指向表示整个文档的文档节点。通过这个属性可以不用再在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

操作节点

appendChild()方法：

用于向childNodes列表的末尾添加节点，返回新增的节点。如果添加的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新的位置。即使DOM树是由一系列指针连接起来的，但任何DOM节点也不能同时出现在文档的多个位置。

insertBefore()方法：

两个参数：要插入的节点和最为参照的节点，后者为null时插入到最后。返回被插入的节点。

replaceChild()方法：

两个参数：要插入的节点和要被替换的节点，被替换的节点将被返回并从文档树中移除。

removeChild()方法：

一个参数：要移除的节点。返回被移除的节点。

cloneNode()方法：

    cloneNode(false):执行浅复制，只复制节点本身，复制后节点的副本属于文档所有，但并没有为它指定父节点。    cloneNode(true):执行深复制，也就是复制节点及其整个子节点树。    IE在此有一个bug，即它会复制事件处理程序，所以建议在复制前最好移除事件处理程序。

Document类型

文档子节点

javascript通过Document类型表示文档。HTMLDocument继承自Document类型，而document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性。

document.documentElement === document.childNode[0] === document.firstChilddocument.documentElement;// 取得对<html>的引用。document.body; //取得对<body>的引用。document.doctype; //取得对<!DOCTYPE>的引用，浏览器支持差别很大。作用不大。document.title; //取得或设置文档标签

文档信息

URL属性中包含页面完整的URL（地址栏中显示的URL）（只读）
domain属性包含页面的域名(可写，由于安全方面的限制，只能设置为URL中包含的域)
referrer属性中则保存着链接到当前页面的那个页面的URL，没有则为空字符串。所有这些信息都存在与请求的HTTP头部（只读）

由于跨域安全设置，来自不同的子域的页面无法通过javascript通信。

查找元素

getElementById(id)；//id区分大小写，id的值不要和name属性一样IE浏览器在这里有怪癖

var images = document.getElementsByTagName("img")；

返回包含零个或多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个“动态”集合，该对象和NodeList非常相似。
HTMLCollection对象还有一个nameItem()属性，即可以通过元素中的name属性取得集合中的项。

<img src="" name="myImage">images.nameItem("myImages");

在提供按索引访问项的基础上，HTMLCollection还支持按名称访问项

var myImage = images["myImage"];

document.getElementsBynName也返回HTMLCollection

阅读全文

2 0