javascript-document.importNode和d
2018-10-10 本文已影响1人
家里有棵核桃树
在利用shadow-dom创建组件的时，偶然发现了document.importNode的使用，所以就想认真学习一下document.importNode和document.adoptNode的使用。
1、document.importNode
1.1 用法
var node = document.importNode(externalNode, deep)
1.2 特性
将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中。
1.3 示例
（1）iframe.html【同2.3示例iframe.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<h1>iframe标题一-importNode</h1>
<h2>iframe标题二-adoptNode</h2>
</body>
</html>
（2）index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document.importNode的应用</title>
<style>
iframe {
border: 3px solid #2185d1;
}
</style>
</head>
<body>
<iframe src="iframe.html" frameborder="0" width="600" height="200"></iframe>
<script>
// 要等子页面加载完了再执行 否则获取到的iframeDocument不对
window.onload = function () {
const iframeDocument = document.querySelector("iframe").contentDocument;
const cloneNodeH1 = iframeDocument.querySelector('h1');
// document.importNode的用法
let importNode = document.importNode(cloneNodeH1, true); // 深拷贝
document.body.appendChild(importNode);
console.log(cloneNodeH1 === importNode); // false
console.log(importNode.ownerDocument); // 当前文档
console.log(cloneNodeH1.ownerDocument); // iframeDocument
};
</script>
</body>
</html>
1.4 效果图
效果图
2、document.adoptNode
2.1 用法
var node = document.adoptNode(externalNode)
2.2 特性
document.adoptNode用途：从其他的document文档中获取一个节点。 该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的ownerDocument 属性会变成当前的document文档。 之后你可以把这个节点插入到当前文档中。【该方法也同样适用 同一文档的不同元素切换】。
2.3 示例
（1）iframe.html【同1.3示例iframe.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<h1>iframe标题一-importNode</h1>
<h2>iframe标题二-adoptNode</h2>
</body>
</html>
（2）index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document.adoptNode的应用</title>
<style>
iframe {
border: 3px solid #2185d1;
}
</style>
</head>
<body>
<iframe src="iframe.html" frameborder="0" width="600" height="200"></iframe>
<script>
// 要等子页面加载完了再执行 否则获取到的iframeDocument不对
window.onload = function () {
const iframeDocument = document.querySelector("iframe").contentDocument;
const cloneNodeH2 = iframeDocument.querySelector('h2');
// document.adoptNode的用法
let adoptNode = document.adoptNode(cloneNodeH2);
document.body.appendChild(adoptNode);
console.log(cloneNodeH2 === adoptNode); // true
console.log(adoptNode.ownerDocument); // 当前文档
console.log(cloneNodeH2.ownerDocument); // 当前文档
};
</script>
</body>
</html>
1.4 效果图
效果图
3、document.adoptNode在同一文档不同元素间的应用
功能：通过点击不同的按钮，实现列表项的左右切换显示
（1）index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document.adoptNode在同一文档的使用</title>
<style>
* {
margin: 0;
}
body, .box {
padding: 20px;
}
.box {
display: table;
bottom: 0;
border: 3px solid #2185d1;
}
ul, .btnGroup{
float: left;
margin: 20px 50px;
}
ul {
width: 60px;
height: 150px;
padding: 20px 50px;
border: 1px solid #155269;
border-radius: 5px;
}
.btnGroup {
margin-top: 90px;
}
button ~ button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">
<h3>document.adoptNode同一文档下的应用</h3>
<ul>
<li>面包</li>
<li>包子</li>
<li>子不语</li>
<li>语言</li>
</ul>
<div class="btnGroup">
<button type="button" onclick="moveRight()">>></button>
<br>
<button type="button" onclick="moveLeft()"><<</button>
</div>
<ul></ul>
</div>
<script>
const ul1 = document.getElementsByTagName('ul')[0];
const ul2 = document.getElementsByTagName('ul')[1];
function move(eleFrom, eleTo) {
let firshChild = eleFrom.firstElementChild;
if (null == firshChild) {
alert('列表为空，不能移动');
return false;
}
eleTo.append(document.adoptNode(firshChild));
}
function moveRight() {
move(ul1, ul2);
}
function moveLeft() {
move(ul2, ul1);
}
</script>
</body>
</html>
（2）效果图
效果图
