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>