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+" "+content.value+" "+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>