JavaScript学习笔记之DOM对象操作html元素

来源：互联网发布：淘宝评价了还能退款吗编辑：程序博客网时间：2024/05/16 19:30
<!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>
0 0