DOM高级

Posted distant-遥远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM高级相关的知识，希望对你有一定的参考价值。

表格应用

       获取

           tBodies， tHead， tFoot， rows， cells

        隔行变色

            鼠标移入高亮，

         添加，删除一行

            DOM的方法使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输出表格</title>
<script>
window.onload=function ()
{
    var oTab=document.getElementById(\'tab1\');
    
//第一种写法    //alert(oTab.getElementsByTagName(\'tbody\')[0].getElementsByTagName(\'tr\')[2].getElementsByTagName(\'td\')[1].innerHTML);
    alert(oTab.tBodies[0].rows[2].cells[1].innerHTML);
};
</script>
</head>

<body>
<table id="tab1" border="1" width="400">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>操作</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>流氓</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>莫莫</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>小李</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>小米</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>小明</td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>
</html>
简单表格输出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function()
{
    var oBtn=document.getElementById(\'btn1\');
    var oTab=document.getElementById(\'tab1\');
    //用变量改变顺序还是倒序
    var bAsc=true;
    oBtn.onclick=function()
    {
        //点击生成数组
        var arr=[];
        var i=0;
        
        for(i=0; i<oTab.tBodies[0].rows.length; i++)
        {
            //把每行赋给一个数组，坐标从0开始
            arr[i]=oTab.tBodies[0].rows[i];
            }
            //用sort排序arr
    arr.sort(function(tr1, tr2){
           if(bAsc)
           {
               return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
               }
           else
           {
                return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
               }
        
        });
        //以此打印出每行
    for(i=0;i<arr.length;i++)
        {
            oTab.tBodies[0].appendChild(arr[i]);
        }
        

        bAsc=!bAsc;
        };
        }
    
     
</script>

<body>

<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="400">
<thead>
         <td>编号</td>
         <td>姓名</td>
         <td>操作</td>
</thead>
<tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td></td>
        </tr>
         <tr>
            <td>2</td>
            <td>miang</td>
            <td></td>
        </tr>
           <tr>
            <td>6</td>
            <td>Bloo</td>
            <td></td>
        </tr>
         <tr>
            <td>4</td>
            <td>home</td>
            <td></td>
        </tr>
         <tr>
            <td>5</td>
            <td>heep</td>
            <td></td>
        </tr>
</tbody>
</table>
</body>
</html>
表格坐标的排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格搜索</title>
<script>
window.onload=function()
{
    var oBtn=document.getElementById(\'btn1\');
    var oTab=document.getElementById(\'tab1\');
    var oTxt=document.getElementById(\'txt1\');

oBtn.onclick=function()
{
    var i=0;
    
    for(i=0; i<oTab.tBodies[0].rows.length; i++)
    {
           //获取每行转成大写
           var sValueInTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
           //获取每个txt转换成大写
          var sValueInTxt=oTxt.value.toLowerCase();
          //把文本框的数组用空格分隔
        var arr=sValueInTxt.split(\' \');
            
            var bFound=false;
            
            for(var j=0;j<arr.length;j++)
            {
                //监控text里的value字符串，不为空则开bFound
                if(sValueInTab.search(arr[j])!=-1)
                {
                    bFound=true;
                    break;
                }
            }
            
            if(bFound)
                {
                    oTab.tBodies[0].rows[i].style.background=\'yellow\';            }
                else{
                    oTab.tBodies[0].rows[i].style.background=\'\';
                    }
        
        }
}
    }

</script>
</head>

<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="搜索" />

<table id="tab1" border="1" width="400">
<thead>
         <td>编号</td>
         <td>姓名</td>
         <td>操作</td>
</thead>
<tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td></td>
        </tr>
         <tr>
            <td>2</td>
            <td>miang</td>
            <td></td>
        </tr>
           <tr>
            <td>3</td>
            <td>Bloo</td>
            <td></td>
        </tr>
         <tr>
            <td>4</td>
            <td>home</td>
            <td></td>
        </tr>
         <tr>
            <td>5</td>
            <td>heep</td>
            <td></td>
        </tr>
</tbody>
</table>
</body>
</html>
表格的搜索
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格的删除</title>
<script>
window.onload=function()
{
    var oTab=document.getElementById(\'tab1\');
    var oBtn=document.getElementById(\'btn1\');
    var oTxt=document.getElementById(\'txt1\');
    var iNowId=oTab.tBodies[0].rows.length+1;
    oBtn.onclick=function()
    {
        //创建行标签
        var oTr=document.createElement(\'tr\');
        var oTd=null;
        //创建第一个空白格
        oTd=document.createElement(\'td\');
        //内容等于坐标+1
        oTd.innerHTML=iNowId++;
        //添加到行里
        oTr.appendChild(oTd);
        
        //创建第2个空白格
        oTd=document.createElement(\'td\');
        //添加输入框内容
        oTd.innerHTML=oTxt.value;
        //添加到行里
        oTr.appendChild(oTd);
        
        //创建第3个空白格
        oTd=document.createElement(\'td\');
        //空白格内容
        oTd.innerHTML=\'<a href="javascript:;">删除</a>\';
        //添加到行里
        oTr.appendChild(oTd);
        
        oTd.getElementsByTagName(\'a\')[0].onclick=function()
        {
             //点击等于删除父级的父级；等于本身在的行
            oTab.tBodies[0].removeChild(this.parentNode.parentNode);
            }
        //添加一行到表中
        oTab.tBodies[0].appendChild(oTr);
        }
    }
</script>  

</head>

<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="400">
<thead>
         <td>编号</td>
         <td>姓名</td>
         <td>操作</td>
</thead>
<tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td></td>
        </tr>
         <tr>
            <td>2</td>
            <td>miang</td>
            <td></td>
        </tr>
           <tr>
            <td>3</td>
            <td>Bloo</td>
            <td></td>
        </tr>
         <tr>
            <td>4</td>
            <td>home</td>
            <td></td>
        </tr>
         <tr>
            <td>5</td>
            <td>heep</td>
            <td></td>
        </tr>
</tbody>
</table>
</body>
</html>
表格的创建加删除

 

表格应用（2）

搜索

         版本1：基础版本------字符串比较

         版本2：忽略大小写----大小写转换

         版本3： 模糊搜索---search的使用

         版本4：多关键词---split

          高亮显示， 筛选

排序

          移动li  

           元素排序： 转换---排序----插入

           

<script>
window.onload=function ()
{
    var oBtn=document.getElementById(\'btn1\');
    var oUl=document.getElementById(\'ul1\');
    
    oBtn.onclick=function ()
    {
        var aLi=oUl.getElementsByTagName(\'li\');
        var arr=[];
        var i=0;
        
        //1.转成数组
        for(i=0;i<aLi.length;i++)
        {
            arr[i]=aLi[i];
        }
        
        //2.数组排序
        arr.sort(function (li1, li2){
            return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
        });
        
        //3.重新插入
        for(i=0;i<arr.length;i++)
        {
            oUl.appendChild(arr[i]);
        }
    };
};
</script>
</head>

<body>
<input id="btn1" type="button" value="排序Li" />
<ul id="ul1">
    <li>32</li>
    <li>12</li>
    <li>87</li>
    <li>9</li>
    <li>18</li>
</ul>
</body>
</html>
li的排序

 

表单应用（1）

表单的基本基础知识

        什么是表单

 

 

 

 

              

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oForm=document.getElementById(\'form1\');
    var oUser=document.getElementsByName(\'user\')[0];
    var oPass=document.getElementsByName(\'pass\')[0];
    
    oForm.onsubmit=function ()
    {
        if(oUser.value==\'\' || oPass.value==\'\')
        {
            alert(\'您填错了\');
            return false;
        }
    };
    
    oForm.onreset=function ()
    {
        /*if(confirm(\'是否要清空？\'))
        {
            return true;
        }
        else
        {
            return false;
        }*/
        
        return confirm(\'是否要清空？\');
    };
};
</script>
</head>

<body>
<form id="form1" action="http://www.miaov.com/" method="get">
    用户名：<input type="text" name="user" />
    密码：<input type="password" name="pass" />
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
</form>
</body>
</html>
简单表单提交

 

               向服务器提交数据，比如用户注册

               action    提交到哪里

        表单事件

                onsubmit   提交时发生

                onreset      重置时发生 

表单应用（2）

表单内容验证

    阻止用户输入非法字符            阻止事件

    输入时， 失去焦点时验证        onkeyup onblur

    提交时检查                          onsubmit

    后台数据检查

本节重点

     表格----元素获取

     表格-----隔行变色，高亮显示

      表格----添加，删除

      表格----排序

      表单----常用属性

       表单----事件

       表单---校验

以上是关于DOM高级的主要内容，如果未能解决你的问题，请参考以下文章

jQuery的DOM操作

JavaScript笔试题（js高级代码片段）

JavaScript单行代码，也就是代码片段

实用代码片段将json数据绑定到html元素 （转）

Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment