[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(); ```