html DOM 03 節點的屬性
阿新 • • 發佈：2020-07-25
示例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:
節點值
<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 onclick="changeDiv1()">通過內容節點方式改變div的內容</button> <button onclick="changeDiv2()">通過innerHTML改變div的內容</button> </html>
示例5:
元素上的屬性
元素上的屬性，比如id,value 可以通過 . 直接訪問
如果是自定義屬性，那麼可以通過如下兩種方式來獲取
<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 onclick="get()">獲取input的屬性</button> <div style="height:300px"></div> </html>