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)进行值复制。

如果不知道Array.PRototype.splice的使用的方法那很有可能就要被扣分了。使用Javascript数组类型内置的splice方法仅需一行代码即可轻松实现对数组元素进行插入、删除、替换 *** 作。

方法签名:Array.prototype.splice(index,count[,elm1,elm2...n])描述:使用Array类型的splice方法可以对数组元素进行插入、替换、删除。该方法讲直接影响当前的数组对象(与.slice(index1,index2)方法不同)并返回被删除的数组项。

参数:index :数组中元素的起始下标。

count :需要要被删除或替换的元素个数。

elems :需要插入到数组中的项。

返回值 :返回从素组中被移除的项。

演示:var items =[a,b,c,d,e]//删除元素result = items.splice(1,2)

//这个 *** 作删除了示例中items数组中的元素[b,c],并返回[b,c]给result.

//替换元素result = items.splice(1,2,x,y)

//这个 *** 作使用元素x,y替换了示例中items数组中的元素[b,c],并返回[b,c] 给 result.

//插入元素result = items.splice(1,0,x,y)

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript">

        window.onload = function(){

            var $ = function(args){

                return document.getElementById(args)

            }

            var add = $("add")

            var rep = $("replace")

            var rem = $("remove")

            var dom, h

            add.onclick = function(){

                //新增

                 dom = document.createElement("p")

                dom.innerHTML="<span style='color:red'> 这是一个被p标记包含的 span 标签</span>"

                document.body.appendChild(dom)

            }

            rep.onclick = function(){

                //替换

                 h = document.createElement("h1")

                h.innerHTML="<span style='color:green'> 这是一个被h1标记包含的 span 标签</span>"

                document.body.replaceChild(h,dom)

                dom = null

            }

            rem.onclick = function(){

                //删除

                if(dom){

                    document.body.removeChild(dom)

                }else if(h){

                    document.body.removeChild(h)

                }

            }

        }

    </script>

</head>

<body>

<input type="button" value="新增" id="add"/>

<input type="button" value="替换" id="replace"/>

<input type="button" value="删除" id="remove"/>

</body>

</html>


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

原文地址: http://outofmemory.cn/bake/11530212.html

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

发表评论

登录后才能评论

评论列表(0条)

保存