常用方法:
getElementsByName()- 根据name获取元素
getElementsByTagName() -获取元素
getAttribute() -获取元素属性
setAttribute() -设置元素属性
childNodes() -访问子节点
parentNode() -访问父节点
createElement() -创建元素节点
createTextNode() -创建文本节点
insertBefore() -插入节点
removeChild() -删除节点
offsetHeight -网页尺寸
scrollHeight -网页尺寸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> </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="得到了a标签的属性">hello</a> <a id="aid2">aid2</a> <ul><li>1</li><li>2</li><li>3</li></ul> <div id="div"> <p id="pid">pid</p> </div> <script> //通过name和标签名获取元素 function getName(){ var count = document.getElementsByName("pn"); var count1=document.getElementsByTagName("p"); document.write("<hr>"); document.write("pn的长度是:"+count.length); document.write("<br>"); document.write("p的长度是:"+count1.length); var p =count[0]; var p1 =count[1]; p.innerHTML ="World"; p1.innerHTML="World"; } getName(); //通过id获取元素,并获取元素的属性值 function getAttr(){ var anode = document.getElementById("aid"); var attr=anode.getAttribute("title"); document.write("<hr>"); document.write("属性title的值是:"+attr); } getAttr(); function setAttr(){ var anode = document.getElementById("aid2"); anode.setAttribute("title","动态设置a的title属性"); var attr =anode.getAttribute("title"); document.write("<hr>"); document.write("设置之后的值是:"+attr); } setAttr(); function getChildNode(){ var childnode=document.getElementsByTagName("ul")[0].childNodes; document.write("<hr>"); document.write("childnode.length:"+childnode.length); } getChildNode(); //创建元素 function createNode(){ var body = document.body; var input = document.createElement("input"); input.type="button"; input.value="按钮"; body.appendChild(input); } createNode(); //添加节点 function addNode(){ var div = document.getElementById("div"); var node= document.getElementById("pid"); var newnode1=document.createElement("p"); var newnode2=document.createElement("hr"); newnode1.innerHTML = "动态添加第一个p元素"; div.insertBefore(newnode1,node); div.insertBefore(newnode2,node); } addNode(); //移除节点 function removeNode(){ var div = document.getElementById("div"); var p=div.removeChild(div.childNodes[1]); } removeNode(); //获取文档宽度和长度 function getSize(){ var width = document.body.offsetWidth||document.documentElement.offsetWidth; var height=document.body.offsetHeight; document.write(width+","+height); } getSize(); </script> </body> </html>