此例子使用了ES6中的新增的let命令,请使用支持ES6语法的浏览器查看。
ES6 中 let 命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。
DocumentFragment
DocumentFragment 文档碎片节点,相信大多数朋友在平时关注使用很少吧,其实无论是jquery还是vue都使用了文档碎片来进行dom操作dom级别的优化
DocumentFragment节,本身就是一个完整的 DOM 树形结构。它没有父节点,parentNode返回null,但是可以插入任意数量的子节点。它不属于当前文档,操作DocumentFragment节点,要比直接操作 DOM 树快得多。
它一般用于构建一个 DOM 结构,然后把这个 DOM 结构整体插入当前文档。document.createDocumentFragment方法,以及浏览器原生的DocumentFragment构造函数,可以创建一个空的DocumentFragment节点。然后再使用其他 DOM 方法,向其添加子节点。
var docFrag = document.createDocumentFragment();
// 等同于
var docFrag = new DocumentFragment();
DocumentFragment节点本身不能被插入当前文档。当它作为appendChild()、insertBefore()、replaceChild()等方法的参数时,是它的所有子节点插入当前文档,而不是它自身。一旦DocumentFragment节点被添加进当前文档,它自身就变成了空节点(textContent属性为空字符串),可以被再次使用。
var node="";
var fragment = document.createDocumentFragment();
for (var i = 1; i <= 5; i++) {
node=document.getElementById("textb").cloneNode(true);
fragment.appendChild(node);
}
document.getElementById("texta").appendChild(fragment);
DocumentFragment节点对象没有自己的属性和方法,全部继承自Node节点和ParentNode接口。也就是说,DocumentFragment节点比Node节点多出以下四个属性。
- children:返回一个动态的HTMLCollection集合对象,包括当前DocumentFragment对象的所有子元素节点。
- firstElementChild:返回当前DocumentFragment对象的第一个子元素节点,如果没有则返回null。
- lastElementChild:返回当前DocumentFragment对象的最后一个子元素节点,如果没有则返回null。
- childElementCount:返回当前DocumentFragment对象的所有子元素数量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js与css3:transition实现动画 单元格随机排列</title>
</head>
<body>
<div class="warp" id="warp"></div>
<div style="text-align: center">
<button type="button" id="chang">chang</button>
</div>
<style>
* {
padding: 0px;
margin: 0px
}
.warp {
position: relative;
width: 210px;
height: 210px;
margin: auto;
background-color: aliceblue;
font-size: 0;
}
.warp span {
transition: all linear .5s;
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
font-size: 12px;
text-align: center;
line-height: 20px;
overflow: hidden;
}
</style>
<script>
let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
let span = document.createElement('span');
let text = document.createTextNode(i);
span.appendChild(text);
fragment.appendChild(span);
}
let warp = document.getElementById('warp');
warp.appendChild(fragment);
let spanlist = warp.getElementsByTagName('span');
let arr = [];
getpos();
changpos();
function getpos() {
for (let i = 1; i <= 10; i++) {//行
for (let j = 1; j <= 10; j++) {//列
let posleft = (i - 1) * 21 + 'px';
let postop = (j - 1) * 21 + 'px';
let posi = [posleft, postop]
arr.push(posi);
}
}
}
function changpos() {
for (let i = 0; i < 100; i++) {//行
elspan = spanlist[i];
elspan.style.top = arr[i][0];
elspan.style.left = arr[i][1];
}
}
function changarr() {
arr.sort(function () {
return Math.random() > .5 ? -1 : 1;
})
changpos();
}
document.getElementById('chang').addEventListener('click', changarr);
</script>
</body>
</html>