标签：
DOM是 Document Object Model的缩写，中文名称是文档对象模型，是W3C组织推荐的处理可扩展置标语言的标准编程接口，如果你对标准的详情比较感兴趣，请参见wiki百科上面的这篇文章《文档对象模型》，本文将介绍Javascript对DOM的基本操作。
通过DOM元素的id属性来获取元素，这是最直接、最常用的方法。
使用getElementById(id)方法获取DOM元素要求我们的HTML文档中所有标签的id属性都不能重复（对于有良好变成习惯的程序员来说，id是不应该重复的），如果元素的id不是唯一，则会取得第一个该id名称的元素。
下面开看一个实例：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Javascript DOM操作实例 - 起飞网</title> <script type="text/javascript"> function btn_onclick() { var ele = document.getElementById("message"); ele.innerText = "欢迎访问起飞网！"; } </script> </head> <body> <span id="message"></span> <input type="button" value="显示消息" onclick="btn_onclick()" /> </body> </html>
在上面的代码中，我定义了一个id为message的span，用来显示消息。定义了一个类型为button的input标签，并为这个按钮添加了onclick事件，当单击按钮时，btn_onclick()方法将会被调用。
btn_onclick()方法会得到id为message的元素，然后将该元素的innerText属性修改为我们要显示的消息。
运行一下代码看看效果吧！
这是通过name来取得某一堆元素（作为数组），看 Element后面有个小s就知道了，ID是HTML文档中要求唯一的，name可以不是唯一，如checkbox、radio等地方会用到多个 input用同一个name来识别是否为一个分组。
注意，getElementsByName(name)仅用于取得input、radio、 checkbox等元素，如<input name="myradio" type="radio" />。
看这方法就知道这也是取得某一堆元素（作为数组），是通过TagName也就是标签名来取得。你可以遍历这个数组获得每一个单独的元素。
当一个DOM结构很大时，可以通过它来有效地缩小搜查范围
Javascript使用document.createElement(tagName)方法来创建一个节点。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Javascript DOM操作实例 - 起飞网</title> <script type="text/javascript"> function btn_onclick() { var divMain = document.createElement("div"); document.body.appendChild(divMain); var eleSpan = document.createElement("span"); eleSpan.innerText = "欢迎访问起飞网！"; divMain.appendChild(eleSpan); } </script> </head> <body> <input type="button" value="执行代码" onclick="btn_onclick()" /> </body> </html>
在这段代码中，我们通过点击按钮来执行上面的代码。
代码的第一句，我们通过调用document.createElement(tagName)方法创建了一个div节点；然后将这个节点附加到body中。
然后创建了一个span节点，并将这个span节点附加到上面的div中，通过改变span的innerText属性来显示一句消息。
如果元素被创建了，但没有附加到文档节点中，那么这个节点是不会被显示在浏览器窗口中的。
在Javascript使用ele.removeChild(node) 从childNodes中删除node。
<div> <span>span1</span> <span>span2</span> </div> <script type="text/javascript"> var eleSpan = document.body.getElementsByTagName("span")[0]; eleSpan.parentNode.removeChild(eleSpan); </script>
在Javascript使用ele.replaceChild(newNode,oldNode) 替换DOM元素，将oldNode替换为newNode。
<div> <span>span1</span> <span>span2</span> </div> <script type="text/javascript"> var eleSpan3 = document.createElement("span"); eleSpan3.innerText = "span3"; var eleSpan = document.body.getElementsByTagName("span")[0]; eleSpan.parentNode.replaceChild(eleSpan); </script>
本文的内容涉及了Javascript对DOM最基本的添加、修改、删除和获取，在后面的章节中，我会介绍更多Javascript对DOM元素的操作，感谢您的关注！
标签：
原文地址：http://www.cnblogs.com/Crow00/p/4609870.html
