1.节点的替换
<%@ 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>
</head>
<body>
你喜欢的城市:
<br/>
<ul>
<li id="bj" value="beijing">
北京
</li>
<li id="sh" value="shanghai">
上海
</li>
<li id="cq" value="chongqing">
重庆
</li>
</ul>
你喜欢的游戏:
<br/>
<ul>
<li id="fk" value="fangkong">
反恐
</li>
<li id="ms" value="moshou">
魔兽
</li>
<li id="cq" value="chuanqi">
传奇
</li>
</ul>
</body>
<script type="text/javascript">
//点击北京节点,将被反恐节点替换
//1.替换节点
//replaceChild()
//把一个给定父元素的一个子节点替换为另外一个子节点。
//返回值是一个指向已被替换的那个子节点的引用指针。
//var reference=element.replaceChild(newChild,oldChild)
//如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中。
document.getElementById("bj").onclick = function(){
//获取北京节点
var bjElement = document.getElementById("bj");
//获取反恐节点
var fkElement = document.getElementById("fk");
//获取北京节点的父节点
var bjParentElemment = bjElement.parentNode;
//替换,返回北京节点
var oldElement = bjParentElemment.replaceChild(fkElement, bjElement);
//测试
alert(oldElement.getAttribute("value"));
}
</script>
</html>
2.获取节点属性
element.getAttribute("value");
3.设置属性节点
4.创建新元素节点
给城市列表中添加一个城市的名称天津。
5.插入节点,在之前(insertBefore)
6.获取当前节点的下一个兄弟节点
将天津插入到上海的后面,重庆的前面。
7.removeChild删除节点
8.innerHTML插入内容