leo列

导航

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

posted on 2012-11-23 11:32  leo列  阅读(362)  评论(0编辑  收藏  举报