javascript DOM的详解及实例代码

javascript DOM 总结

一直以为DOM（文档对象模型）是JS中最简单的一部分。不可否认，它确实很简单，因为DOM的思维模式有点固定，只需要简单地记住一些固定的方法，所以DOM可以说是所有js(这里指的是客户端的js)入门的起手点。

　　最近我在做一些有用到DOM的练习时，发现自己的DOM知识非常零散(一直以为掌握的很好)，可能有很多朋友都觉得，DOM嘛，也就调用调用几个方法，或者我直接使用jQuery，根本不用考虑DOM的细节。是，这也没错，jQuery对DOM的封装可谓前无古人，但是正如成长一样，跑之前是一定要会走的，所以我认为对DOM必须要有比较详细的了解，于是我总结了如下的关于DOM的一些使用方法。

　　在W3C总结跪DOM规范中，有一些十分常用的，也有些不怎么有用的，这里我们主要讨论常用一些DOM操作(有关DOM的基本概念在此就不介绍了)：

　　节点层次

　　所谓节点层次，指的是html文档中存在具有各自特点，数据，方法的节点(例如标签)，节点之间的关系构成了层次(其实可以想象成树状结构)。W3C的DOM1级规范中定义了一个NODE接口。这个接口有一些方法是非常有用的:

　　Node.ELEMENT_NODE;(元素节点)

　　Node.TEXT_NODE;(文本节点)

　　Node.DOCUMENT_NODE(文档节点)

　　而每个节点都有自己的节点类型标志，也就是NodeType属性，例如元素节点的nodeType == '1';文本节点的nodeType == '3';文档节点的nodeType == '9';

　　1.文档节点

　   文档节点在一个文档中用document对象表示，它的基本特征如下:

console.log(document.nodeType); // 9 console.log(document.nodeName); // #document console.log(document.nodeValue); // null console.log(document.parentNode); // null(它已经是最顶层的节点，树的根节点) 

 　　tip one (文档的子节点):

　　　　1.document.documentElement可以取到html对象，同样可以通过document.childNodes[0]以及document.firstchild取到。然而　documentElement可以更快，更直接访问元素。

　　tip two (文档的相关信息):

　　　　1.取得文档标题 : document.title;

　　　　2.取得完整的url : document.URL;

　　　　3.取得域名(ip) : document.domain;

　　　　4.取得页面的URL : document.referrer;

　　tip three (文档查找元素):

　　　　1.通过id : document.getElementById("xxx");  一般页面id会不同，若有多个相同id，则取到第一个有该id的元素。

　　　　2.通过tagName : document.getElementsByTagName("xxx"); 返回标签名为"xxx"的元素集合!

　　　　3.通过name : document.getElementByName();

　　理解document对象非常简单，兼容性做的也比较靠前。

　　2.元素节点