一.绪论
DOM是文档对象模型(Document Object Module)的简称,借助DOM模型,可以将结构化文档,转换成DOM树,程序可以访问,修改,增加,删除树的节点。程序通过操作DOM树时,结构化文档也会随之
动态改变。
DOM并不是一种技术,它只是访问结构化文档的一种思想,各种语言都有自己的DOM解释器。
DOM为常用的HTML元素提供了一整套的继承体系,从页面的document对象到每个常用的HTML元素,DOM模型都提供了对应的类,每个类都提供了相应的方法来操作元素本身,属性及其子元素。DOM模型允许
以树的形式操作HTML文档的每一个元素。
HTML中,Node,Document,Element,HTMLELement都是普通HTML元素的超类,不直接对应于HTML页面的控件。但他们所包含的方法也可被其他页面元素调用。
二.访问HTML元素
1.根据Id访问HTML元素
document.getElementById(idVal):返回文档中Id属性为idVal的HTML元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据Id访问HTML元素</title> <script type="text/javascript"> var accessById = function(){ alert(document.getElementById("a").innerHTML+"\n"+document.getElementById("b").value); } </script> </head> <body> <div id="a">疯狂java讲义</div> <textarea id="b" cols="30" rows="3">轻量级javaEE企业应用实战</textarea> <input type="button" value="访问2个元素" onclick="accessById()"/> </body> </html>
innerHTML属性:该属性代表该元素的内容。当某个元素的开始标签和结束标签之间都是字符串内容时(不包含其他子元素),JavaScript子元素可通过它的innerHTML属性返回这些字符串内容
value属性:<textarea.../>是一个表单控件,开始标签和结束标签之间的内容都是它的值,只能通过value属性来访问。不仅如此,,还有<input.../>元素所生成的表单控件,包括单行文本框,各种按钮等,
它们的可视化文本都有value属性控制,因此通过value属性获取它们的内容。除此之外的HTML元素,包括列表框,下拉菜单的列表项,<label.../>表单域,<button.../>按钮,都应通过innerHTML
来获取它们的内容。
2.根据css选择器访问HTML元素
根据CSS选择器来访问HTML元素由document的如下方法提供
a)Element querySeletor(seletors):该方法的参数既可是一个CSS选择器,也可是用逗号隔开的多个CSS选择器,该方法返回HTML文档中第一个匹配选择器参数的HTML元素。
下面代码示范了querySeletor()的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据选择器访问HTML元素</title> <script type="text/javascript"> var accessById = function() { alert(document.querySelector("#a").innerHTML+"\n"+document.querySelector("#b").value); } </script> </head> <body> <div id="a">疯狂java讲义</div> <textarea id="b" cols="30" rows="3">轻量级javaEE企业应用实战</textarea> <input type="button" value="访问2个元素" onclick="accessById()"/> </body> </html>
b)NodeList querySeletorALl(seletors):该方法与前一个方法的用法类似,只是该方法将返回所有符合CSS选择器的HTML元素 。
下面代码示范了querySeletorAll()的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据选择器访问HTML元素</title> <script type="text/javascript"> var change = function() { var divList = document.querySelectorAll("div"); alert(divList); for(var i in divList) { divList[i].innerHTML = "测试内容"+ i; divList[i].style.width = '300px'; divList[i].style.height = '50px'; divList[i].style.margin = '10px'; divList[i].style.backgroundColor = '#faa'; } } </script> </head> <body> <div></div> <div></div> <div></div> <input type="button" onclick="change();" value="修改全部div元素"/> </body> </html>
3.利用节点关系访问HTML元素
一旦获取了某个HTML元素,由于该元素实际上与DOM树的某个节点对应,因此可以利用节点之间的父子、兄弟关系来访问HTML元素。
利用节点关系访问HTML元素的方法如下:
Node parentNode:返回当前节点的父节点。只读属性。
Node previousSibling:返回当前节点的前一个兄弟节点,只读属性。
Node nextSibling:返回当前节点的后一个兄弟节点,只读属性。
Node[] childNodes:返回当前节点的所有子节点,只读属性。
Node[] getElementByTagName(tagName):返回当前节点的具有指定标签名的所有子节点。
Node firstChild:返回当前节点的第一个子节点,只读属性
Node lastChild:返回当前节点的最后一个子节点,只读属性。
下面页面代码示范了如何利用节点关系访问HTML元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据节点关系访问HTML元素</title> <style type="text/css"> .selected{ background-color: #66f; } </style> </head> <body> <ol id="books"> <li id="java">疯狂Java讲义</li> <li id="ssh">轻量级JavaEE企业应用实战</li> <li id="ajax" class="selected">疯狂Ajax讲义</li> <li id="xml">疯狂xml讲义</li> <li id="ejb">经典JavaEE企业应用实战</li> <li id="android">疯狂Android讲义</li> </ol> <input type="button" value="父节点" onclick="change(curTarget.parentNode);"/> <input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/> <input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/> <input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/> <input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/> <script type="text/javascript"> var curTarget = document.getElementById("ajax"); var change = function(target) { alert(target.innerHTML); } </script> </body> </html>
4.访问表单控件
一.绪论
DOM是文档对象模型(Document Object Module)的简称,借助DOM模型,可以将结构化文档,转换成DOM树,程序可以访问,修改,增加,删除树的节点。程序通过操作DOM树时,结构化文档也会随之
动态改变。
DOM并不是一种技术,它只是访问结构化文档的一种思想,各种语言都有自己的DOM解释器。
DOM为常用的HTML元素提供了一整套的继承体系,从页面的document对象到每个常用的HTML元素,DOM模型都提供了对应的类,每个类都提供了相应的方法来操作元素本身,属性及其子元素。DOM模型允许
以树的形式操作HTML文档的每一个元素。
HTML中,Node,Document,Element,HTMLELement都是普通HTML元素的超类,不直接对应于HTML页面的控件。但他们所包含的方法也可被其他页面元素调用。
二.访问HTML元素
1.根据Id访问HTML元素
document.getElementById(idVal):返回文档中Id属性为idVal的HTML元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据Id访问HTML元素</title> <script type="text/javascript"> var accessById = function(){ alert(document.getElementById("a").innerHTML+"\n"+document.getElementById("b").value); } </script> </head> <body> <div id="a">疯狂java讲义</div> <textarea id="b" cols="30" rows="3">轻量级javaEE企业应用实战</textarea> <input type="button" value="访问2个元素" onclick="accessById()"/> </body> </html>
innerHTML属性:该属性代表该元素的内容。当某个元素的开始标签和结束标签之间都是字符串内容时(不包含其他子元素),JavaScript子元素可通过它的innerHTML属性返回这些字符串内容
value属性:<textarea.../>是一个表单控件,开始标签和结束标签之间的内容都是它的值,只能通过value属性来访问。不仅如此,,还有<input.../>元素所生成的表单控件,包括单行文本框,各种按钮等,
它们的可视化文本都有value属性控制,因此通过value属性获取它们的内容。除此之外的HTML元素,包括列表框,下拉菜单的列表项,<label.../>表单域,<button.../>按钮,都应通过innerHTML
来获取它们的内容。
2.根据css选择器访问HTML元素
根据CSS选择器来访问HTML元素由document的如下方法提供
a)Element querySeletor(seletors):该方法的参数既可是一个CSS选择器,也可是用逗号隔开的多个CSS选择器,该方法返回HTML文档中第一个匹配选择器参数的HTML元素。
下面代码示范了querySeletor()的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据选择器访问HTML元素</title> <script type="text/javascript"> var accessById = function() { alert(document.querySelector("#a").innerHTML+"\n"+document.querySelector("#b").value); } </script> </head> <body> <div id="a">疯狂java讲义</div> <textarea id="b" cols="30" rows="3">轻量级javaEE企业应用实战</textarea> <input type="button" value="访问2个元素" onclick="accessById()"/> </body> </html>
b)NodeList querySeletorALl(seletors):该方法与前一个方法的用法类似,只是该方法将返回所有符合CSS选择器的HTML元素 。
下面代码示范了querySeletorAll()的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据选择器访问HTML元素</title> <script type="text/javascript"> var change = function() { var divList = document.querySelectorAll("div"); alert(divList); for(var i in divList) { divList[i].innerHTML = "测试内容"+ i; divList[i].style.width = '300px'; divList[i].style.height = '50px'; divList[i].style.margin = '10px'; divList[i].style.backgroundColor = '#faa'; } } </script> </head> <body> <div></div> <div></div> <div></div> <input type="button" onclick="change();" value="修改全部div元素"/> </body> </html>
3.利用节点关系访问HTML元素
一旦获取了某个HTML元素,由于该元素实际上与DOM树的某个节点对应,因此可以利用节点之间的父子、兄弟关系来访问HTML元素。
利用节点关系访问HTML元素的方法如下:
Node parentNode:返回当前节点的父节点。只读属性。
Node previousSibling:返回当前节点的前一个兄弟节点,只读属性。
Node nextSibling:返回当前节点的后一个兄弟节点,只读属性。
Node[] childNodes:返回当前节点的所有子节点,只读属性。
Node[] getElementByTagName(tagName):返回当前节点的具有指定标签名的所有子节点。
Node firstChild:返回当前节点的第一个子节点,只读属性
Node lastChild:返回当前节点的最后一个子节点,只读属性。
下面页面代码示范了如何利用节点关系访问HTML元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据节点关系访问HTML元素</title> <style type="text/css"> .selected{ background-color: #66f; } </style> </head> <body> <ol id="books"> <li id="java">疯狂Java讲义</li> <li id="ssh">轻量级JavaEE企业应用实战</li> <li id="ajax" class="selected">疯狂Ajax讲义</li> <li id="xml">疯狂xml讲义</li> <li id="ejb">经典JavaEE企业应用实战</li> <li id="android">疯狂Android讲义</li> </ol> <input type="button" value="父节点" onclick="change(curTarget.parentNode);"/> <input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/> <input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/> <input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/> <input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/> <script type="text/javascript"> var curTarget = document.getElementById("ajax"); var change = function(target) { alert(target.innerHTML); } </script> </body> </html>
4.访问表单控件