DOM高级-----笔记
1.在table标签中就算没有tbody,只有一堆的tr,td,放到浏览器中也会自动生成tbody,所以选取元素的时候不要忽略tbody标签。
2.根据以前对DOM的了解,比如要选取id为tab的表格的第三行第二列的值,那么会这样写document.getElementById("tab").getElmentsByTagName("tbody")[0].getElementsByTagName("tr")[2].getElementsByTagName("td")[1].innerHTML;这实在是太长了,在javascript出现的初期,它的功能很大的一部分就是为了方便对表格的操作以及表单的操作,所以这么长得一大串很影响开发效率,所以针对表格元素,js特意有了简便的写法:document.getElementById("tab").tBodies[0].rows[2].cells[1].innerHTML;
3.要做搜索功能 a,要忽略大小写 有2中方法,全部转成大写toUpperCase(),全部转成小写toLowerCase()
4.简化代码:如果用到if else 语句,可以考虑是否可用三目来简化 ,如果取反可以试着用 bAsc=!bAsc;
5.排序:
appendChild功能 1.先把元素移除父级 2.添加到新的父级
6.对元素进行排序原理
a.转数组 b.数组排序 c.重新插入一轮(appendChild)
window.onload=function() { var oBtn = document.getElementById("btn1"); var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName("li"); oBtn.onclick=function() { var arr = []; for(var i=0;i<aLi.length;i++) { arr[i]=aLi[i]; } //转数组 arr.sort(function(li1,li2){ return parseInt(li1.innerHTML)-parseInt(li2.innerHTML); }); //数组排序 for(var i=0;i<arr.length;i++) { oUl.appendChild(arr[i]); } //重新插入一轮 }; };
7.onsubmit onreset 阻止默认行为return false; 可以用这点,让交互更人性化
8.搜索时需要用到的重要的方法search