web前端學習（四）JavaScript學習筆記部分（7）-- JavaScript DOM物件控制HTML元素詳解
阿新 • • 發佈：2018-12-08
1、方法
| getElementsByName() | 獲取name | 可以獲取一個數組型別資料（引數加引號） |
| getElementsByTagName() | 獲取元素 | |
| getAttribute() | 獲取元素屬性 | 獲取元素的變數呼叫這個方法，（引數為元素屬性） |
| setAttribute() | 設定元素屬性 | |
| childNodes() | 訪問子節點 | 子節點可以有很多個 |
| parentNode() | 訪問父節點 | 父節點只有一個 |
| createElement() | 建立元素節點 | |
| createTextNode() | 建立文字節點 | |
| insertBefore() | 插入節點 | |
| removeChild() | 刪除節點 | |
| offsetHeight()、offsetWidth() | 網頁尺寸 | 不包含滾動條的寬度、高度 |
| scrollHeight()、scrollWidth() | 網頁尺寸 | 包含滾動條的寬度、高度 |
子節點，父節點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>節點1</li>阿范德薩發 <li>節點2</li> <li>節點3</li> <li>節點4</li></ul> <script> function getChildNode(){ var childnode = document.getElementsByTagName("ul")[0].childNodes; alert(childnode.length);/*空格區域也算一個節點*/ alert(childnode[1]);/*會打印出節點的型別*/ alert(childnode[1].innerHTML);/*打印出節點的內容*/ alert(childnode[2]);/*打印出內容：object Text*/ alert(childnode[1].nodeType); } getChildNode(); </script> </body> </html>
appendChild,insertBefore
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <p id="pid">div的元素</p> </div> <script> function createNode(){ var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "按鈕"; body.appendChild(input);/*向body的末尾新增一個元素*/ } function addNode(){ var div = document.getElementById("div"); var node = document.getElementById("pid"); var newnode = document.createElement("p"); newnode.innerHTML = "動態新增一個p元素"; div.insertBefore(newnode,node);/*在。。。之前新增一個元素*/ } createNode(); addNode(); </script> </body> </html>
removeNode:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <p id="pid">div的元素</p> </div> <script> function removeNode(){ var div = document.getElementById("div"); var p = div.removeChild(div.childNodes[1]); } removeNode();/*什麼都不輸出就對了*/ </script> </body> </html>
offsetHeight:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <p id="pid">div的元素</p> </div> <script> function getSize(){ var width = document.documentElement.offsetWidth||document.documentElement.offsetWidth; /*這樣寫會讓所有瀏覽器相容*/ var height = document.documentElement.offsetHeight; alert(width+","+height); } getSize();/*什麼都不輸出就對了*/ </script> </body> </html>