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();
 25function getName(){
 26var count = document.getElementsByName("pname");  //计算名为pname的节点一共多少个  27            alert("id=pname的标签个数："+count.length);
 28var p = count[1];  
 29            p.innerHTML ="World";  //通过下标改变标签的内容         30        }
 31 32//通过id查找并获取节点属性内容 33        getAttr();
 34function getAttr(){
 35var anode = document.getElementById("aid");//获取id=aid的节点 36var attr = anode.getAttribute("title"); //获取title属性的内容 37            alert(attr);
 38        }
 39 40//通过id查找并动态设置标签属性 41        setAttr();
 42function setAttr(){
 43var anode = document.getElementById("aid2");//获取id=aid2的节点 44            anode.setAttribute("title","动态设置a的title属性");//动态设置title属性 45 46var attr = anode.getAttribute("title");//获取查看title属性的内容，看是否设置成功 47            alert(attr);
 48        }
 49 50//通过标签名查找节点并获取子节点个数 51        getChileNode();
 52function getChileNode(){
 53var childnode = document.getElementsByTagName("ul")[0].childNodes;//获取标签名为ul的节点的子节点 54            alert("ul子节点个数："+childnode.length);//计算子节点的个数 55        }
 56 57//通过子节点获取父节点 58        getParentNode();
 59function getParentNode(){
 60var div = document.getElementById("pid");
 61            alert(div.parentNode.nodeName);//通过子节点获取父节点 62        }
 63 64//动态添加节点 65        createNode();
 66function createNode(){
 67var body = document.body;
 68var input = document.createElement("input"); //动态添加节点 69            input.type ="button";
 70            input.value ="动态添加的按钮";//创建一个按钮 71            body.appendChild(input);        
 72        }
 73 74//在特定的位置动态添加一个p元素 75//addNode(); 76function addNode(){
 77var div = document.getElementById("div");
 78var node = document.getElementById("pid");
 79var newnode = document.createElement("p");
 80            newnode.innerHTML ="在特定的位置动态添加一个p元素";
 81            div.insertBefore(newnode,node);
 82        }
 83 84//删除节点 85        removeNode();
 86function removeNode(){
 87var div = document.getElementById("div");
 88var p = div.removeChild(div.childNodes[1]);
 89        }
 90 91//网页尺寸 92        getSize();
 93function getSize(){
 94//offsetWidth，offsetHeight获取不包含滚动条的页面宽和高 95var width = document.documentElement.offsetWidth;
 96var height = document.documentElement.offsetHeight;
 97            alert("不包含滚动条的页面宽和高:"+width+","+height);
 98 99//scrollWidth，scrollHeight获取不包含滚动条的页面宽和高100var width1 = document.documentElement.scrollWidth;
101var height1 = document.documentElement.scrollHeight;
102            alert("包含滚动条的页面宽和高:"+width1+","+height1);            
103        }
104105106</script>107</body>108</html>