从屌丝到架构师的飞越（JavaScript篇）-JavaScri

2019-09-28 本文已影响0人走着别浪

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 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

实例

<p id="p1">这是一个段落。</p>

<p id="p2">这是另外一个段落。</p>

</div>

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() 方法:

实例

<p id="p1">这是一个段落。</p>

<p id="p2">这是另外一个段落。</p>

</div>

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、增行实例：

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>

</table>

</body>

4、移除已存在的元素

要移除一个元素，你需要知道该元素的父元素。

实例

<p id="p1">这是一个段落。</p>

<p id="p2">这是另外一个段落。</p>

</div>

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 中的元素。

实例

<p id="p1">这是一个段落。</p>

<p id="p2">这是另外一个段落。</p>

</div>

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>

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>

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>

<ul>

<li>卡和圣诞节非空</li>

<li>大家卡克里斯打飞</li>

</ul>

</div>

</body>

</html>

7、图片无缝滚动实例：

<!DOCTYPE html>

<html>

<head>

#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>

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>

</div>

</body>

</html>

从屌丝到架构师的飞越（JavaScript篇）-JavaScri

猜你喜欢

热点阅读