<!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>
浙公网安备 33010602011771号