HTML DOM ——常用知识点小结
一、ＤＯＭ对象：
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
而对HTML的修改，很多要通过DOM对象的操作来实现的
二、常用操作：
查找节点：
１、getElementById(elementId)
//寻找一个有着给定id属性值的元素，返回一个元素节点
２、getElementsByTagName(tagName)
//用于寻找有着给定标签名的所有元素
３、getElementsByName(elementName)
//在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可
综合实例：
<html> <body> <p id="intro" >这是ID选择器的实例</p> <div id="main"> <p>这是标签选择器的实例</p> </div> <script> //使用ID选择器 x=document.getElementById("intro"); document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>'); //使用标签选择器 var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML); </script> </body> </html>
创建节点
１、document.createElement(element)
//参数为要新添的节点标签名
２、document.createTextNode(string)
//创建一个包含着给定文本的新文本节点
综合实例：
<!DOCTYPE html> <html> <body> <script> //创建一个节点 node=document.createElement("z") //带文本的节点 textnode=document.createTextNode("hello"); </script> </body> </html>
添加节点:
１、//添加子节点：
node.appendChild(newChild) //newChild为生新增的节点
２、//插入节点
node.insertBefore(newNode,targetNode)；
node.insertAfter(newNode,targetNode);
综合实例：
<html> <body> <script> var i_nowline=1;var i_nowwidth=320;var i_nowheight=200; function rdl_fnAppend(){ var oNewNode=document.createElement("li"); oList.appendChild(oNewNode); i_nowline=i_nowline+1;i_nowheight+=15; oNewNode.innerText="第"+i_nowline.toString()+"个列表项目"; window.resizeTo(i_nowwidth,i_nowheight); } </script> <ul id=oList> <li>第1个列表项目 </ul> <input type=button value=" 添加 " onclick="rdl_fnAppend()"> </body> </html>
删除节点：
１、//删除节点node.removeChild(node)
２、//IE支持，但FF不支持,node.removeNode()推荐用removeChild代替实现
综合实例：
<script> var i_nowwidth=320;var i_nowheight=240; function rdl_doRemove(){ with (document.all("oParent")) { if (children.length<1) return; removeChild(children[0]); } i_nowheight=i_nowheight-15; window.resizeTo(i_nowwidth,i_nowheight); } </script> <div id=oParent> <div>第1个子对象</div> <div>第2个子对象</div> <div><a href="#" onclick="return false;">第3个子对象</a></div> <div>第4个子对象</div> </div> <br><input type=button value=" 删除第一个子对象 " onclick="rdl_doRemove()">
三、常用节点属性：
1、.nodeName//只读，返回节点名称，相当于tagName.
2、.nodeValue//可读可写，但对元素节点不能写。返回一个字符串，指示这个节点的值。元素节点返回null，
属性节点返回属性值，文本节点返回文本。一般只用于设置文本节点的值。
3、.nodeType//只读，返回节点类型：1，元素节点；2，属性节点；3，文本节点。
4、node.contains() //是否包含某节点，返回boolean值,IE支持，FF不支持contains()，但支持W3C标准
5、node.hasChildNodes()//是否有子节点，返回boolean值
综合实例：
<html> <body> <p id="intro">Hello World!</p> <script> var txt1=document.getElementById("intro").nodeName;// nodename例子 document.write(txt1); var txt2=document.getElementById("intro").nodevalue;//nodevalue 例子 document.write(txt2); var txt3=document.getElementById("intro").nodetype;//nodetype 例子 document.write(txt3); var txt4=document.getElementById("intro").contains();contains()例子 document.write(txt4); var txt5=document.getElementById("intro").hasChildNodes();hasChildNodes例子 document.write(txt5); </script> </body> </html>
四、ＤＯＭ小结
DOM 定义了访问和操作 HTML 文档的标准方法。而各个浏览器因为其内核的不同，因而对DOM元素解析也不尽相同，因此具体的应用，还需要在具体的实践中积累，文章所列举的一些DOM方法或是属性，都是一些最常用的，至于更全面的，更详细的，送个福利吧（点击下载DOM手册）