JavaScript DOM操作

最新推荐文章于 2024-03-14 19:32:21 发布

Ashe And Wine

最新推荐文章于 2024-03-14 19:32:21 发布

阅读量292

点赞数

分类专栏： web前端文章标签： javascript dom 节点操作

本文链接：https://blog.csdn.net/AsheAndWine/article/details/78148732

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

JavaScript 操作节点的方法

一、创建节点
（1）创建文本节点

创建包含文本 Text 的文本节点：

oTextNode = document.createTextNode(Text);

（2）创建属性节点
用给定的名称 Name 创建属性节点：

oAttribute = document.createAttribute(Name);

3）创建元素节点
创建标记名为 Tagname 的元素节点：

oElement = document.createElement(Tagname);

（4）复制节点

oClone = object.cloneNode(true);

默认值为 false，指定只复制节点本身，不包含其子节点；
如果设置为true，则包含子节点。
object表示被复制的源节点

二、插入节点
（1）appendChild 追加子节点

oElement = object.appendChild(oNode);

参数 oNode 指定要追加到文档当中的新节点；
object指父节点，也就是说在父节点的末尾加入新节点。

参考jQuery Dom插入节点：http://blog.csdn.net/asheandwine/article/details/78149298

//把元素节点追加到<body>中  
document.body.appendChild(oElement);

（2）插入子节点（在另一个节点前插入新的节点）

oElement = object.insertBefore(oNewNode,oChildNode);

参数 oNewNode 指定要插入到文档中的新节点；
参数 oChildNode 表示在 oChildNode 节点前插入节点；
object指定 oChildNode 节点的父节点；

三、替换节点

oReplace = object.replaceChild(oNewNode,oChildNode);

参数 oNewNode 指定要插入到文档中的新节点；
参数 oChildNode 指定将要被替换掉的节点；
object指定 oChildNode 节点的父节点；

注意：被替换掉的节点必须是父对象的直接子节点。
（2）插入子节点（在另一个节点前插入新的节点）

oElement = object.insertBefore(oNewNode,oChildNode);

参数 oNewNode 指定要插入到文档中的新节点；
参数 oChildNode 表示在 oChildNode 节点前插入节点；
object指定 oChildNode 节点的父节点；

//用oNewElement节点替换<body>中 oElement节点  
document.body.replaceChild(oNewElement,oElement);

四、删除节点

oRemove = object.removeChild(oNode);

参数 oNode 指定要从文档中移除的节点；
object指定要移除的节点的父节点；

//表示删除<body>中的 oElement节点  
document.body.removeChild(oElement);

注意：要移除的节点必须是父节点的直接子节点。
例如要从表格（table）中删除行，必须是从tbody中删除 tr 节点，而不能直接从table节点中删除tr节点

以下代码实现了在网页中加入
<p align="center">段落二</p> <p align="center">段落一</p> 的代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body>
<!-- 
     下边代码实现了在网页中加入<p align="center">段落二</p><p align="center">段落一</p>
 的标记
 -->
<script type="text/javascript">
//创建文本节点 内容为"段落一"
oTextNode=document.createTextNode("段落一");
//创建align属性节点
oAttribute=document.createAttribute("align");
//align加入指定的值 align="center"
oAttribute.nodeValue="center";
//创建p节点
oElement=document.createElement("p");
//把创建的属性节点插入到<p>中
oElement.attributes.setNamedItem(oAttribute);
// appendChild 追加子节点 把创建的文本节点添加到<p>中
//<p align="center">段落一</p>
oElement.appendChild(oTextNode);
//把<p>节点追加到<body>中
document.body.appendChild(oElement);
//复制当前<p>节点为oNewElement
oNewElement=oElement.cloneNode(true); 
//修改oNewElement内容为"段落二"
oNewElement.innerHTML="段落二";
//把oNewElement 节点插入到<body>中 oElement节点之前
document.body.insertBefore(oNewElement,oElement);

</script>
</body>
</html>

完成后效果图：

Ashe And Wine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM操作

JavaScript 操作节点的方法一、创建节点（1）创建文本节点创建包含文本 Text 的文本节点：oTextNode = document.createTextNode(Text);（2）创建属性节点用给定的名称 Name 创建属性节点：oAttribute = document.createAttribute(Name);3）创建元素节点创建标记名
复制链接

扫一扫

专栏目录