标签：des style io color ar os 使用 sp java
一.理解DOM
浏览器通过文档对象模型DOM使JavaScript程序可以访问页面上的元素，而DOM是页面上XHTML中文档正文标题、段落、列表、样式ID、class以及所有其他出现的数据的一个内部表示。
DOM的主要思想是HTML上每一个元素分别对应于DOM中的一个节点。DOM定义了许多种节点类型来表示节点的多个方面：
1.文档节点Document-----最顶层的节点或者说是各节点，它代表整个XHTML文档，所有的其他节点都是附属于它的。
2.文档类型节点DocumentType------DTD引用（使用<!DOCTYPE >语法）的对象表现形式。
3.文档片段节点DocumentFragment-----可以像Document一样来保存其他节点。
4.元素节点Element-----表示起始标记和结束标记之间的内容。
5.文本节点Text----代表XHTM文档中元素的起始标记和结束标记之间，或者CDataSection内容包含普通文本。
6.属性节点Attr-----d代表元素节点开始标记内指定的属性。
7.CDataSection节点----<![CDATA]>的对象表现形式。
8.注释节点Comment----代表注释。
二．使用DOM
1.访问相关的节点
要访问<html/>元素，我们可以使用document的documentElement特性:
Var oHead=oHtml.firstChild;
Var oBody=oHtml.lastChild;
也可以使用childNodes特性来完成同样的工作，使用方括号标记：
Var oHead=oHtml.childNodes[0];
Var oHead=oHtml.childNodes[1];
实际上，正式的从childNodes列表中获取子节点的方法是使用item()方法：
Var oHead=oHtml.childNodes.item(0);
Var oHead=oHtml.childNodes.item(0);
2.检测节点类型
元素节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法，包括：
(1).getNameItem(name)---返回nodeName属性值等于name的节点
(2).removeNameItem(name)----删除nodeName属性值等于name的节点
(3).setNameItme(node)----将node添加到列表中，按其 nodeName属性进行索引
(4).itme(pose)----像NodeList一样，返回在位置pos的节点
3.访问指定节点
(1).getElementByTagName()方法
DOM定义了getElementByTagName()方法，用来返回一个包含所有的tagName(标记名)特性等于某个指定值得元素的NodeList。如：
Var oImgs=document.getElementsByTagName(“img”);
上一行代码返回文档中所有<img/>元素的列表。
(2).getElementByName()方法
DOM定义了getElementByName()方法，用来获取所有name属性等于指定值得元素，如：
Var oRadios=document.getElementByName”radColor”);
(3).getElementById()方法
Var=oDiv=document.getElementById(“div1”);
4.创建和操作节点
(1) 创建节点createElement( )、createTextNode( )、appendChild( ) 如：
先创建节点名称
Var op=document.createElement(“p”);
再创建text文本节点
Var text=document.createTextNode；
把text值加到p元素中
Op.appendChild（text）；
把元素加到页面上
Document.Body appendChild（op）；
(2)删除、替换节点removeChild( )、replaceChild( )、insertBefore( )
删除节点
Var op=document.body.getElementByName(“p”)[0]
Op.parentNode.removeChild（op）
替换节点
Var newp=document.createElement(“p”)
Var text=document.createTextNode
Newp.appendChild（text）；
Var oldp=document.getElementByName(“p”)[0];
Oldp.parentNode.replaceChild(newP,oldP);
5.操作文本节点
AppenData（string）将字符添加在文本节点尾部
DeleteData（offset，count）删除文本节点中从指定位置开始的指定数量的字符
InsertData（offset，string）将指定字符添加到指定位置
ReplaceData（offset，count，string）用给的字符串替换文本节点指定位置数量的文本数
Splittext（offset）将文本分为两个部分右边返回为新节点，左边留在原始位置
SubstringData（offset，count）从文本节点中数据返回指定位置指定数目的字符串
三．HTML DOM特征功能
1.table方法
使用DOM来创建HTML 表格
var table=document.creatElement（“table”）
var tbody=createElement(“tbody”);
table.appendChild(tbody)
var otr1= document.creatElement（“tr”）;
tbody. appendChild(otr1)
var otd1= document.creatElement（“td”）;
otd1. appendChild(document.creatTextNode（“Cell 1,1”）);
otr1. appendChild(otd1)；
四.innerHTML
将HTML的字符串赋值给一个元素
代码<div><b>hello</b>WORLD</div> innerHTML <b>hello</b>WORLD
标签：des style io color ar os 使用 sp java
原文地址：http://www.cnblogs.com/lisen28/p/4102705.html
