DOM对象操作html元素1

                <!
                DOCTYPE html
                >
                <
                html 
                xmlns
                ="http://www.w3.org/1999/xhtml"
                >
                <
                head
                >
                <
                meta 
                http-equiv
                ="Content-Type"
                 content
                ="text/html; charset=utf-8"
                />
                <
                title
                ></
                title
                >
                <
                style 
                type
                ="text/css"
                >
                  
        #div
                {
                  
            width
                :
                200px
                ;
                  
            height
                :
                200px
                ;
                  
            background-color
                :
                green
                ;
                }
                </
                style
                >
                </
                head
                >
                <
                body
                >
                <
                p 
                name
                ="pn"
                >哈哈</p><p name="pn">呵呵</p><p name="pn">嘿嘿</p><p name="pn">嘻嘻</p><a id="aid" title="a标签的title属性">超链接</a><br/><!-- 列表 --><ul><li>Hello</li><li>Java</li><li>Script</li></ul><div id="div">  
        我是一个div。  
        <p id="pid">div中的p节点</p></div><hr/><script type="text/javascript">function demo() {  
            var pn = document.getElementsByName("pn");              // 通过元素的name属性获取到该元素；  var p = document.getElementsByTagName("p");             // 通过元素的标签名获取到该元素；              document.write("pn.length = "+ pn.length +"<br/>");   // 获取到的是满足条件的所有元素的集合；              document.write("p.length = "+ p.length +"<br/>");  
            document.write(pn[0].innerHTML +"<br/>");  
            document.write(pn[1].innerHTML +"<br/>");  
            document.write(pn[2].innerHTML +"<br/>");  
            document.write(pn[3].innerHTML +"<br/>");  
            document.write(p[4].innerHTML +"<br/>");  
            document.write("<hr/>");  
        }  
        demo();  
  
        function getAttr() {  
            var aNode = document.getElementById("aid");     // 根据id获取元素；  var attr = aNode.getAttribute("title");         // 根据元素的属性名称获取属性的值；  var aid = aNode.getAttribute("id");  
            document.write("attr = "+ attr +"<br/>");  
            document.write("aid = "+ aid +"<br/>");  
            document.write("<hr/>");  
        }  
        getAttr();  
  
        function setAttr() {  
            var aNode = document.getElementById("aid");  
            aNode.setAttribute("title", "a标签的新属性"); // 设置元素的属性(元素的名称，元素的属性)  var attr = aNode.getAttribute("title");  
            document.write("attr = "+ attr +"<br/>");  
            document.write("<hr/>");  
        }  
        setAttr();  
  
        function getChild() {  
            var node = document.getElementsByTagName("ul");  
            var nodeChild = node[0].childNodes;  // 获取子节点一定要写父节点的下标，一个父节点可以有多个子节点。  // nodeChiled的长度为7，是因为<ul>和<li>标签后面的空格也算。              document.write("nodeChild的长度 = "+ nodeChild.length +"<br/>");  
            // nodeType：节点类型；(1：元素节点；2：属性节点；3：文本内容；等等)              document.write("节点类型："+ nodeChild[5].nodeType +"<br/>");  
            document.write("标签中的内容："+ nodeChild[5].innerHTML +"<br/>");  
            document.write("<hr/>");  
        }  
        getChild();  
  
        function getParent() {  
            var node = document.getElementById("pid");  // 根据id获取到元素；  var nodeParent = node.parentNode;           // 获取元素的父节点；              document.write("父节点名称："+ nodeParent.nodeName +"<br/>");  
            document.write("父节点的id："+ nodeParent.id +"<br/>");  
            document.write("<hr/>");  
        }  
        getParent();  
  
        function createElement() {  
            var body = document.body;                       // 获取需要添加子节点的父节点；  var input = document.createElement("input");    // 创建新的节点；              input.type ="button";      // 设置新节点的属性；              input.value ="按钮";  
            body.appendChild(input);    // 在指定的父节点下添加子节点；              document.write("<hr/>");  
        }  
        createElement();  
  
        function insertNode() {  
            var div = document.getElementById("div");  
            var pid = document.getElementById("pid");  
            var node = document.createElement("p");     // 创建一个p节点；              node.innerHTML ="我是新创建的p节点";  
            div.insertBefore(node, pid);  
        }  
        insertNode();  
  
        function removeNode() {  
            var div = document.getElementById("div");  
            div.removeChild(div.childNodes[1]); // 移除div的第一个子元素；          }  
        removeNode();  
  
        function getSize() {  
            var width = document.documentElement.offsetWidth;   // 获取网页宽度；offsetWidth：不包括滚动条；  var height = document.body.offsetHeight;            // 获取网页高度；scrollWidth：包括滚动条；              document.write("网页宽度："+ width +"<br/>");  
            document.write("网页高度："+ height +"<br/>");  
            document.write("<hr/>");  
            // 为了兼容浏览器，可以写成：  var width2 = document.documentElement.offsetWidth || document.body.offsetHeight;  
            document.write("网页宽度："+ width2 +"<br/>");  
        }  
        getSize();  
    </script></body></html>