JAVAscript學習筆記 jsDOM 第五節 （原創） 參考js使用表
阿新 • • 發佈：2018-06-05
doctype count1 長度 pan dom ID BE func alert
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JsDOM對象</title> <script type="text/javascript" src="tzy.js"></script> </head> <body> <p name = "pn">hello</p> <p name = "pn">hello</p> <p name = "pn">hello</p> <p name = "pn">hello</p> <a id = "aid" title = "title屬性"></a> <ul><li id="li1">1</li><li>2 3</li><li>3</li></ul> <div id="div"> <p id="pid">我是p節點</p> <p id="pid1">我是p1節點</p> </div> <script> function getName() { var count = document.getElementsByName("pn");//根據name獲取 alert("count長度"+count.length);//看是否獲取到 var p = count[2]; p.innerHTML = "world"; var count1 = document.getElementsByTagName("p");//根據標簽名獲取 alert("count1長度"+count1.length); var p1 = count1[3]; p1.innerHTML = "hahaha"; } getName(); function getSetAttr() { var a = document.getElementById("aid");//根據id獲取 var attr = a.getAttribute("title");//獲取當前元素某個屬性值 alert(attr); a.setAttribute("id","動態被設置為id")//設置當前元素某個屬性值 var attr1 =a.getAttribute("id"); alert(attr1); } getSetAttr(); function getChildNode(){ var childnode = document.getElementsByTagName("ul")[0].childNodes;//獲取子節點項，註意ul裏面空格也會算子節點，所以要去掉空格 alert("ul的字節點數"+childnode.length); alert("ul裏的第一個子節點類型"+childnode[0].nodeType);//有疑問 alert("ul裏的第二個子節點類型"+childnode[1].nodeType); } getChildNode(); function getParentNode() { var li1 = document.getElementById("li1"); alert("li1的父節點"+li1.parentNode.nodeName);//獲取父節點及名字 } getParentNode(); function createNode(){ var body = document.body;//獲取body var input = document.createElement("input");//創建節點 input.type = "button"; input.value = "自建按鈕"; body.appendChild(input);//將節點添加到body中 //createTextNode()添加文本節點 } createNode(); function addNode() { var div = document.getElementById("div"); var node = document.getElementById("pid"); var newnode = document.createElement("p"); newnode.innerHTML = "這是我添加的p節點"; div.insertBefore(newnode,node);//添加節點到某個節點前 } addNode(); function removeNode() { var div = document.getElementById("div"); var p = div.removeChild(div.childNodes[2]);//刪除p節點因為空格算一個節點 } removeNode(); function getSize(){ //offsetheight 網頁尺寸（不包含滾動條） //scrollheight 網頁尺寸（包含滾動條） var height = document.body.offsetHeight||document.documentElement.offsetHeight;//兼容性寫法 var width = document.body.offsetWidth; alert("寬度"+width+"高度"+height); } getSize(); </script> </body> </html>
JAVAscript學習筆記 jsDOM 第五節 （原創） 參考js使用表