DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链,作为一个DOM对象,就可以使其隐藏,修改其href指向的地址。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链,作为一个DOM对象,就可以使其隐藏,修改其href指向的地址。
- 节点概念
DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点
如本例
通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点
<html> <body> <div id="d1">hello HTML DOM</div> </body> <script> function p(s){ document.write(s); document.write("<br>"); } var div1 = document.getElementById("d1"); p("文档节点"+document); p("元素"+div1); p("属性节点"+div1.attributes[0]); p("内容节点"+div1.childNodes[0]); </script> </html>
- HTML DOM 获取元素节点
1.通过id获取元素节点
在设计html的时候,一个元素对应的id应该是唯一的。
可以通过document.getElementById 获取某个元素对应的元素节点对象
<html> <div id="d1">hello HTML DOM</div> <script> var div1 = document.getElementById("d1"); document.write(div1); </script> </html>
2.通过标签名称获取元素节点
所有的元素都有标签名
通过 getElementsByTagName 根据标签名称获取一个元素数组。
<html> <div >hello javascript</div> <div >hello BOM</div> <div >hello DOM</div> <br> <script> var divs = document.getElementsByTagName("div"); for(i=0;i<divs.length;i++){ document.write(divs[i]); document.write("<br>"); } </script> </html>
3.通过类名获取元素节点
与 getElementsByTagName 类似的,也可以通过 getElementsByClassName 根据class返回一个节点数组
<html> <h1 class="d" >hello javascript</h1> <h2 class="d" >hello BOM</h2> <div class="d" >hello DOM</div> <br> <script> var elements= document.getElementsByClassName("d"); for(i=0;i<elements.length;i++){ document.write(elements[i]); document.write("<br>"); } </script> </html>
4.通过表单元素的name获取元素节点
表单元素都有name属性,通过getElementsByName可以根据name属性的值,获取元素节点。
<html> 用户名 <input name="userName"> <br> 密码 <input name="userPassword"> <br> <script> var elements= document.getElementsByName("userName"); for(i=0;i<elements.length;i++){ document.write(elements[i]); document.write("<br>"); } </script> </html>
5.为什么会获取不到?
参考本例代码,和通过id获取元素节点同样的代码 document.getElementById却无法获取元素节点。
这是因为javascript是解释语言,是顺序执行的。 在执行到 document.getElementById的时候,div标签还没有加载,所以无法获取。
<html> <script> var div1 = document.getElementById("d1"); document.write(div1); </script> </html> <div id="d1">hello HTML DOM</div>
6.获取属性节点
首先通过getElementById获取元素节点,然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个,所以是以数组的形式返回出来的,接着通过for循环遍历,查看每个节点的nodeName和nodeValue
如果要获取一个指定属性的值,可以采用如下风格,as表示所有的属性,as["id"]取出名称是id的属性
as["id"].nodeValue
注: nodeName和nodeValue表示一个节点的名称和值
<html> <div id="d1" align="center" class="abc">hello HTML DOM</div> <script> var div1 = document.getElementById("d1"); var as = div1.attributes; document.write("div总共有"+as.length +" 个属性"); document.write("分别是:"); for(i = 0; i< as.length; i++){ document.write("<br>"); document.write(as[i].nodeName); document.write(":"); document.write(as[i].nodeValue); } document.write("<br>"); document.write("div的id属性值是:"+ as["id"].nodeValue); </script> </html>
7.获取内容节点
首先通过document.getElementById获取元素节点,然后通过childNodes获取其所有的子节点。 其中第一个子节点,就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
注: nodeName和nodeValue表示一个节点的名称和值
<html> <div id="d1" align="center" class="abc">hello HTML DOM</div> <script> var div1 = document.getElementById("d1"); var content = div1.childNodes[0]; document.write("div的内容节点名是:"+content.nodeName); document.write("<br>"); document.write("div的内容节点值是:"+content.nodeValue); </script> </html>
- HTML DOM 获取元素节点的属性
1.节点名称
nodeName表示一个节点的名字
如本例:
document.nodeName 文档的节点名,是 固定的#document
div1.nodeName 元素的节点名,是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名,是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名,是固定的 #text
<html> <div id="d1">hello HTML DOM</div> <script> function p(s){ document.write(s); document.write("<br>"); } var div1 = document.getElementById("d1"); p("document的节点名称:"+document.nodeName); p("div元素节点的节点名称:"+div1.nodeName); p("div下属性节点的节点名称:"+div1.attributes[0].nodeName); p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName); </script> </html>
2.节点值
nodeValue表示一个节点的值
如本例:
document.nodeValue 文档的节点值,是 null
div1.nodeValue 元素的节点值,是null
div1.attributes[0].nodeValue 属性的节点值,是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值,是内容
<html> <div id="d1">hello HTML DOM</div> <script> function p(s){ document.write(s); document.write("<br>"); } var div1 = document.getElementById("d1"); p("document是没有nodeValue的:"+document.nodeValue); p("元素节点是没有nodeValue的:"+div1.nodeValue); p("属性节点id的nodeValue:"+div1.attributes[0].nodeValue); p("内容节点的nodeValue:"+div1.childNodes[0].nodeValue); </script> </html>
3.节点类型
nodeType表示一个节点的值
不同的节点类型,对应的节点类型值是不一样的
如本例:
document.nodeType 文档的节点类型,是 9
div1.nodeType 元素的节点类型,是 1
div1.attributes[0].nodeType 属性的节点类型,是 2
div1.childNodes[0].nodeType 内容的节点类型,是 3
<html> <div id="d1">hello HTML DOM</div> <script> function p(s){ document.write(s); document.write("<br>"); } var div1 = document.getElementById("d1"); p("document的nodeType是:"+document.nodeType); p("元素节点的nodeType是:"+div1.nodeType); p("属性节点的nodeType是:"+div1.attributes[0].nodeType); p("内容节点的nodeType是:"+div1.childNodes[0].nodeType); </script> </html>
4.元素的文本内容
修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。 效果是一样的。
<html> <div id="d1">hello HTML DOM</div> <script> function changeDiv1(){ document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容"; } function changeDiv2(){ document.getElementById("d1").innerHTML= "通过innerHTML改变内容"; } </script> <button οnclick="changeDiv1()">通过内容节点方式改变div的内容</button> <button οnclick="changeDiv2()">通过innerHTML改变div的内容</button> </html>
5.元素上的属性
元素上的属性,比如id,value 可以通过 . 直接访问
如果是自定义属性,那么可以通过如下两种方式来获取
注: class需要通过className获取getAttribute("test") attributes["test"].nodeValue
<html> <div id="d1">hello HTML DOM</div> <script> function get(){ var input1 = document.getElementById("input1"); var s = "id="+input1.id + "<br>"; s += "value="+input1.value + "<br>"; s += "class="+input1.className + "<br>"; s += "test="+input1.getAttribute("test")+ "<br>"; s += "test="+input1.attributes["test"].nodeValue+ "<br>"; document.getElementById("d1").innerHTML= s; } </script> <input id="input1" class="class1 class2" test="t1" value="这是一个输入框"> <br> <button οnclick="get()">获取input的属性</button> <div style="height:30px"></div> </html>