JavaScript-DOM操作高階應用

阿新 • • 發佈：2019-01-06

表格應用

獲取
tBodies、tHead、tFoot、rows、cells

隔行變色
滑鼠移入高亮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var oTab=document.getElementById('tab1');
        var 
 oldColor='';
        for(var i=0;i<oTab.tBodies[0].rows.length;i++)
         {
             oTab.tBodies[0].rows[i].onmouseover=function(){
                 oldColor=this.style.background;
                 this.style.background='yellow';
             };
             oTab.tBodies[0].rows[i].onmouseout=function 
(){
                 this.style.background=oldColor;
             };
            if(i%2)
            {
                oTab.tBodies[0].rows[i].style.background='gray';

            }
            else
            {
                oTab.tBodies[0].rows[i].style.background='';
            }
         }
    };
     
</script>
</head>
<body>
<table id="tab1" border="1" width="500">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年齡</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>週二</td>
            <td>27</td>
        </tr>
        <tr>
            <td>2</td>
            <td>張三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>27</td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>25</td>
        </tr>
        <tr>
            <td>5</td>
            <td>張偉</td>
            <td>24</td>
        </tr>
    </tbody>

</table>
</body>
</html>

新增、刪除一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var oTab=document.getElementById('tab1');

        var oBtn=document.getElementById('btn1');
        var oName=document.getElementById('name');
        var oAge=document.getElementById('age');
        var id=oTab.tBodies[0].rows.length+1;
        oBtn.onclick=function()
        {
            var oTr=document.createElement('tr');

            var oTd=document.createElement('td');
            oTd.innerHTML=id++;
            oTr.appendChild(oTd);

            var oTd=document.createElement('td');
            oTd.innerHTML=oName.value;
            oTr.appendChild(oTd);

            var oTd=document.createElement('td');
            oTd.innerHTML=oAge.value;
            oTr.appendChild(oTd);

             var 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="name" type"text"/>
年齡：<input id="age" type="text"/>
<input id="btn1" value="新增" type="button"/>
<table id="tab1" border="1" width="500">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年齡</td>
        <td>操作</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>週二</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>張三</td>
            <td>23</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>張偉</td>
            <td>24</td>
            <td></td>
        </tr>
    </tbody>

</table>
</body>
</html>

DOM方法的使用

搜尋

模糊搜尋（search）//找到並返回字串位置，未找到返回-1
忽略大小寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var oTab=document.getElementById('tab1');

        var oBtn=document.getElementById('btn1');
        var oTxt=document.getElementById('name');

        oBtn.onclick=function(){
            for(var i=0;i<oTab.tBodies[0].rows.length;i++)
            {
                // var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;
                // var sTxt=oTxt.value;
                // if(sTab.toLowerCase()==sTxt.tolowerCase())



                var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                var sTxt=oTxt.value.toLowerCase();

                if(sTab.search(sTxt)!=-1)
                {
                    oTab.tBodies[0].rows[i].style.background='yellow';

                }
                else
                {
                    oTab.tBodies[0].rows[i].style.background='';
                }
            }
        };

    };
    </script>
</head>
<body>
姓名：<input id="name" type"text"/>
<input id="btn1" value="搜素" type="button"/>
<table id="tab1" border="1" width="500">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年齡</td>
        <td>操作</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>週二</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>張三</td>
            <td>23</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>張偉</td>
            <td>24</td>
            <td></td>
        </tr>
    </tbody>

</table>
</body>
</html>

多關鍵字

    <script>
    window.onload=function(){
        var oTab=document.getElementById('tab1');

        var oBtn=document.getElementById('btn1');
        var oTxt=document.getElementById('name');

        oBtn.onclick=function(){
            for(var i=0;i<oTab.tBodies[0].rows.length;i++)
            {

                var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                var sTxt=oTxt.value.toLowerCase();

                var arr=sTxt.split(' ');

                if(sTab.search(sTxt)!=-1)
               oTab.tBodies[0].rows[i].style.background='';
                for(var j=0;j<arr.length;j++)
                {
                    if(sTab.search(arr[j])!=-1)
                    {
                      oTab.tBodies[0].rows[i].style.background='yellow';

                    }
                }

            }
        };

    };
    </script>

