- A+
JavaScript DOM 编程
DOM
- D：文档 - html 文档或 xml 文档 - O：对象 - document 对象的属性和方法 - M：模型 - DOM 是针对 xml 的基于树的API - DOM 树：节点的层次 - DOM 把一个文档表示为一颗家谱树（父，子，兄弟） - DOM 定义了 Node 接口以及许多种节点类型来表示 XML 节点的多个方面
1，节点及其类型
节点：来源于网络理论，代表网络中一个连接点，网络是由节点构成的集合
①，元素节点
②，属性节点：元素的属性，可以直接通过属性的方式来操作
③，文本节点：是元素节点的子节点，其内容为文本
2，在 html 文档的什么位置编写 js 代码
① 直接在 HTML 页面中书写 js代码
<button id="button" onclick="alert('hello world');">Click Me!</button>
缺点：
a，js 和 HTML 强耦合，不利于代码的维护
b，若 click 相应函数是比较复杂的，则需先定义一个函数，然后在 onclick 属性中完成对函数的引用，比较麻烦
② 一般的，不能在 body 节点之前来直接获取 body 内的节点，因为此时 html 文档树还没有加载完成，获取不到指定的节点
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> var cityNode = document.getElementById("city"); alert(cityNode); </scitpt> </head> <body> </body> </html>
③ 可以在整个 HTML 文档的最后编写类似代码，但这不符合习惯
④ 一般的，在 body 节点之前编写 js代码，但需要利用 windom.onload 事件，该事件在当前文档完全加载之后被触发，如：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ // js代码 } </scitpt>
</head> <body> </body> </html>
Node接口的特性和方法
nodeName：String，说明： nodeVale：String nodeType：Number ownerDocument：Document firstChild：Node lastChild：Node childNodes：NodeList previousSibling：Node nextSibling：Node hasChildNodes()：Boolean attributes：NameNodeMap appendChild(node)：Node removeChild(node)：Node replaceChild(newnode,oldnode)：Node insertBefore(newnode,refnode)：Node
以下实例中使用到的 HTML
<body> <p>你喜欢那个城市？</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏？</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender:<input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female name:<input type="text" name="username" id="name" value="chuxiaojiang"> </body>
3，如何来获取元素节点
① **document.getElementById：
根据 id 属性获取对应的单个节点，该方法为 document对象的方法
② **document.getElementsByTagName：
根据标签名获取指定节点名字的数组，数组对象length属性可以获取数组的长度，
该方法为 Node接口的方法，即任何一个节点都有这个方法
③ document.getElementsByName：
根据节点的 name属性获取符合条件的节点数组，但IE的实现方式和 w3c标准有差别：
在html 文档中若某节点(li) 没有 name 属性，
则 IE 使用 document.getElementsByName 不能获取到节点数组，在火狐可以
④ 其它的两个方法 ，IE根本不支持，所以不建议使用
4，获取属性节点
① **可以直接通过 cityNode.id 这样的方式来获取和设置属性节点(某一指定的元素节点的属性)的值，如：
var nameNode = documentElementById("name"); // 获取元素
alert(nameNode.value); // 获取元素的值
nameNode.value = "chuxiaojiang"; // 设置元素的值
② 通过元素节点的 getAttributeNode 方法来获取属性节点，然后在通过 nodeValue 来读写属性值
5，获取元素节点的子节点（**只有元素节点才有子节点）
使用下面的属性时都需要先获取相应的元素节点，
① childNodes属性获取全部的子节点：火狐和IE的实现方式有区别
② firstChild属性获取第一个节点
③ lastChild属性获取最后一个子节点
6，获取文本节点
① 步骤：元素节点 --> 获取元素节点的子节点
② 若元素节点只有文本节点一个子节点，
例如 <li id="bj" name="BeiJing">北京</li>，可以先获取到指定的元素节点 eleNode，
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值
7，节点的属性
① nodeName：代表当前节点的名字，只读属性，
如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串
② nodeType：返回一个整数，这个数值代表着给定节点的类型，只读属性
1 -- 元素节点，2 -- 属性节点，3 -- 文本节点
③ nodeValue：返回给定节点的当前值（字符串），可读写属性
a，元素节点，返回值是 null
b，属性节点：返回值是这个属性的值
c，文本节点：返回值是这个文本节点的内容
如：
<script type="text/javascript"> // 关于节点属性：nodeType，nodeName，nodeValue // 在文档中，任何一个节点都有这3个属性 // 而 id，name，value 是具体节点的属性 window.onload = function(){ // 1，元素节点的这 3 个属性 var bjNode = document.getElementById("bj"); alert(bjNode.nodeType); // 元素节点：1 alert(bjNode.nodeName); // 节点名：li alert(bjNode.nodeValue); // 元素节点没有 nodeValue 属性值：null // 2，属性节点 var nameAttr = document.getElementById("name").getAttrbuteNode("name"); alert(nameAttr.nodeType); // 属性节点：2 alert(nameAttr.nodeName); // 属性节点的节点名：属性名 alert(nameAttr.nodeValue); // 属性节点的 nodeValue 属性值：属性值 // 3，文本节点 var textNode = bjNode.firstChild; alert(textNode.nodeType); // 文本节点：3 alert(textNode.nodeName); // 节点名：#text alert(textNode.nodeValue); // 文本节点的 nodeValue 属性值：文本值本身 // nodeType，nodeName 是只读的，nodeValue 是可以改变的 // 以上三个属性只有在文本节点中使用 nodeValue 读写文本值时使用最多 } </script>
8，创建一个元素节点
① createElement()：按照给定的标签名创建一个新的元素节点，该方法只有一个参数：
被创建的元素节点的名字，是一个字符串。
方法的返回值：是一个指向新建节点的引用指针，返回值是一个元素节点，所以它的 nodeType 属性等于 1.
新元素节点不会自动添加到文档里，它只是一个存在于 JavaScript 上下文的对象
如：
<script type="text/javascript"> window.onload = function(){ // 新创建一个元素节点，并把该节点添加为文档中指定节点的子节点 var liNode = document.createElement("li"); var xmText = document.createTextNode("厦门"); // 创建 "厦门" 文本节点 liNode.appendChild(xmText); var cityNode = document.getElementById("city"); cityNode.appendChild(liNode); } </script>
9，创建一个文本节点
① createTextNode()：创建一个包含着给定文本的新文本节点，
这个方法的返回值是一个指向新建文本节点引用指针，
它是一个文本节点，所以它的 nodeType 属性等于 3，
方法只有一个参数：新建文本节点所包含的文本字符串，新元素节点不会自动添加到文档中
10，为元素节点添加子节点
① appendChild()：var reference = element.appendChild(newChild)：
给定子节点 NewChild 将成为给定元素节点 element 的最后一个子节点，
方法的返回值是一个指向新增子节点的引用指针。
11，节点的替换
① replaceChild()：把一个给定父元素里的一个子节点替换为另一个子节点，
var reference = element.replaceChild(newChild,oldChild)，返回值是一个指向已被替换的哪个子节点（旧节点）的引用指针
② 该节点除了替换功能以外还有移动的功能
③ 该方法只能完成单向替换，若需要使用双向替换，需要自定义函数：
12，插入节点
① insertBefore()：把一个给定节点插入到一个给定元素节点的给定子节点的前面，
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面，
节点 targetNode 必须是 element 元素的一个子节点。
如：
window.onload = function(){ var cityNode = document.getElementById("city"); var bjNode = document.getElementById("bj"); var rlNode = docuement.getElementById("rl"); cityNode.insertBefore(rlNode,bjNode); }
② 自定义 insertAfter() 方法
13，删除节点
① removeChild()：从一个给定元素里删除一个子节点：var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针，
某个节点被 removeChild() 方法删除时，这个节点所包含的所有子节点将同时被删除，
如果想删除某个节点，但不知道它的的父节点是哪一个，parentNode 属性可以帮忙
如：
var bjNode = document.getElementById("bj"); // 找到要删除的节点
bjNode.parentNode.removeChild(bjNode); // 利用要删除的节点的父节点执行删除操作
14，innerHTML 属性
① 浏览器几乎都支持该属性，但不是 DOM 标准的组成部分，
innerHTML 属性可以用来读写某个给定元素里的 HTML 内容
