JS adoptNode()方法

最新推荐文章于 2022-04-18 18:35:16 发布

Dcripple

最新推荐文章于 2022-04-18 18:35:16 发布

阅读量378

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45990765/article/details/116718851

版权

1、adoptNode(Node)方法用于从另外一个文档中获取一个节点（可以是任何节点类型）

adoptNode()会将原文档中的节点删除

iframe.html 代码：

<body>

    <h1 id="h1">Hello World!!</h1>
    <h3 id="h3">获取节点</h3>
    <h2 id="h2">HTML/CSS</h2>
    <h2 id="h">JavaScript</h2>
    <h2>服务端开发</h2>
    <h2>Java教程</h2>
    <h2>Python教程</h2>
    <h2>移动端</h2>
    <h2>数据库</h2>

</body>

例：

 		<iframe src="iframe.html"></iframe>
        <button οnclick="myfun()">获取节点</button>
        <script>
            function myfun() {
                var frame = document.getElementsByTagName("iframe")[0];
                var h = frame.contentWindow.document.getElementsByTagName("h1")[0];
                var x = document.adoptNode(h);
                document.body.appendChild(x);
            }
        </script>

在这里插入图片描述
2、使用document.importNode()方法来拷贝节点，原文档中的节点不删除
语法：importNode(Node,deep)

第一个值，为要导入的节点，
第二个值，true或者false，表示是否要导入节点的后代节点，默认为true（深度克隆）；false为浅克隆

例：

		<iframe src="iframe.html"></iframe>
        <button οnclick="myfun()">获取节点</button>
        <script>
             function myfun() {
                  var frame = document.getElementsByTagName("iframe")[0];
                  var h = frame.contentDocument.getElementsByTagName("h2")[2];
                  document.body.appendChild(document.importNode(h,true));
             }
         </script>

在这里插入图片描述
3、使用element.cloneNode()方法来拷贝当前文档的节点，节点不会被删除

克隆一个元素节点会拷贝它所有的属性以及属性值，绑定的事件

例：

 <iframe src="iframe.html"></iframe>
 <button οnclick="myfun()">获取节点</button>
 <script>
     function myfun() {
          var frame = document.getElementsByTagName("iframe")[0];
          var h = frame.cloneNode(true);
          document.body.appendChild(h);
      }
 </script>

在这里插入图片描述

Dcripple

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS adoptNode()方法

1、adoptNode(Node)方法用于从另外一个文档中获取一个节点（可以是任何节点类型）adoptNode()会将原文档中的节点删除iframe.html 代码：<body> <h1 id="h1">Hello World!!</h1> <h3 id="h3">获取节点</h3> <h2 id="h2">HTML/CSS</h2> <h2 id="h">JavaSc
复制链接

扫一扫