<!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>