文档对象模型
文档对象模型(Doucment Object Model,DOM)是表示文档(如HTML文档、XML文档)和访问、操作构成文档的各种元素的应用程序接口。在DOM中，HTML文档的层次结构被表示成树形结构。树的节点表示文档中的各种内容。
在Dom中一切都是Node对象
Element，TextNode，Attribute，Comment都是Node的子类。也就是说，Node对象的所有属性和方法，对于Element，TextNode，Attribute，Comment都适用，并且Element，TextNode， Attribute，Comment提供了特殊的属性和方法来提了特殊作。
Node接口为遍历和操作树定义了属性和方法
Node对象的childNodes属性将返回子节点的列表NodeList对象，firstChild、lastChild、nextSibling、previousSibling和parentNode属性提供了遍历树的方法。appendChild()、removeChild()、replaceChild(old,new)和insertBefore()方法，可以给文档树添加节点或从文档中删除节点。
如何遍历Node节点？
在Node属性中有一个childNodes属性返回一个NodeList对象，该对象是一个Node对象的集合，不是java.util.List的子类，那么如何使用呢？该对象提供一个属性和一个方法非常方便的对NodeList集合提供遍历。
- length属性指出NodeList中有多少node对象。
- item (index) 方法可以检索childNodes对象中第index位置中的Node对象。
示例（Java语法）：
NodeList nl = doc.getElementsByTagName_r("*");
Node n;
n = nl.item(0);
System.out.print(n.getNodeName());
文档树中不同类型节点由特定Node子接口表示，每个Node对象都有nodeType属性，指定节点的类型。
常用节点类型
| 接口 | nodeType常量 | nodeType值 |
|---|---|---|
| Element | Node.ELEMENT_NODE | 1 |
| Text | Node.TEXT_NODE | 3 |
| Document | Node.DOCUMENT_NODE | 9 |
| Comment | Node.COMMENT_NODE | 8 |
| DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 |
| Attr | Node.ATTRIBUTE_NODE | 2 |
Node 对象的属性
| 属性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| baseURI | 返回节点的绝对基准 URI。 | No | 1 | No | Yes |
| childNodes | 返回节点到子节点的节点列表。 | 5 | 1 | 9 | Yes |
| firstChild | 返回节点的首个子节点。 | 5 | 1 | 9 | Yes |
| lastChild | 返回节点的最后一个子节点。 | 5 | 1 | 9 | Yes |
| localName | 返回节点的本地名称。 | No | 1 | 9 | Yes |
| namespaceURI | 返回节点的命名空间 URI。 | No | 1 | 9 | Yes |
| nextSibling | 返回节点之后紧跟的同级节点。 | 5 | 1 | 9 | Yes |
| nodeName | 返回节点的名称，根据其类型。 | 5 | 1 | 9 | Yes |
| nodeType | 返回节点的类型。 | 5 | 1 | 9 | Yes |
| nodeValue | 设置或返回节点的值，根据其类型。 | 5 | 1 | 9 | Yes |
| ownerDocument | 返回节点的根元素（document 对象）。 | 5 | 1 | 9 | Yes |
| parentNode | 返回节点的父节点。 | 5 | 1 | 9 | Yes |
| prefix | 设置或返回节点的命名空间前缀。 | No | 1 | 9 | Yes |
| previousSibling | 返回节点之前紧跟的同级节点。 | 5 | 1 | 9 | Yes |
| textContent | 设置或返回节点及其后代的文本内容。 | No | 1 | No | Yes |
| text | 返回节点及其后代的文本（IE 独有的属性）。 | 5 | No | No | No |
| xml | 返回节点及其后代的 XML（IE 独有的属性）。 | 5 | No | No | No |
Node 对象的方法
| 方法 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| appendChild() | 向节点的子节点列表的结尾添加新的子节点。 | 5 | 1 | 9 | Yes |
| cloneNode() | 复制节点。 | 5 | 1 | 9 | Yes |
| compareDocumentPosition() | 对比两个节点的文档位置。 | No | 1 | No | Yes |
| getFeature(feature,version) | 返回一个 DOM 对象，此对象可执行带有指定特性和版本的专门的 API。 | No | Yes | ||
| getUserData(key) | 返回与此节点上的某个键相关联的对象。此对象必须首先通过使用相同的键来调用 setUserData 被设置到此节点。 | No | Yes | ||
| hasAttributes() | 判断当前节点是否拥有属性。 | No | 1 | 9 | Yes |
| hasChildNodes() | 判断当前节点是否拥有子节点。 | 5 | 1 | 9 | Yes |
| insertBefore() | 在指定的子节点前插入新的子节点。 | 5 | 1 | 9 | Yes |
| isDefaultNamespace(URI) | 返回指定的命名空间 URI 是否为默认。 | No | Yes | ||
| isEqualNode() | 检查两个节点是否相等。 | No | No | No | Yes |
| isSameNode() | 检查两个节点是否是相同的节点。 | No | 1 | No | Yes |
| isSupported() | 返回当前节点是否支持某个特性。 | 9 | Yes | ||
| lookupNamespaceURI() | 返回匹配指定前缀的命名空间 URI。 | No | 1 | No | Yes |
| lookupPrefix() | 返回匹配指定命名空间 URI 的前缀。 | No | 1 | No | Yes |
| normalize() | 合并相邻的Text节点并删除空的Text节点。 | 5 | 1 | 9 | Yes |
| removeChild() | 删除（并返回）当前节点的指定子节点。 | 5 | 1 | 9 | Yes |
| replaceChild() | 用新节点替换一个子节点。 | 5 | 1 | 9 | Yes |
| selectNodes() | 用一个 XPath 表达式查询选择节点。 | 6 | |||
| selectSingleNode() | 查找和 XPath 查询匹配的一个节点。 | 6 | |||
| transformNode() | 使用 XSLT 把一个节点转换为一个字符串。 | 6 | |||
| transformNodeToObject() | 使用 XSLT 把一个节点转换为一个文档。 | 6 | |||
| setUserData(key,data,handler) | 把对象关联到节点上的一个键上。 | No | Yes |
DOM API提供了引用文档中元素的方法
getElementsByTagName(var tagName)
返回NodeList对象(NodeList对象行为与数组相似，我们可以认为这个函数返回一个以tagName指定的元素名组成的数组)，它可以获得任何类型的HTML元素的列表。注意，因为HTML标记不区分大小写，所以传递给该方法的字符串也不区分大小写。如果把"*"传给getElementsByTagName()方法，将返回文档中所有元素的列表，顺序以在文档中出现的顺序。
getElementById(var id)
该方法返回一个元素，该元素具有匹配的id属性。Document对象和Element对象都具有这两个方法。
DOM树的根节点是个Document对象，它的documentElement属性引用表示文档根元素的Element对象。大部分DOM树由表示标记(如<html>和<i>)的Element对象和表示文本串的Text对象构成。
Element接口的getAttribute()方法、setAttribute()方法和removeAttribute()方法可以查询、设置和删除一个元素的性质。
本文参考：
http://blog.sina.com.cn/s/blog_4ab0d57401009kw1.html
http://www.w3school.com.cn/xmldom/dom_node.asp
http://developer.51cto.com/art/201009/224979.htm
JavaScript DOM API初步（整理）的更多相关文章
-
JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)
具有交互性的JavaScript程序使用的是事件驱动的程序设计模型. 目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...
-
jQuery选择器对应的DOM API ——选择元素
英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注: 原作者的写这文章的意图是让我们抛弃jQuery,You Don ...
-
如何使用google地图的api（整理）
如何使用google地图的api(整理) 一.总结 一句话总结:直接用script标签引google地图api即可. 1.如何使用google地图的api? 页面引用javascript文件<s ...
-
读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
-
javascript的api设计原则
前言 本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块.系卤煮自己总结的一些经验和教训.本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来.很难做到 ...
-
抛弃jQuery：DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
-
抛弃jQuery：DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
-
深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
-
JavaScript DOM编程艺术第一章：JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
随机推荐
-
javascript-String
概述 String对象是JavaScript原生提供的三个包装对象之一,用来生成字符串的包装对象实例. var s = new String("abc"); typeof s // ...
-
iOS设置圆角的方法及指定圆角的位置
在iOS开发中,我们经常会遇到设置圆角的问题, 以下是几种设置圆角的方法: 第一种方法: 通过设置layer的属性 代码: UIImageView *imageView = [[UIImageView ...
-
Redis实战（十）Redis常见问题及解决方案
序言
-
十一、移植优化---CONFIG 优化进 menuconfig（2）
11.3 jz2440.h 中的剩余宏移植 11.3.1 CONFIG_SYS_TEXT_BASE CONFIG_SYS_TEXT_BASE:设置系统代码段的基地址,设为 0x0:menuconfig ...
-
Android设计和开发系列第二篇：Action Bar(Develop—Training)
Adding the Action Bar GET STARTED DEPENDENCIES AND PREREQUISITES Android 2.1 or higher YOU SHOULD AL ...
-
iOS 获取流量
#include <arpa/inet.h> #include <net/if.h> #include <ifaddrs.h> #include <net/i ...
-
Linux vm运行参数 - overcommit相关的参数
一.前言 终于可以进入Linux kernel内存管理的世界了,但是从哪里入手是一个问题,当面对一个复杂系统的时候,有时候不知道怎么开始.遵守“一切以人为本”的原则,我最终选择先从从userspace ...
-
SpringCloud学习(6)——Hystrix熔断器
分布式系统面临的问题 复杂的分布式体系结构中的应用程序有数十个依赖关系, 每个依赖关系在某些时刻不可避免的失败. 服务雪崩效应 多个微服务调用的时候, 假设微服务A调用微服务B和微服务C, 微服务B和 ...
-
problems when installed mysql in linux ubuntu
reference:http://www.jb51.net/article/87160.htm?pc 1.ERROR 2002 (HY000): Can't connect to local MySQ ...
-
OpenGL ES andoid学习————1
package com.xhm.getaccount; import javax.microedition.khronos.egl.EGLConfig; import javax.microediti ...