<ul id="ulid">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul><br/>
<input type="button" value="add" onclick="add1()"/>
<script type="text/javascript">
function add1() {
// 获取ul标签
var ul1=document.getElementById("ulid");
// 创建标签
var li1=document.createElement("li");
// 创建文本
var text=document.createTextNode("555");
// 把文本加入到li下面
li1.appendChild(text);
// 把li加入到ul下面
ul1.appendChild(li1);
}
</script>
Node对象的属性：nodename,nodetype,nodevalue
使用dom解析html时候，需要html里面的标签，属性和文本都封装成对象
<body>
<span id="spanid">哈哈哈</span>
<script type="text/javascript">
// 标签对象
var span1=document.getElementById("spanid");
alert(span1.nodeName);// SPAN
alert(span1.nodeType);// 1
alert(span1.nodeValue);// null
// 属性
var id1=span1.getAttributeNode("id");
alert(id1.nodeName);// id
alert(id1.nodeType);// 2
alert(id1.nodeValue);// spanid
// 文本
var text1=span1.firstChild;
alert(text1.nodeName);// #text
alert(text1.nodeType);// 3
alert(text1.nodeValue);// 哈哈哈
</script>
</body>
标签节点对应的值
nodetype=1 nodename=大写标签名称 nodevalue=null
属性节点对应的值
nodetype=2 nodename=属性名称 nodevalue=属性的值
文本节点对应的值
nodetype=3 nodename=#text nodevalue=文本内容
Node对象的属性：父节点，子节点， 同辈节点
ul是li的父节点 li是ul的子节点 li之间关系是同辈节点
parentnode表示父节点 childnodes得到所有子节点，但是兼容性很差
firstnode获取第一个子节点 lastnode获取最后一个子节点
nextsibling返回一个给定节点的下一个兄弟节点
previsoussibling返回一个给定节点的上一个兄弟节点
<body>
<ul id="ulid">
<li id="li1">aaaaaaaaaaaa</li>
<li id="li2">ssdsds</li>
<li id="li3">ssssss</li>
<li id="li4">dsdads</li>
</ul>
<script type="text/javascript">
var li1=document.getElementById("li1");
var ul1=li1.parentNode;
alert(ul1.id);
var ul2=document.getElementById("ulid");
var li2=ul2.firstChild;
alert(li2.id);
var li3=li1.nextSibling;
alert(li3.id);
var li4=li3.previousSibling;
alert(li4.id);
</script>
</body>
操作Dom树
Node对象appendchild方法 添加子节点到末尾 特点：类似于剪切黏贴的效果
<head>
<meta charset="UTF-8">
<style type="text/css">
#div1 {
width:200px;
height:150px;
border:2px solid red;
}
#div2 {
width:250px;
height:150px;
border:5px dashed green;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ulid">
<li>tom</li>
<li>mary</li>
<li>jack</li>
</ul>
</div>
<div id="div2">
</div>
<input type="button" value="add1" onclick="add11()"/>
<script type="text/javascript">
function add11() {
var div2=document.getElementById("div2");
// 获取ul
var ul1=document.getElementById("ulid");
// div1添加到div2
div2.appendChild(ul1);
}
</script>
</body>
Node对象insertbefore方法使用
<body>
<ul id="ulid">
<li id="li1">tom</li>
<li id="li2">mary</li>
<li id="li3">jack</li>
<li id="li4">kobe</li>
<li id="li5">james</li>
</ul>
<input type="button" value="insert" onclick="add11()"/>
<script type="text/javascript">
function add11() {
var li3=document.getElementById("li3");
var li5=document.createElement("li");
var text5=document.createTextNode("董小宛");
// 把文本添加到li下面appendchild
li5.appendChild(text5);
// 获取到ul
var ul2=document.getElementById("ulid");
ul2.insertBefore(li5,li3);
}
</script>
</body>
Node对象removechild方法删除节点，通过父节点删除
<script type="text/javascript">
function add11() {
// 获取到ul
var ul1=document.getElementById("ulid");
var li1=document.getElementById("li1");
ul1.removeChild(li1);
}
</script>
Node对象替换节点replacechild(newnode,oldnode)使用新的节点替换旧的节点
<body>
<ul id="ulid">
<li id="li1">tom</li>
<li id="li2">mary</li>
<li id="li3">jack</li>
<li id="li4">kobe</li>
<li id="li5">james</li>
</ul>
<input type="button" value="replace" onclick="replace1()"/>
<script type="text/javascript">
function replace1() {
// 获取到ul
var ul1=document.getElementById("ulid");
var li1=document.getElementById("li1");
var li6=document.createElement("li");
var text6=document.createTextNode("张无忌");
li6.appendChild(text6);
ul1.replaceChild(li6,li1);
}
</script>
</body>
网友评论