您的位置：首页 > Web前端 > JavaScript

javascript DOM技术常用操作

2015-09-19 11:11 716 查看

dom document对象模型，把html文档看做对象来操作；对象之间依靠节点联系，分为元素节点，文本节点，属性节点。

获取父类对象节点 obj.parentNode

获取子节点 obj.firstChild obj.lastChild

获取兄弟节点 obj.previousSibling obj.nextSibling

新建节点：

document.createElement("节点名称")；

document.createTextNode("文本节点");

parentNode.appendChild(childNode);

复制节点：

obj=obj1.cloneNode(true);

插入子节点

父节点.insertBefore(新子节点，旧子节点);

删除子节点

父节点.removeChild(子节点)；

替换子节点

父节点.replaceChild(新子节点，旧子节点)；

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function gf(){
	var nn=f1.parentNode.nodeName;
	alert(nn);
}
function nn(){
	var sp=document.createElement("span");
	var br=document.createElement("br");
	var tn=document.createTextNode("hello");
	sp.appendChild(tn);
	document.body.appendChild(sp);
	document.body.appendChild(br);
}
function cp(){
	var obj=f1.s1;
	var nobj=obj.cloneNode(true);
	nobj.name="";
	d1.appendChild(nobj);
	var br=document.createElement("br");
	d1.appendChild(br);
}
function ib(){
	var ip=document.createElement("input");
	ip.type="text";
	var f1=document.getElementById("d2");
	var s1=document.getElementById("s1");
	f1.insertBefore(ip,s1);
}
function de(){
	var di=document.getElementById("d2");
	di.removeChild(di.lastChild);
}
function re(){
	var di=document.getElementById("d2");
	var ne=document.createElement("select");
	di.replaceChild(ne, di.lastChild);
}
</script>
</head>
<body>

<form action="" id="f1">
<div id="d2"></div>
<select name="s1">
<option>a</option>
<option>b</option>
<option>c</option>
</select><br>
<div id="d1"></div>
<input type="button" name="i3" value="获取父节点" onclick="gf();">
<input type="button" name="i3" value="新增节点" onclick="nn();">
<input type="button" name="i3" value="复制节点" onclick="cp();">
<input type="button" name="i3" value="插入子节点" onclick="ib();">
<input type="button" name="i3" value="删除子节点" onclick="de();">
<input type="button" name="i3" value="替换子节点" onclick="re();">
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航