篩選

    <script>
    window.onload=function(){
        var oTab=document.getElementById('tab1');

        var oBtn=document.getElementById('btn1');
        var oTxt=document.getElementById('name');

        oBtn.onclick=function(){
            for(var i=0;i<oTab.tBodies[0].rows.length;i++)
            {

                var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                var sTxt=oTxt.value.toLowerCase();

                var arr=sTxt.split(' ');


               oTab.tBodies[0].rows[i].style.display='none';
                for(var j=0;j<arr.length;j++)
                {
                    if(sTab.search(arr[j])!=-1)
                    {
                   oTab.tBodies[0].rows[i].style.display='block';
                    }
                }

            }
        };

    };
    </script>

排序

//移動
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var oUl1=document.getElementById('ul1');
        var oUl2=document.getElementById('ul2');
        var oBtn=document.getElementById('btn1');

        oBtn.onclick=function()
        {
            var oLi=oUl1.children[0];

            //oUl1.removeChild(oLi);
            oUl2.appendChild(oLi);//先把元素從原有父級上刪掉，新增到新的父級上
           //oUl1.appendChild(oLi);//把元素從前插到後面 

        };
    };
    </script>
</head>
<body>
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<input id="btn1" type="button" value="移動"/>
<ul id="ul2">
</ul>
</body>
</html>

//排序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var oUl1=document.getElementById('ul1');
        var oUl2=document.getElementById('ul2');
        var oBtn=document.getElementById('btn1');

        oBtn.onclick=function()
        {
            var aLi=oUl1.getElementsByTagName('li');

            var arr=[];
            for(var i=0;i<aLi.length;i++ )
            {
                arr[i]=aLi[i];
            }

            arr.sort(function(li1,li2){
                var n1=parseInt(li1.innerHTML)
                var n2=pareInt(li2.innerHTML)

                return n1-n2; 

            });
            for(var i=0;i<arr.length;i++)
            {
                oUl1.appendChild(arr[i]);
            }

        };


    };
    </script>
</head>
<body>
    <input id="btn1" type="button" value="排序"/>
<ul id="ul1">
    <li>34</li>
    <li>5</li>
    <li>9</li>
    <li>88</li>
    <li>54</li>
</ul>
</body>
</html>

//排序2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oTab=document.getElementById('tab1');

            var oBtn=document.getElementById('btn1');

            oBtn.onclick=function()
            {
                var arr=[];

                for(var i=0;i<oTab.tBodies[0].rows.length;i++)
                {
                    arr[i]=oTab.tBodies[0].rows[i];
            }
            arr.sort(function(tr1,tr2){
                var n1=parseInt(tr1.cells[0].innerHTML);
                var n2=parseInt(tr2.cells[0].innerHTML);

                return n1-n2;

            });
            for(var i=0;i<arr.length;i++)
            {
                oTab.tBodies[0].appendCHild(arr[i]);
            }

        };
        </script>
</head>
<body>
<input id="btn1" value="排序" type="button"/>
<table id="tab1" border="1" width="500">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年齡</td>
        <td>操作</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>週二</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>張三</td>
            <td>23</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>李四</td>
            <td>27</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>王五</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>張偉</td>
            <td>24</td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>
</html>

表單應用

action

onsubmit

表單內容驗證

1、阻止使用者輸入非法字元阻止事件
2、輸入時、失去焦點時驗證 onkeyup 、onblur
3、提交時檢查 onsubmit
*4、後臺資料檢查

JavaScript-DOM操作高階應用

表格應用獲取 tBodies、tHead、tFoot、rows、cells 隔行變色滑鼠移入高亮 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

JavaScript-DOM操作應用

建立、插入和刪除元素建立DOM元素 creatElement('標籤元素') 父級.appendChild(子節點)//新增到父級末尾插入元素父級.insertBefore(子節點，在誰之前) <!DOCTYPE html> <ht

JavaScript DOM操作及擴展

