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>
4、DOM访问表单控件的常用属性和方法如下：
action:返回该表单的提交地址；
method:返回表单内的method属性，主要有post和get两个值；
target:确定提交表单时的结果窗口，主要有"_self"、"_blank"、"_top"等；
elements:返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件；
length:返回表单内表单域的个数；
reset()、submit():重置表单和确定表单方法。
--------------------------------------------------------------
在elements返回的数组中访问具体的表单控件语法如下:
.elements[index]:返回该表单中第index个表单控件；
.elements[elementName]:返回表单内id或name为elementName的表单控件；
.elementName:返回表单内id或name为elementName的表单控件。
----------------------------------------------------------------
如下例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>提交表单控件</title> <script type="text/javascript"> function operatorForm(){ var myForm=document.forms[0];//document.forms可以得到所有表单,即表单数组 alert(myForm.action); alert(myForm.method); alert(myForm.target); myForm.submit(); } /*总结：DOM访问表单控件常用的属性和方法如下： action:返回该表单的提交地址； method:返回表单内的method属性，主要有post和get两个值； target:确定提交表单时的结果窗口，主要有"_self"、"_blank"、"_top"等； elements:返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件； length:返回表单内表单域的个数； reset()、submit():重置表单和确定表单方法。 在elements返回的数组中访问具体的表单控件语法如下: .elements[index]:返回该表单中第index个表单控件； .elements[elementName]:返回表单内id或name为elementName的表单控件； .elementName:返回表单内id或name为elementName的表单控件。 */ </script> </head> <body> <form id="myForm" action="#" method="get" target="_self"> <input type="text" name="userName" value="chen"><br> <input type="text" name="password" value="123456"><br> <select name="city"> <option value="shanghai">上海</option> <option value="nanjing" selected="selected">南京</option> </select><br> <input type="button" value="获取表单内的第一个控件" onclick="alert(document.getElementById('myForm').elements[0].value);"><br> <input type="button" value="获取表单内的第二个控件" onclick="alert(document.getElementById('myForm').elements['password'].value);"><br> <input type="button" value="获取表单内的第三个控件" onclick="alert(document.getElementById('myForm').city.value);"><br> <input type="button" value="操作表单" onclick="operatorForm()"><br> </form> </body> </html>
5、DOM访问列表框、下拉菜单的常用属性：
form:返回列表框、下拉菜单所在的表单对象；
length:返回列表框、下拉菜单的选项个数；
options:返回列表框、下拉菜单里所有的选项组成的数组；
selectedIndex:返回下拉列表中选中项的索引；
type:返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one。
-----------------------------------------------------------------------------------------------
使用options[index]返回具体选项所对应的常用属性：
defaultSelected:返回该选项默认是否被选中；
index:返回该选项在列框、下拉菜单中的索引；
selected:返回该选项是否被选中；
text:返回该选项呈现的文本；
value:返回该选项的value属性值。
------------------------------------------------------------------------
如下例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>查找列表框、下拉菜单控件</title> <!----> </head> <body> <select id="city" name="city" size="5"> <option value="beijing">北京</option> <option value="shanghai" selected="selected">上海</option> <option value="hangzhou">杭州</option> <option value="xian">西安</option> <option value="shenzhen">深圳</option> <option value="guangzhou">广州</option> </select><br> <input type="button" value="第一个城市" onclick="change(s_city.options[0])"> <input type="button" value="上一个城市" onclick="change(s_city.options[s_city.selectedIndex-1])"> <input type="button" value="下一个城市" onclick="change(s_city.options[s_city.selectedIndex+1])"> <input type="button" value="最后一个城市" onclick="change(s_city.options[s_city.length-1])"> <script type="text/javascript"> var s_city=document.getElementById("city"); var change=function(city){ alert(city.text);//text返回的是该选项呈现的文本，若是value则返回该选项的value属性值 } /*总结：DOM访问列表框、下拉菜单的常用属性如下： form:返回列表框、下拉菜单所在的表单对象； length:返回列表框、下拉菜单的选项个数； options:返回列表框、下拉菜单里所有的选项组成的数组； selectedIndex:返回下拉列表中选中项的索引； type:返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one。 使用options[index]返回具体选项所对应的常用属性： defaultSelected:返回该选项默认是否被选中； index:返回该选项在列框、下拉菜单中的索引； selected:返回该选项是否被选中； text:返回该选项呈现的文本； value:返回该选项的value属性值。 */ </script> </body> </html>
6、DOM访问表格子元素的常用属性和方法如下：
caption:返回表格的标题对象；
rows:返回该表格里的所有表格行；
tbodies:返回该表格里所有<tbody.../>元素组成的数组；
tfoot:返回该表格里所有<tfoot.../>元素；
thead:返回该表格里所有<thead.../>元素。
通过rows[index]返回表格指定的行所对应的属性：
cells:返回该表格行内所有的单元格组成的数组；
rowIndex:返回该表格行在表格内的索引值；
sectionRowIndex:返回该表格行在其所在元素(tbody、thead等元素)的索引值。
通过cells[index]返回表格指定的列所对应的属性：
cellIndex:返回该单元格在表格行内的索引值。
例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>查找表单控件</title> <script type="text/javascript"> function update(){ var row=document.getElementById("row").value; var cel=document.getElementById("cel").value; var t=document.getElementById("myTable"); //t.rows[row-1].cells[cel-1].innerHTML=document.getElementById("content").value; t.rows.item(row-1).cells.item(cel-1).innerHTML=document.getElementById("content").value; alert("修改成功!"); } /*总结：DOM访问表格子元素的常用属性和方法如下： caption:返回表格的标题对象； rows:返回该表格里的所有表格行； tbodies:返回该表格里所有<tbody.../>元素组成的数组； tfoot:返回该表格里所有<tfoot.../>元素； thead:返回该表格里所有<thead.../>元素。 通过rows[index]返回表格指定的行所对应的属性： cells:返回该表格行内所有的单元格组成的数组； rowIndex:返回该表格行在表格内的索引值； sectionRowIndex:返回该表格行在其所在元素(tbody、thead等元素)的索引值。 通过cells[index]返回表格指定的列所对应的属性： cellIndex:返回该单元格在表格行内的索引值。 */ </script> </head> <body> <table id="myTable" border="1"> <caption>编程语言</caption> <tr> <td>C</td> <td>C++</td> </tr> <tr> <td>J2EE</td> <td>Android</td> </tr> <tr> <td>Web</td> <td>PHP</td> </tr> </table> <input type="button" value="表格标题" onclick="alert(document.getElementById('myTable').caption.innerHTML);"> <input type="button" value="第一行、第一格" onclick="alert(document.getElementById('myTable').rows[0].cells[0].innerHTML);"> <input type="button" value="第二行、第二格" onclick="alert(document.getElementById('myTable').rows[1].cells[1].innerHTML);"> <input type="button" value="第三行、第二格" onclick="alert(document.getElementById('myTable').rows[2].cells[1].innerHTML);"><br> 设置指定单元格的值：第<input type="text" id="row" size="2">行, 第<input type="text" id="cel" size="2">列的值为 <input type="text" id="content" size="10"> <input type="button" id="btn_set" value="修改" onclick="update()"> </body> </html>
689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
