JS DOM对象控制HTML元素详解
Posted nullcodeworld
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS DOM对象控制HTML元素详解相关的知识，希望对你有一定的参考价值。
JS DOM对象控制html元素详解
方法：
getElementsByName() 获取name
getElementsByTagName() 获取元素
getAttribute() 获取元素属性
setAttribute() 设置元素属性
childNodes() 访问子节点
parentNode() 访问父节点
createElement() 创建元素节点
createTextNode() 创建文本节点
insertBefore() 插入节点
removeChild() 删除节点
offsetHeight() 网页尺寸
scrollHeight() 网页尺寸
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <p name="pn">hello</p> 9 <p name="pn">hello</p> 10 <p name="pn">hello</p> 11 <p name="pn">hello</p> 12 <script> 13 function getName(){ 14 //var count=document.getElementsByName("pn"); //获取name 15 var count=document.getElementsByTagName("p"); //获取元素 16 alert(count); 17 alert(count.length);//拿到4个p元素 18 var p=count[0]; 19 p.innerHTML="World"; 20 } 21 getName(); 22 </script> 23 24 <a id="aid" title="得到了a标签属性">hello</a> 25 <script> 26 function getAttr(){ 27 var anode=document.getElementById("aid"); 28 var attr=anode.getAttribute("title");//获取元素属性，可以把title换成id 29 alert(attr); 30 } 31 getAttr(); 32 </script> 33 34 <br /> 35 <a id="aid2">aid2</a> 36 <script> 37 function setAttr(){ 38 var anode=document.getElementById("aid2"); 39 anode.setAttribute("title","动态设置a的tiltle属性");//设置元素属性 40 var attr=anode.getAttribute("title"); 41 alert(attr); 42 } 43 setAttr(); 44 </script> 45 46 47 <br> 48 <ul> 49 <li>1</li> 50 <li>2</li> 51 <li>3</li> 52 </ul> 53 <script> 54 function getChildNode(){ 55 var childnode=document.getElementsByTagName("ul")[0].childNodes;//访问子节点 56 alert(childnode.length); //答案是7，是因为有空白项 57 alert(childnode[1].nodeType); 58 } 59 getChildNode(); 60 </script> 61 62 <br /> 63 <div id="div"> 64 <p id="pid">div的p元素</p> 65 </div> 66 <script> 67 function getParentNode(){ 68 var div =document.getElementById("pid"); 69 alert(div.parentNode.nodeName); //获取父节点 70 } 71 getParentNode(); 72 73 function createNode(){ 74 var body=document.body; 75 var input=document.createElement("input"); 76 input.type="button"; 77 input.value="创建节点"; 78 body.appendChild(input); 79 } 80 createNode(); 81 82 function addNode(){ 83 var div=document.getElementById("div"); 84 var node=document.getElementById("pid"); 85 var newnode=document.createElement("p"); 86 newnode.innerHTML="动态添加一个p元素"; 87 div.insertBefore(newnode,node);//新节点相对位置在前 88 } 89 addNode(); 90 91 function removeNode(){ 92 var div=document.getElementById("div"); 93 var p=div.removeChild(div.childNodes[1]);//删除节点 94 } 95 removeNode(); 96 97 function getSize(){ //网页尺寸 98 var height=document.body.offsetHeight||document.documentElement.offsetHeight; 99 var width=document.body.offsetWidth; 100 alert(width+","+height); 101 } 102 getSize(); 103 </script> 104 </body> 105 </html>
以上是关于JS DOM对象控制HTML元素详解的主要内容，如果未能解决你的问题，请参考以下文章