JavaScript之DOM文档对象模型
Posted 陈陈陈chen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之DOM文档对象模型相关的知识，希望对你有一定的参考价值。
1、DOM是文档对象模型（Document Object Model）的简称。
当网页加载时，可以将结构化文档在内存中转换成对象树。
简单的说，DOM并不是一种技术，而是一种访问结构化文档的思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。
2、DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：
（1）元素节点：各种标签就是这些元素节点的名称，如<ul>、<p>等；
（2）文本节点：文本节点总是被包含在元素节点的内部；
（3）属性节点：一般用来修饰元素节点的就称之为属性节点。
3、DOM对html元素的访问操作：
为了动态地修改HTML元素，须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素：
（1）根据ID访问HTML元素--通过document对象调用getElementById（）方法来查找具有唯一id属性值的元素；
如下例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="name" content="content"> <title>DOM-使用getElementById方法查找元素</title> <script type="text/javascript"> function showContent(){ var myDiv,content,txtName; with(document){ myDiv=getElementById("myDiv"); content=getElementById("content"); txtName=getElementById("txtName"); } alert(myDiv.innerHTML+"\n"+content.value+"\n"+txtName.value); } </script> </head> <body> <div id="myDiv">我的div块</div> <textarea id="content" rows="3" cols="25">好好学习,天天向上</textarea><br> <input type="text" id="txtName" value="chen"><br> <input type="button" id="btn_show" value="访问3个元素的内容" onclick="showContent()"><br> </body> </html>
（2）利用节点关系访问HTML元素。常用的属性和方法如下：
parentNode:返回当前节点的父亲节点；
previousSibling:返回当前节点的前一个兄弟节点；
nextSibling:返回当前节点的后一个兄弟节点；
childNode:返回当前节点的所有子节点；
firstChild:返回当前节点的第一个子节点；
lastChild:返回当前节点的最后一个子节点；
getElementsByTagName(tagName):返回当前节点的具有指定标签名的所有子节点。
如下例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #n4{color:red;} </style> </head> <body> <ul id="names"> <li id="n1">Bob</li> <li id="n2">PJ</li> <li id="n3">Teddy</li> <li id="n4">Chariel</li> <li id="n5">Gabe</li> <li id="n6">Dorra</li> </ul> <input type="button" value="父节点" onclick="showContent(current.parentNode)"> <input type="button" value="第一个子节点" onclick="showContent(current.parentNode.firstChild.nextSibling)"> <!--注意：在火狐谷歌浏览器里面，换行也会被认为是子节点， 如果没有加nextSibling，在火狐谷歌浏览器输出的结果会是undefined--> <input type="button" value="上一个节点" onclick="showContent(current.previousSibling.previousSibling)"> <input type="button" value="下一个节点" onclick="showContent(current.nextSibling.nextSibling)"> <input type="button" value="最后一个子节点" onclick="showContent(current.parentNode.lastChild.previousSibling)"> <input type="button" value="得到所有li元素的个数" onclick="showCount()"> <script type="text/javascript"> var current=document.getElementById("n4"); function showContent(target){ alert(target.innerHTML); } /*若是将JavaScript代码放在head标签中，那么会报错：Cannot read property ‘parentNode‘ of null 因为JavaScript是解析执行的，HTML会从上面的标签往下执行， 语句“var current=document.getElementById("n4");”没有放在函数中，还没有解析到ul标签，就去找n4了， 所以会出错。解决方法之一是将JavaScript代码放在最后面，就是放在</body>前面。 还有一种解决方法就是先让HTML结构加载完毕之后再执行。 */ function showCount(){ alert(document.getElementsByTagName("li").length); } </script> </body> </html>
以上是关于JavaScript之DOM文档对象模型的主要内容，如果未能解决你的问题，请参考以下文章