[toc] ## DOM對象控制HTML元素詳解 >#### 1. 方法 ``` getElementsByName() --獲取name getElementsByTagName() --獲取元素 getAttribute() --獲取元素屬性 setAttribute() --設置元素屬性 childNodes() --訪問子節點 parentNode() --訪問父節點 createElement() --創建元素節點 createTextNode() --創建文本節點 insertBefore() --插入節點 removeChild() --刪除節點 offsetHeight() --網頁尺寸 scrollHeight() --網頁尺寸 ``` 獲取元素屬性：getAttribute("獲取的屬性") ``` <p id="pid"></p> function getAttr(){ var attr = document.getElementById("pid").getAttribute("id"); alert(attr); } getAttr(); //pid ``` 設置元素屬性：setAttribute("設置的屬性", "設置的內容") ``` function setAttr(){ var anode = document.getElementById("pid"); anode.setAttribute("title", "動態設置a的屬性"); var attr = anode.getAttribute("title"); alert(attr); //動態設置a的屬性 } setAttr(); ``` 訪問父節點：parentNode() ``` <div><p id="pid"></p></div> function getParentNode(){ var p = document.getElementById("pid"); alert(p.parentNode.nodeName); //DIV } getParentNode(); ``` 創建元素節點：createElement() ``` function createNode(){ var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "按鈕"; body.appendChild(input); } createNode(); ``` 插入節點：insertBefore(新元素，before的元素) ``` <div id="div"><p id="pid">no</p></div> 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(); ``` 獲取網頁尺寸：offsetHeight() || scrollHeight() (包含滾動條) ``` function getSize(){ var width = document.body.offsetWidth || document.documentElement.offsetWidth; //防止瀏覽器不兼容 var scroll_width = document.body.scrollWidth || document.documentElement.scrollWidth; alert(width + " , " + scroll_width); } getSize(); ```