dom.js,js常用操作dom节点的方法有哪些
1.什么是DOM？
什么是DOM？DOM是文档对象模型，是基于浏览器编程的一组API接口(在本教程中，可以说是DHTML编程)。它是W3C发布的推荐标准。每个浏览器都有一些细微的差别，其中Mozilla的浏览器是最接近标准的。纯Javascript必须结合DOM做DHTML编程，才能做出漂亮的效果，才能应用到WEB上。这和其他语言差不多，就像C/C需要库支持一样。否则我们就简单的做语法方面的研究。
因此，在将Javascript应用到WEB或者你的RIA应用之前，你必须对DOM有所了解，因为DHTML本质上是对DOM树的一种操作。
在以后的编程中，希望你也能带上手册DHTML.chm如果需要兼容gecko，带上gecko的DOM手册。因为API太多了，你也可以查一下这个手册，看看有没有记不住的接口。如果想测试浏览器是否支持DOM，简单的一句话就能看出来。
脚本
var isSupportDOM=！document.getElementById//两次反转，前面已经讲过了，就是强制转换的意思。
Alert(您的浏览器(问题？否)支持DOM！);
/脚本
第二，DOM树
注意，DOM树的根统一为文档根文档。由于DOM是树形结构，它们自然有以下关系：
根节点(文档)
ParentNode(父节点)
子节点(子节点)
兄弟节点，兄弟节点
(同胞)(同胞)
示例：
假设网页的HTML如下
程序代码
超文本标记语言
头
标题从不在线的网站/标题
/头
身体
DHTML和javascript编程div教程/div
/body
/html
参照树的概念，我们画出HTML文档结构的DOM树：
超文本标记语言
身体头部
div标题
文本
从上图可以看出
Html有两个子节点，html是这两个子节点的父节点。
有一个头部标题，标题下有一个文本节点。
正文下有一个节点div，div下有一个文本节点。
三。操作DOM树
当初已经说过DHTML的本质是操作DOM树。怎么操作呢？
假设我想改变上面HTML文档中div节点的文本，怎么做呢？
程序代码
超文本标记语言
头
标题从不在线的网站/标题
脚本
函数changedivText (strText) {
var nodeRoot=document//这是根节点
var node html=node root . child nodes[0]；//这是一个html节点
var node body=node html . child nodes[1]；//正文节点
var node div=node body . child nodes[0]；//DIV节点
var node text=node div . child nodes[0]；//文本节点
nodeText.data=strText//文本节点有data属性，我们可以改变这个属性，从而成功操作DOM树中的一个节点。
}
/脚本
/头
身体
DHTML和javascript编程div教程/div
输入类型=按钮值=更改/
/body
/html
从上面的例子可以看出，我们可以这样操作DOM树上的任何节点。(注：1。除了跨域，跨域通常是在操作框架上。简单来说，两个框架不属于同一个域名。2.为了演示上述操作，采用的方法是从根节点遍历到文本节点。关于DOM方法，还有更简洁的方法，以后会有更多的例子来说明，下面也会介绍)
第四，DOM节点。
有细心的朋友可能发现了，上面写的HTML代码是用/是一个节点括起来的。事实上是这样吗？答案是否定的，先说节点类型，不然有时候会出错。比如在Mozilla firefox浏览器中运行上述代码，就知道了。
DOM中有许多节点类型。下面是HTML文档中一些常见的节点类型(注意：XML也是DOM树结构)。
1、文档节点
(文档)文档的根节点类型。此枚举的值为9。
2、元素_节点
(element)元素节点类型，其值为1。文本中的HTML、body、div节点都属于这种类型。
3、文本节点
(text)文本节点的类型，其值为3。文本中的文字，比如DHTML和JavaScript编程的教程，就属于这种类型。
(注意：空格也可以是文本节点)
通常，应该更多地关注文本节点。回车和空格可能都是文本节点。这是以后的事。当然，我们能处理好。这里不用着急，后面再说。
五、DOM常用API
这些常用的API要记下来。当然，它们可以在非IE浏览器中工作，并且符合w3c标准。这些API将经常在未来的编程中使用。就像每个编程平台提供的API一样，常用用法一定要写下来，节省时间，提高编程效率。只写几个最常用的，其他API会在以后的例子里写。由浅入深，由易到难。
1.get ELEMENT_NODE，元素节点。
1)、方法：document.getElementById(元素的Id)，返回值是元素的节点引用。想象一下这个API的原理：正如我们上面所做的，我们遍历每个节点(从根到我们需要的节点)。这个API也可以认为是从根开始遍历，查询每个节点(除了空白节点和空节点)，获取节点的id是否是指定的ID。如果是，它将返回这个节点(注意：在JS中，数组和对象都是引用类型)，如果不是，它将返回null。我们可以编写这段代码来帮助我们理解document.getElementById下面是一个简单遍历正文中元素的例子。
超文本标记语言
头
标题从不在线的网站/标题
脚本
函数myGetElementById (id) {
var nodeRoot=document//这是根节点
var node html=node root . child nodes[0]；//这是一个html节点
var node body=node html . child nodes[1]；//正文节点
var body child=nodebody . child nodes；//body的子级
for(var I=0；i bodyChild.lengthI) {//简单遍历(指主体的子体下1的深度)
if (bodyChild[i]。id==id)返回body child[I]；
};
返回null
}
函数TestGetElementById (id) {
var node=myGetElementById(id)；
如果(节点！=null) {
警报(找到节点 id！);
alert(node.childNodes[0])。数据)；
}否则{
警报(节点 id . 未找到)；
}
}
/脚本
/头
身体
div id=aTestNode /div
div id= text node DHTML和javascript编程教程/div
输入类型=按钮值=更改/
/body
/html
2)，属性：object.innerHTML，返回值：一个节点中的HTML值。此属性是可写的。虽然不是采集节点，但是经常和采集节点结合在一起，所以我把它归入采集节点的范畴，其属性类似于纯文本节点属性中的数据。以document.getElementById和object.innerHTML两个API为例，
我们可以简化上面写的代码。示例如下：
超文本标记语言
头
标题从不在线的网站/标题
脚本
函数changedivText (strText) {
var node=document . getelementbyid( text node )；
node.innerHTML=strText
}
/脚本
/头
身体
div id= text node DHTML和javascript编程教程/div
输入类型=按钮值=更改/
/body
/html
3).方法：object.getElementsByTagName(标记的名称)，它返回一个集合。集合中的所有元素都是带有指定标签的元素。访问集合中的元素，可以通过下标访问。语法中的Object是指document (root)或ELEMENT_NODE。这个原理我就不写例子了。可以当作业，可以写。下面是一些具体的应用。比如我们也可以这样写。
超文本标记语言
头
标题从不在线的网站/标题
脚本
函数changedivText (strText) {
var node=document . getelementsbytagname( DIV )；
节点[0]。innerHTML=strText
}
/脚本
/头
身体
DHTML和javascript编程div教程/div
输入类型=按钮值=更改/
/body
/html
再举个例子。请注意，BODY下的节点深度为2。
超文本标记语言
头
标题从不在线的网站/标题
脚本
函数changedivText (strText) {
var node=document . getelementbyid( nodeTest )；
var myNode=node。getelementsbytagname( DIV )；
我的节点[0]。innerHTML=strText
}
/脚本
/头
身体
div id=nodeTest
动态超文本链接标记语言和java描述语言编程差异教程/div
输入类型=按钮值=更改/
/div
/body
/html
2、动态创建与插入结点
1)、创建结点对象document.createElement(标记名),标记名指的是一个标签，比如一个DIV，就是document.createElement(DIV )，
它返回的是这个结点的引用。
2)、在身体的尾部插入结点用文档。身体。appendchild(对象)，为了容易理解，下面这个示例，我用了工业管理学(工业工程)专有的属性
object.outerHTML，得到一个该元素的超文本标记语言标签内容（包括自身),这样会更容易看到效果。
超文本标记语言
头
标题从不在线的网站/标题
脚本
函数insertNode (strText) {
警报(插入元素前的正文HTML:文档。身体。外层HTML)；
var节点=文档。createelement( DIV )；
node.innerHTML=strText
document.body.appendChild(节点);
警报(插入元素后的正文HTML:文档。身体。外层HTML)；
}
/脚本
/头
身体
动态超文本链接标记语言和java描述语言编程差异教程/div
输入类型=按钮值=更改/
/body
/html
3)、在元素处插入结点object.insertBefore(oNewNode [，oChildNode])，oNewNode为一个我们创建的结点，oChildNode是可选的，为目标下的一个子节点。同样的，为了看到效果，我也用了outerHTML。示例
超文本标记语言
头
标题从不在线的网站/标题
脚本
函数insertNode (strText) {
警报(插入元素前的正文HTML:文档。身体。外层HTML)；
var节点=文档。createelement( DIV )；
var myNode=document。getelementbyid( textNode )；
node.innerHTML=strText
文档。身体。在(节点，我的节点)前插入；
警报(插入元素后的正文HTML:文档。身体。外层HTML)；
}
/脚本
/头
身体
div id= text node DHTML和java描述语言编程教程/div
输入类型=按钮值=更改/
/body
/html
3、移除结点。
1)对象。父节点。移除子节点(oChildNode)，这个就是语法，下面看示例。
超文本标记语言
头
标题从不在线的网站/标题
脚本
函数insertNode (strText) {
警报(插入元素前的正文HTML:文档。身体。外层HTML)；
var节点=文档。createelement( DIV )；
var myNode=document。getelementbyid( textNode )；
node.innerHTML=strText
文档。身体。在(节点，我的节点)前插入；
警报(插入元素后的正文HTML:文档。身体。外层HTML)；
}
函数removeCreateNode() {
警报(移除元素前的正文HTML:文档。身体。外层HTML)；
var节点=文档。getelementbyid(“文本节点”)；
节点。父节点。移除子节点(节点)；
警报(移除元素前的正文HTML:文档。身体。外层HTML)；
}
/脚本
/头
身体
div id= text node DHTML和java描述语言编程教程/div
输入类型=按钮值=insert/
输入类型=按钮值=移除/
/body
/html
节点和parentElement功能一样，子节点和孩子们功能一样。但是节点和子节点是符合万维网路联盟(环球网Consortium简称W3C)标准的，可以说比较通用。而另外两个只是工业管理学(工业工程)支持，不是标准，火狐就不支持
