js怎样添加、移除、移动、复制、创建和查找节点?

js怎样添加、移除、移动、复制、创建和查找节点?,第1张

添加节点append;移除节点removeChild;移动节点:var sdds=document.getElementById;创建节点createTextNode();查找节点:document.getElementsByTagName。

其他方法:

创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

查找

getElementsByTagName() //通过标签名

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id,唯一性

实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

复制是一个使用频率特别高的 *** 作,在网页中,一般可以选中要复制的内容,使用快捷键 ctrl+c 将内容复制到剪贴板。除了使用系统提供的快捷方式复制网页内容,我们还可以用JS实现复制,这得益于document的 execCommand('copy') 命令。

实现整个复制功能,需要以下三个步骤:

大部分HTML元素都有innerText和innerHTML两个属性,innerText属性返回文本内容,innerHTML属性返回标签元素。我们可以创建一个函数,用于获取需要返回的内容:

上面的selectText函数接收一个DOM元素,返回DOM元素的innerText属性值。

我们可以通过表单元素的select()方法选中内容,表单元素因为textarea限制少于input,所以推荐使用textarea。我们可以动态创建一个textarea元素,将textarea的value属性值设置为上面的innerText属性值,再执行textarea的select方法选中。

上面实现了选中,下面就可以实现复制功能了。

最后一步就可以用execCommand('copy')实现复制了,它可以复制浏览器中选中的文本,比如说上面被textarea选中的文本,复制之后记得移除textarea。

第二步和第三步可以优化一下,创建一个copy函数,函数参数设置为第一步需要复制的文本,返回值为复制的结果。

完整JS示例如下:

可以将上面的完整JS示例写入一个JS文件,将JS文件引入HTML中,通过JS点击事件来执行复制函数。

效果图:


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11716830.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存