DOM的映射机制
DOM映射:页面中的标签和js中获取到的元素对象或者元素集合是紧紧的绑定在一起的
页面中html结构改变了,js中不需要重新获取,集合里面的内容也会跟着自动改变
<body>
<ul id="list">
<li>1</li>
<li>189</li>
<li>18</li>
<li>28</li>
</ul>
<script>
var list = document.getElementById("list");
// js获取到的元素集合
var olis = list.getElementsByTagName("li");
console.log(olis.length); // 4
var li = document.createElement("li");
list.appendChild(li);
// 增加一个li后,元素集合自动改变,不需要重新获取
console.log(olis.length); // 5
</script>
</body>
需要注意的是,如果将集合变成数组,这个将失效,如这里将 olis = Array.prototype.slice.call(olis);这样的话,后面的就还是4
可以应用到表格排序上
就是想让表格按照某项排序
<body>
<table id="table">
<thead>
<tr>
<th>名字</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>23</td>
</tr>
<tr>
<td>b</td>
<td>27</td>
</tr>
<tr>
<td>c</td>
<td>22</td>
</tr>
</tbody>
</table>
<script>
var otable = document.getElementById("table");
var otBody = otable.tBodies[0]
var otrs = otBody.getElementsByTagName("tr");
otrs = Array.prototype.slice.call(otrs);
otrs.sort(function(a, b) {
return a.getElementsByTagName("td")[1].innerHTML - b.getElementsByTagName("td")[1].innerHTML;
})
// 将排序完之后的trs重新插入到文档中,结果会按照年龄从小到大排序
var frg = document.createDocumentFragment();
for (var i = 0; i < otrs.length; i++) {
var cur = otrs[i];
frg.appendChild(cur);
}
otBody.appendChild(frg);
frg = null;
</script>
</body>
