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>