美文网首页javascript--工作、学习记录
javascript节点(增加、删除、替换、合并、克隆)操作

javascript节点(增加、删除、替换、合并、克隆)操作

作者: 墨景娴 | 来源:发表于2020-04-20 19:40 被阅读0次

本篇文章主要讲的是关于节点(增加、删除、替换、合并、克隆)操作

增加元素

1、appendChild---在末尾添加子元素

用法:被添加的父元素.appendChild(想要添加的内容)

具体步骤

首先创建一个节点,

然后创建一个文本节点,

然后将文本节点添加到LI节点上。

最后将节点添加到列表中。

参考例子:https://www.runoob.com/jsref/met-node-appendchild.html

2、insertBefore---随机位置添加元素

用法:想要调整元素的父元素.insertBefore(想要调整的元素,调整到某一具体位置)

参考例子:https://c.runoob.com/codedemo/3236

节点关系示图----图片来源于高程三

替换元素

replaceChild:新的元素替换原来的元素,新节点可以已存在的或者是新创建的。

用法:替换节点位置.replaceChild(想要插入的对象,想要移除的对象)

参考例子:

https://www.runoob.com/jsref/met-node-replacechild.html

移除元素

removeChild:移除想要移除的节点。

用法:父节点.removeChild(移除具体节点位置)

参考例子:https://www.runoob.com/jsref/met-node-removechild.html

PS:以上节点操作,必须要取到父元素。

克隆元素

cloneNode():克隆某一节点。值有两个true和false,true为深复制(包含子节点),false为浅复制(不包含子节点)。需要注意的,IE会复制节点的事件其它浏览器不会,所以得先移除事件。只复制特性和子节点。

拓展需要了解:normalize

创建元素节点内容

createTextNode:创建是一段文本内容,类型是字符串

用法:var txt=document.createTextNode("hello word");

创建元素标签

createElement:创建是一对元素标签,类型是字符串

用法:var element=document.createElement("div");

把文本节点插入元素

appendChild:把文本节点插入元素

用法:即将要插入内容的节点标签.appendChild(节点内容)

例如:element.appendChild("txt");

参考例子:https://www.runoob.com/jsref/met-document-createtextnode.html

合并元素

normalize:不存在一个空的文本节点,或者两个相邻的文本点

用法:https://developer.mozilla.org/zh-CN/docs/Web/API/Node/normalize

分割元素

splitText:不存在一个空的文本节点,或者两个相邻的文本点

用法:插入内容的节点标签.splitText(想要分隔的位置,数字类型);

参考例子:https://www.runoob.com/dom/met-text-splittext.html

特别需要注意的是:一般来说在日常项目当中,能少用JS对节点处得就少用一些.

暂时写到这里,后期会进行相应补充。如果网友有补充可以留言,或者私信。本文章来源于本人整理,可用于各种形式交流(需声明来源于此处)

        如果觉得有帮助,请点个赞哈~     不喜欢的话~~ 用力踩,我接着!  

欢迎交流~  因为有交流才有进步~

相关文章

  • javascript节点(增加、删除、替换、合并、克隆)操作

    本篇文章主要讲的是关于节点(增加、删除、替换、合并、克隆)操作 增加元素 1、appendChild---在末尾添...

  • 36.DOM操作

    内部插入 外部插入 删除节点 克隆/替换节点 属性操作 CSS操作

  • dom操作

    javascript 原生方法对dom节点的操作具体包括:创建、添加、删除、替换、插入、复制、移动等。 dom操作...

  • R语言——文件夹操作【名称合并,替换,增加】

    R语言实现文件夹常见操作包括合并文件,文件名替换,增加,删除字符等操作。 要点 sub函数,for循环 1.实现读...

  • JavaScript数组与字符串方法小小总结

    1. 一般的增加,删除,替换 * delete操作后的数组: 2. 用splice()实现增加/插入、删除和替换 ...

  • 2018-04-08JQ中DOM的操作

    回顾原生DOM操作 *获取节点 *创建节点 *遍历节点 *替换节点 *删除节点 *插入节点 *复制节点 JQ中的...

  • jQuery中的DOM节点操作

    查找节点(略) 创建节点 插入节点 包裹节点 删除节点 复制节点 替换节点 节点遍历(略) 操作dom节点属性 ...

  • DOM整理-3

    增加、删除和替换节点 创建元素 document.createElement('元素名'); var table ...

  • javascript 与CSS 交互-8.22

    复习 访问指定节点的方法? 查看/修改属性节点? 根据层次关系查找节点? 创建和增加节点? 删除和替换节点的方法?...

  • DOM操作

    DOM 文档对象模型,操作【获取/新增插入/删除/修改/复制/替换】文档中的节点节点:【node】元素节点,文本节...

网友评论

    本文标题:javascript节点(增加、删除、替换、合并、克隆)操作

    本文链接:https://www.haomeiwen.com/subject/jdvjihtx.html