HTML DOM API

来源：互联网发布：圣剑网络三国神将传编辑：程序博客网时间：2024/06/06 21:30

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'TestDOMAPI.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript">
function testapi()
{
//获取根元素节点
var htmlRootElement = document.documentElement;

//获取指定的元素节点
var divNode = document.getElementById("div1");

//获取整个页面所有的div元素节点
var divNodes = document.getElementsByTagName("div");

//创建元素节点
var newDivNode = document.createElement("div");
//创建文本节点
var newTextNode = document.createTextNode("aaaaa");

//返回大写的标签名称
var tagName = divNode.tagName;
//根据标签名获取元素节点
var divNode2 = document.getElementById("div2");
var divNodes2 = divNode2.getElementsByTagName("div");

//操作属性
var inputtext = document.getElementById("inputtext");
var flag = inputtext.hasAttribute("value");
inputtext.setAttribute("value", "设置文本属性值");
var textValue = inputtext.getAttribute("value");
inputtext.removeAttribute("value");
//另一种操作属性的方法
inputtext.value = "另一种操作属性的方法";
var inputtextValue = inputtext.value;

var clic = document.getElementById("clic");
clic.onclick = function(){alert("cxx")};

//返回元素节点包含的属性节点
var attributes = inputtext.attributes;
var inputName = inputtext.nodeName;
var inputType = inputtext.nodeType;
var inputValue = inputtext.nodeValue;
//获取所有的子节点
var childs = divNode2.childNodes;
//获取父节点
var parent = divNode2.parentNode;
//获取第一个子节点和最后一个子节点
var fisrt = divNode2.firstChild;
var last = divNode2.lastChild;

//获取兄弟节点
var next = divNode2.nextSibling;
var last = divNode2.previousSibling;
//判断是否有子节点
var flag2 = divNode2.hasChildNodes();
//追加节点
newDivNode.appendChild(newTextNode);
divNode2.appendChild(newDivNode);
var new2 = document.createElement("div");
var text2 = document.createTextNode("insert");
new2.appendChild(text2);
divNode2.insertBefore(new2,divNode2.firstChild);
var new3 = document.createElement("div");
var text3 = document.createTextNode("insert");
new3.appendChild(text3);
divNode2.insertBefore(new3, null);
divNode2.insertBefore(new3, divNode2.firstChild);
//移出节点
var remove = divNode2.removeChild(new3);
var new4 = document.createElement("div");
var text4 = document.createTextNode("insert4");
new4.appendChild(text4);
var replace = divNode2.replaceChild(new4, divNode2.getElementsByTagName("div")[0]);
//如果第一个参数已经是当前节点的子节点，那么这个参数对应的节点会被移动到第二个参数对应的节点的位置，第二个参数对应的节点被删除
var replace = divNode2.replaceChild(newDivNode, divNode2.getElementsByTagName("div")[0]);

//clone节点
var clone1 = divNode2.cloneNode(true);
var clone2 = divNode2.cloneNode(false);

alert("----------");

}

</script>
</head>

<body>
<input type="button" value="TestDomAPI" onclick="testapi()" />
<div id="div1">123123</div>
<input type="text" id="inputtext" />
<div id="div2">
456
<div>789</div>
<div id="div3"></div>
</div>
<input type="button" id="clic" value="cxx" />
</body>
</html>