javascript学习笔记：DOM操作HTML的各种方法使用
Posted pyqb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript学习笔记：DOM操作HTML的各种方法使用相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta chaset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <p name="pname">Hello</p> 9 <p name="pname">Hello</p> 10 <p name="pname">Hello</p> 11 <p name="pname">Hello</p> 12 <p name="pname">Hello</p> 13 <a name="pname">Hello</a> 14 <a id="aid" title="获取a标签的属性成功">aaaaaaa</a> 15 <a id="aid2">aid2</a> 16 17 <ul><li>1</li><li>2</li><li>3</li></ul> <!--设置一个ul节点,包含三个li子节点--> 18 19 <div id="div"> 20 <p id="pid">div的p元素</p> <!--设置一个p节点，它的父节点是div--> 21 </div> 22 <script> 23 //通过名字查找元素查找并修改其内容 24 getName(); 25 function getName(){ 26 var count = document.getElementsByName("pname"); //计算名为pname的节点一共多少个 27 alert("id=pname的标签个数："+count.length); 28 var p = count[1]; 29 p.innerHTML = "World"; //通过下标改变标签的内容 30 } 31 32 //通过id查找并获取节点属性内容 33 getAttr(); 34 function getAttr(){ 35 var anode = document.getElementById("aid");//获取id=aid的节点 36 var attr = anode.getAttribute("title"); //获取title属性的内容 37 alert(attr); 38 } 39 40 //通过id查找并动态设置标签属性 41 setAttr(); 42 function setAttr(){ 43 var anode = document.getElementById("aid2");//获取id=aid2的节点 44 anode.setAttribute("title","动态设置a的title属性");//动态设置title属性 45 46 var attr = anode.getAttribute("title");//获取查看title属性的内容，看是否设置成功 47 alert(attr); 48 } 49 50 //通过标签名查找节点并获取子节点个数 51 getChileNode(); 52 function getChileNode(){ 53 var childnode = document.getElementsByTagName("ul")[0].childNodes;//获取标签名为ul的节点的子节点 54 alert("ul子节点个数："+childnode.length);//计算子节点的个数 55 } 56 57 //通过子节点获取父节点 58 getParentNode(); 59 function getParentNode(){ 60 var div = document.getElementById("pid"); 61 alert(div.parentNode.nodeName);//通过子节点获取父节点 62 } 63 64 //动态添加节点 65 createNode(); 66 function createNode(){ 67 var body = document.body; 68 var input = document.createElement("input"); //动态添加节点 69 input.type = "button"; 70 input.value = "动态添加的按钮";//创建一个按钮 71 body.appendChild(input); 72 } 73 74 //在特定的位置动态添加一个p元素 75 //addNode(); 76 function addNode(){ 77 var div = document.getElementById("div"); 78 var node = document.getElementById("pid"); 79 var newnode = document.createElement("p"); 80 newnode.innerHTML = "在特定的位置动态添加一个p元素"; 81 div.insertBefore(newnode,node); 82 } 83 84 //删除节点 85 removeNode(); 86 function removeNode(){ 87 var div = document.getElementById("div"); 88 var p = div.removeChild(div.childNodes[1]); 89 } 90 91 //网页尺寸 92 getSize(); 93 function getSize(){ 94 //offsetWidth，offsetHeight获取不包含滚动条的页面宽和高 95 var width = document.documentElement.offsetWidth; 96 var height = document.documentElement.offsetHeight; 97 alert("不包含滚动条的页面宽和高:"+width+","+height); 98 99 //scrollWidth，scrollHeight获取不包含滚动条的页面宽和高 100 var width1 = document.documentElement.scrollWidth; 101 var height1 = document.documentElement.scrollHeight; 102 alert("包含滚动条的页面宽和高:"+width1+","+height1); 103 } 104 105 106 </script> 107 </body> 108 </html>
以上是关于javascript学习笔记：DOM操作HTML的各种方法使用的主要内容，如果未能解决你的问题，请参考以下文章