javaScript DOM编程常用的方法与属性

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。

Node接口的特性和方法

特性/方法	类型/放回类型	说明
nodeName	String	节点的名字；根据节点的类型而定义
nodeValue	String	节点的值；根据节点的类型而定义
nodeType	Number	节点的类型常量值之一
ownerDocument	Document	指向这个节点所属的文档
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
childNodes	NodeList	所有子节点的列表
previousSibling	Node	指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling	Node	指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes()	Boolean	当childNodes包含一个或多个节点时，返回真
attributes	NamedNodeMap	包含了代表一个元素的特性的Attr对象；仅用于Element节点
appendChild(node)	Node	将node添加到childNodes的末尾
removeChild(node)	Node	从childNodes中删除node
replaceChild (newnode, oldnode)	Node	将childNodes中的oldnode替换成newnode
insertBefore (newnode, refnode)	Node	在childNodes中的refnode之前插入newnode

hasChildNodes() -- 查看是否存在子节点
该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

replaceChild() -- 节点替换
把一个给定父元素里的一个子节点替换为另外一个子节点

var reference = element.replaceChild(newChild,oldChild);

返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

getAttribute()   -- 查找属性节点
返回一个给定元素的一个给定属性节点的值

var attributeValue = element.getAttribute(attributeName);

给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个空字符串.

setAttribute() -- 设置属性节点
将给定元素节点添加一个新的属性值或改变它的现有属性的值。

 element.setAttribute(attributeName,attributeValue);

属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在，它的值将被刷新；
如果不存在，setAttribute()方法将先创建它再为其赋值。

createElement() -- 创建新元素节点
按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.

var reference = document.createElement(element);

方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象.

var pElement = document.createElement("p");

createTextNode() -- 创建新文本节点
创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
  var textNode = document.createTextNode(text);
方法只有一个参数：新建文本节点所包含的文本字符串
方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.
新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性

var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);

appendChild() -- 插入节点（1）
为给定元素增加一个子节点：                                   
   var newreference = element.appendChild(newChild).              
   给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素

 var newliElement=document.createElement("li");
 var textNode=document.createTextNode("北京");
 newliElement.appendChild(textNode);
 document.body.appendChild(newliElement);
 
 var liElement=document.getElementsByTagName("li");
 var textValue=liElement[0].firstChild.nodeValue;
 alert(textValue);

insertBefore() -- 插入节点（2）
把一个给定节点插入到一个给定元素节点的给定子节点的前面

var reference =  element.insertBefore(newNode,targetNode);

节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用

<ul id="city">     <li value="beijing^" id="beijing">北京</li>        </ul>
<ul id="city01">   <li value="shanghai^" id="shanghai">上海</li>          </ul>
 //获取父节点
 var parentCityNode=document.getElementById("city");
 //获取子节点
 var beijingNode=document.getElementById("beijing");
 var shanghaiNode=document.getElementById("shanghai");
 //插入
 parentCityNode.insertBefore(shanghaiNode,beijingNode);

removeChild() -- 删除子节点
从一个给定元素里删除一个子节点

var reference = element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。

<ul id="city">  <li value="beijing^" id="beijing">北京</li> </ul>
var ulElement=document.getElementById("city");
var liElement=document.getElementById("beijing");
ulElement.removeChild(liElement);

如果想删除某个节点，但不知道它的父节点是哪一个，parentNode 属性可以帮忙。

<ul id="city">  <li value="beijing^" id="beijing">北京</li> </ul>
var liElement=document.getElementById("beijing");
var parentElement=liElement.parentNode;
parentElement.removeChild(liElement);

ChildNodes -- 遍历节点树

ChildNodes：返回一个数组，这个数组由给定元素节点的子节点构成：

var nodeList = node.childNodes;

文本节点和属性节点都不可能再包含任何子节点，所以它们的 ChildNodes 属性永远会返回一个空数组。
如果想知道某个元素有没有子节点，可以用 hasChildNodes 方法。
如果想知道某个元素有多少个子节点，可以用 childNodes 数组的 length 属性。
childNodes 属性是一个只读属性。

firstChild -- 获取第一个子节点

firstChild：该属性返回一个给定元素节点的第一个子节点，返回这个节点对象的指针。

var reference = node.firstChild;

文本节点和属性节点都不可能包含任何子节点，所以它们的 firstChild 属性永远会返回 null。
某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点，即：

var reference = node.ChildNodes[0];

firstChild 属性是一个只读属性。

lastChild：获取最后一个子节点。

nextSibling: 返回一个给定节点的下一个兄弟节点。

previousSibling：返回一个给定节点的上一个兄弟节点。

parentNode：返回一个给定节点的父节点。
parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
document 节点的没有父节点。

Document 对象的集合

集合	描述
all[]	提供对文档中所有 HTML 元素的访问。
anchors[]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms[]	返回对文档中所有 Form 对象引用。
images[]	返回对文档中所有 Image 对象引用。
links[]	返回对文档中所有 Area 和 Link 对象引用。

Document 对象的属性

属性	描述
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

Document 对象的方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式 或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。