解釋多層 click 這樣的 cap exe 不能 tails isp 什麽是DOM？？？ DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的一個API（應用程序編程接口）。註意，IE中的所有DOM對象都是以COM（組件對象

[ Day51 ]Python之路----JavaScript --DOM操作

pro 句柄 mar conf 屬性列表輸入框毫秒歷史 asc JavaScript可以操作整個瀏覽器，但是這個瀏覽器對象比較大，因此為了操作方便，又分為三個對象。 1.BOM對象 BOM對象主要操作地址欄，瀏覽歷史，窗口高度等。 2.DOM對象 DOM對象主要操作網

JavaScript DOM操作案例點擊按鈕選擇菜單

cli option code scrip itl -c nbsp round span 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=

JavaScript DOM操作案例點擊按鈕顯示隱藏div優化後

元素 clas src com 點擊事件 cti charset round dom <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JavaScript DOM操作案例點擊按鈕修改div的屬性

asc onclick comm cli 顏色代碼 val dom 按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

JavaScript DOM操作案例點擊按鈕實現網頁開關燈

lang 網頁 dom操作 javascrip tle function () click pre <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

JavaScript DOM操作案例點擊按鈕通過類樣式的方式顯示跟隱藏div

java javascrip 樣式 ack eight class htm lang charset <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

JavaScript DOM操作案例美女相冊

one cli als padding add ear all tel ret <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &

JavaScript DOM操作案例封裝innerText跟textContent函數(瀏覽器兼容)

val eight 操作 javascrip ret .text doc com round <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Day046--JavaScript-- DOM操作, js中的面向物件, 定時

一. DOM的操作(建立,追加,刪除) parentNode 獲取父級標籤 nextElementSibling 獲取下一個兄弟節點 children 獲取所有的子標籤 <!DOCTYPEhtml><htmllang="en"><

javascript DOM操作中的insertAdjacentHTML方法

插入HTML內容與文字內容以前用的是innerHTML與innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText兩個API，特地學習一下： insertAdjacentHTML和 insertAdjacentText這兩個方法很靈活，可以在指定的地方插入h

JavaScript--Dom操作元素的樣式

在前端開發中，有時候需要動態修改的網頁元素的樣式，這裡將使用JS動態修改元素樣式的方法做個小結：網頁結構：按鈕：　　標籤：input 型別：button id：btn

JavaScript DOM操作淺談

next meta eval asc 進行 too dna parent tag 1.理解DOM：　　DOM（Document Object Model ，文檔對象模型）一種獨立於語言，用於操作xml，html文檔的應用編程接口。　　怎麽說，我從兩個角度理解：

（九）JavaScript DOM操作詳解

DOM （Document Object Model） DOM定義了表示和修改文件所需方法。DOM物件即為宿主物件，由瀏覽器廠商定義，用來操作html和xml功能的一類物件的集合。節點（node） DOM 的最小組成單位叫做節點（node）。文件的樹形結構（D

《Javascript 高階程式設計(第三版)》筆記0x11 DOM操作技術

動態指令碼 <script type="text/javascript" src="client.js"></script> function loadScript(url){ var script = document.createElement("scri

JavaScript之dom操作

進行 ack 選擇器 ges ava 屬性擴展簡介 logs 一、簡介文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。DOM編程： DOM 是關於如何獲取、修改、添加或刪除 HTM

原生JavaScript常用的DOM操作

需要 ssi dom操作哈哈原來 rtc font tno 多個　　之前項目一直都是用JQuery或者Vue來做的，確實好用，畢竟幫我們解決了很多瀏覽器兼容問題，但是後面發現大公司面試題都是要原生Javascript來做，然後我就一臉懵逼哈哈哈，畢竟大公司需要的框架或

JavaScript的DOM操作(節點操作)

value 內容 new one pcl html文檔 http dom操作 att 創建節點createElement()var node = document.createElement(“div”);沒什麽可說的，創建一個元素節點，但註意，這個節點不會被自動添

JavaScript-DOM操作高階應用

表格應用

DOM方法的使用

搜尋

表單應用

表單內容驗證

相關推薦