黑马程序员-DOM（第二讲）

最新推荐文章于 2022-11-16 14:14:12 发布

原创最新推荐文章于 2022-11-16 14:14:12 发布 · 729 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #DOM

javascript 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了如何使用document对象来获取和操作HTML文档中的元素，包括通过ID、名称和标签名获取节点的方法，以及如何添加、删除和替换节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、document获取节点通过id

该对象将标记型文档进行封装，

该对象的作用：可以对标记型文档进行操作

最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点

要想获取节点，必须要先获取到节点所属的文档对象document

所以document对象最常见的操作就是获取页面中的节点。

获取节点的方法体现：

1、getElementById（）；通过标签的id属性值获取该标签节点，返回该标签节点。

演示：

<div id=”divid”>这是一个div区域</div>

function getNodeDemo()

{

var divDemo=document.getElementById(“divid”);

//那么怎么区分获取到的就是div节点呢？

//节点都有三个必备属性：节点名称，节点类型，节点值

alert(divNode.nodeName+”:”+divNode.nodeType+”:”+divNode.nodeValue);

//也可以拿到div标签中的文本

var text=divNode.innerHTML;

alert(text);

//既然能拿到div标签中的节点，那吗就可以进行修改了

divNode.innerHTML=”哈哈，文本被我改掉了”.fontColor(red)；//设置红色字体

}

</script>

常见节点有三种：

1）标签型节点：类型1

2）属性节点：类型2

3）文本节点：类型3

标签型节点是没有值得，属性和文本节点是可以有值的。

2、getElementsByName（）(这里从方法名就可以知道，可能获取到的不止一个，就像radio，男，女的name都是sex)

function getNodeDemo2()

{

var name=document.getElementByName(“user”);//取到的肯不止一个节点，所以返回的是一个数组

Alert(name[0].nodeName);//.type .value

}

</script>

如果我这个节点既没有id属性，也没有名字属性，例如<a href=”http://www.baidu.com”>百度网站</a> 这就需要用第三个方法

3、getElementsByTagName()

var nodes=document.getElementsByTagName(“a”);//操作<a>标签

alert(nodes[0].innerHTML);

用法举例：

假如我页面中有100个超链接，而每个超链接都是在当前页面中打开，现在我想要修改，使得每个超链接都使用新的页面打开，这我总不能在100个<a>中都加入target=”_blank”属性吧，此时，就用到了这个方法，

//先获取到所有的超链接标签

var collNodes=document.getElementByTagName(“a”);

for(var x=0;x<collNodes.length;x++)

{

collNodes[x].target=”_blank”;

}

小结：需求，网页中有很多标签，对于门户网站我要用本窗口打开，对于新闻网站我要用新窗口打开。

我们首先需要将新闻网站封装起来

</div>

//获取超链接所属的div节点

Var odivNode=document.getElementById(“newsid”);

//通过div对象的getElementByTagName方法获取其中的所有的超链接标签

//注意，只要是容器型标签都具备这个方法，

var collaNodes=odivNode.getElementsByTagName(“a”);

for(var x=0;x<collaNode.length;x++)

{

collaNode[x].target=”_blank”;

}

另一种方式：通过节点的层次关系获取节点对象

关系：

1、父节点 parentNode 对应一个节点对象

2、子节点 childNodes （直接子节点，就是只有儿子没有孙子）对应一个节点集合

3、兄弟节点：

上一个兄弟节点：priviousSibling

下一个兄弟节点：nextSibling

演示：

//获取页面中的表格节点

var otabNode=document.getElementById(“tabid”);

//获取其父节点

var oparentNode=otabNode.parentNode;

alert(oparentNode.nodeName);//得到body节点

//获取子节点

var collNodes=otabNode.childNodes;

alert(collNodes[0].nodeName);//得到tbody

//获取兄弟节点

var oNode=otabNode.nextSibling;

注意：尽量少用兄弟节点，就拿火狐和ie来说，由于内核不同，解析也会出现不同（一般的解决办法是判断，如果他是文本节点，就继续拿他的下一个兄弟）

对获取到的节点的增删改查：

1、增加节点（这里演示在div标签下面增加一个文本节点）

1）首先创建一个文本节点

var oTextNode=document.createTextNode(“这是一个文本节点”)；

2) 获取div节点

var oDivNode=document.getElementById(“div_1”);

3) 将文本节点添加到div_1节点中

oDivNode.appendChild(oTextNode);

2、在div_1标签中添加一个按钮节点

1）创建一个按钮节点

var oButtonNode=document.createElement(“input”);

oButtonNode.type=”button”;

oButtonNode.value=”新按钮”;

2)获取div节点

var oDivNode=document.getElementById(“div_1”);

3)将按钮添加到div标签下

oDivNode.appendChild(oButtonNode);

添加节点的另一种方式：

其实这种方式是用了容器型标签中的一个属性innerHTML。

使用方法：var oDivNode=document.getElementById(“div-1”);

oDivNode.innerHTML=”<a href=’http://www.baidu.com’> 一个超链接</a>”;

3、删除节点（例如将id为div_2的节点删除）

1）先找见div节点

Var odivNode=document.getElementById(“div_2”);

2) 使用div节点的removeNode 方法删除

odivNode.removeNode(false);//true表示删除该节点下的所有子节点

那么如何删除div_2节点呢？

（思想：获取div_2的父节点，然后再用父节点的removeChild，将div_2删除）

4、修改节点（将div_3节点替换为div_1节点）

replaceNode（）替换当前

replaceChild（）替换子节点

var odivNode1=document.getElementById(“div_1”);

var odivNode3=document.getElementById(“div_3”);

odivNode_3.replaceNode(odivNode1);

(替换后div_3就跑到div_1的位置上了，div_3就不在了)

//建议使用replaceChile方法

odivNode1.parentNode.replaceChild(odivNode_3,oDivNode_1);

同样能实现删除效果。

需求：希望用div_3替换div_1,并保留div_3节点

var odivNode1=document.getElementById(“div_1”);

var odivNode3=document.getElementById(“div_3”);

var ocopydiv3=odivNode3.cloneNode(true);

odivNode1.parentNode.replaceChild(ocopydiv3,oDivNode_1);