标签：ack creat oct code before create 动态添加 nod 标签
方法：
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>
标签：ack creat oct code before create 动态添加 nod 标签
原文地址：https://www.cnblogs.com/nullcodeworld/p/9311757.html
