JavaScript HTML DOM 元素 (节点)
一、介绍
这节课呢，我们来了解的是HTML DOM 元素 (节点)。
根据 前面DOM的学习我们知道了，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
那么接下来呢我们来学习一下添加删除和修改节点。
二、知识点介绍
1、创建新的 HTML 元素 (节点) - appendChild()
2、创建新的 HTML 元素 (节点) - insertBefore()
3、增行实例
4、移除已存在的元素
5、替换 HTML 元素 - replaceChild()
6、文本无缝滚动实例：
7、图片无缝滚动实例：
三、上课对应视频的说明文档
1、创建新的 HTML 元素 (节点) - appendChild()
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。
实例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
实例解析
以下代码是用于创建 <p> 元素:
var para = document.createElement("p");
为 <p> 元素添加文本节点：
var node = document.createTextNode("这是一个新的段落。");
将文本节点添加到 <p> 元素中：
para.appendChild(node);
最后，在一个已存在的元素中添加 p 元素。
查找已存在的元素：
var element = document.getElementById("div1");
添加到已存在的元素中:
element.appendChild(para);
2、创建新的 HTML 元素 (节点) - insertBefore()
以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:
实例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
3、增行实例：
<script type="text/javascript">
function delrow(obj){
//obj是按钮
//删除的代码格式必须是
//父标签对象.removeChild(子标签对象)
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}
function zeng(){
var mytr=document.createElement("tr");
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
td1.innerHTML="aaaa";
td2.innerHTML="bbbb";
td3.innerHTML="<input type='button' value='删除' onclick='delrow(this)'/>";
mytr.appendChild(td1);
mytr.appendChild(td2);
mytr.appendChild(td3);
document.getElementById("tb").appendChild(mytr);
/*var img=document.createElement("img");
img.src="image/1.jpg";
document.getElementById("bo").appendChild(img);*/
}
</script>
</head>
<body id="bo">
<table width="500" border="1" id="tb">
<tr><td>卡机是</td><td>安良机电</td><td><input type="button" value="删除" onclick="delrow(this)"></td></tr>
<tr><td>卡机是</td><td>安良机电</td><td><input type="button" value="删除" onclick="delrow(this)"></td></tr>
<tr><td>卡机是</td><td>安良机电</td><td><input type="button" value="删除" onclick="delrow(this)"></td></tr>
</table>
<input type="button" value="增加" onclick="zeng()"/>
</body>
4、移除已存在的元素
要移除一个元素，你需要知道该元素的父元素。
实例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
注意：早期的 Internet Explorer 浏览器不支持 node.remove() 方法。
实例解析
HTML 文档中 <div> 元素包含两个子节点 (两个 <p> 元素):
<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另外一个段落。</p></div>
查找 id="div1" 的元素:
var parent = document.getElementById("div1");
查找 id="p1" 的 <p> 元素:
var child = document.getElementById("p1");
从父元素中移除子节点：
parent.removeChild(child);
如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
5、替换 HTML 元素 - replaceChild()
我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。
实例
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
6、文本无缝滚动实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
font-size:14px;
width:180px;
text-align:center;
}
#rong{
width:200px;
height:100px;
background-color:#CCC;
overflow:hidden;
}
#msg{
width:180px;
background-color:#0CF;
}
</style>
<script type="text/javascript">
var h=0;
function move1(){
h-=2;
if(-h>=height)
h=0;
document.getElementById("msg").style.marginTop=h+"px";
}
var timer=setInterval("move1()",60);
var height;
function init(){
//记录msg层的高度
height=document.getElementById("msg").offsetHeight;
//复制（克隆）一个和msg一样的div对象
var clmsg=document.getElementById("msg").cloneNode(true);
//将克隆的msg对象放在rong层之后
document.getElementById("rong").appendChild(clmsg);
}
function stop1(){
clearInterval(timer);
}
function run1(){
timer=setInterval("move1()",60);
}
</script>
</head>
<body onload="init()">
<div id="rong" onmouseover="stop1()" onmouseout="run1()">
<div id="msg">
<ul>
<li>卡和圣诞节非空</li>
<li>大家卡克里斯打飞</li>
<li>大家卡克里斯打飞</li>
<li>大家卡克里斯打飞</li>
<li>大家卡克里斯打飞</li>
<li>大家卡克里斯打飞</li>
<li>大家卡克里斯打飞</li>
<li>大家卡克里斯打飞</li>
<li>大家卡克里斯打飞</li>
</ul>
</div>
</div>
</body>
</html>
7、图片无缝滚动实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#rong{
width:524px;
height:190px;
overflow:hidden;
}
#img{
width:1048px;
height:190px;
white-space:nowrap;
float:left;
}
#kan{
width:2100px;
height:190px;
}
img{
margin:0;
padding:0;
border:0;
}
</style>
<script type="text/javascript">
var w=0;
function move1(){
w-=3;
if(-w>=width)
w=0;
document.getElementById("img").style.marginLeft=w+"px";
}
setInterval("move1()",30);
var width;
function init(){
width=document.getElementById("img").offsetWidth;
var climg=document.getElementById("img").cloneNode(true);
document.getElementById("kan").appendChild(climg);
}
</script>
</head>
<body onload="init()">
<div id="rong">
<div id="kan">
<div id="img">
<img src="image/ad-01.jpg"/>
<img src="image/ad-02.jpg"/>
</div>
</div>
</div>
</body>
</html>
网友评论