js中的DOM操作

家有仙妻寶寶 2021-09-29

展開全文

一、前言

DOM 是 W3C（World Wide Web Consortium）標(biāo)準(zhǔn)。同時也定義了訪問諸如 XML 和 HTML 文檔的標(biāo)準(zhǔn)：

DOM是一個使程序和腳本有能力動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式的平臺和語言中立的接口。

在HTML和JavaScript的學(xué)習(xí)中，DOM操作可謂時重中之重。今天，小編就領(lǐng)著大家來看看DOM操作是個什么樣子?。?/p>

二、DOM節(jié)點(diǎn)

DOM節(jié)點(diǎn)分為三大類：元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)；

而我們心心念念想知道的DOM樹就長醬紫！

由DOM樹我們可以看到，文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)屬于元素節(jié)點(diǎn)的子節(jié)點(diǎn)。

　文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)就像是這顆DOM樹的果子，而元素節(jié)點(diǎn)就是樹枝，所以，在操作時，一定要要記順枝摘果：得先取到元素節(jié)點(diǎn)！然后再操作子節(jié)點(diǎn)！！

要先取到元素節(jié)點(diǎn)！要先取到元素節(jié)點(diǎn)！要先取到元素節(jié)點(diǎn)！重要的事情說三遍！

　到這你就該好奇了，那該怎么順著樹枝摘果子呢，別急，小編給你帶來了方法!

2.1先找樹枝——獲取元素節(jié)點(diǎn)

首先，可以用使用getElement系列方法，取到元素節(jié)點(diǎn)。

　下面列出一些常用的 DOM 對象方法:

在這里，小編該介紹怎么找樹枝了！

　小編先示范一遍，注意看了！

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title></title>
        <style type='text/css'>
            .div{
                width: 100px;
                height: 100px;
            }
        </style>
        <script type='text/javascript'>
            window.onload = function(){
                var btn1 = document.getElementById('btn1');
                console.log(btn1);
                var is = 0;
                btn1.onclick =function  (){
                    
                    is++;
                    if(is%2!=0){
                        var div = document.getElementsByClassName('div');
                        div[0].style = 'background-color:red;color:yellow;'
//                        div[0].innerText = 'hehe';
                        div[0].innerHTML = '<h2>hehe</h2>';


                    }else {
                        var div = document.getElementsByClassName('div');
                        div[0].style = 'background-color:blue;color:white;'
                        div[0].innerHTML = '<h2>hahaha</h2>';
                    }
                    
                }
                
            }
    
        </script>
    </head>
    <body>    
        <button id = 'btn1' class = 'btn' onclick='but()'>這是一個按鈕1</button>
        <div class='div'>hahaha</div>
        
    </body>
</html>

下面，小編開始一步步教學(xué)了！

getElementById:通過id取到唯一節(jié)點(diǎn)。如果id重名，只能取到第一個。

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

console.log(btn1);
console.log(btn2);

小編在上面的代碼中新建了一個按鈕，ID同樣為“btn1”；分別通過getElementById取得了兩個的元素節(jié)點(diǎn)，并在控制臺打??；得到的結(jié)果：

getElementsByName() ：通過name屬性
getElementsByTagName() ：通過標(biāo)簽名；
getElementsByClassName() ：通過class名；
上面的通過name屬性、標(biāo)簽名和class名小編就不多說了，直接看一下怎么使用吧：

var btn1 = document.getElementById('btn1');
var className = document.getElementsByClassName('btn');
var tagName = document.getElementsByTagName('button');
var name = document.getElementsByName('btn');
console.log(btn)
console.log(className)
console.log(tagName);
console.log(name);

　　
   小編提示：
   >>>獲取元素節(jié)點(diǎn)時，一定要注意：獲取節(jié)點(diǎn)的語句，必須在DOM渲染完成后執(zhí)行。
可以有兩種方式實(shí)現(xiàn)：①將JS代碼寫在body之后；②將代碼寫到window.onload函數(shù)之中；
   >>>后面三個getElements，取到的是數(shù)組格式。不能直接添加各種屬性，而應(yīng)該取出數(shù)組的每一個單獨(dú)操作。
例如：

getElementsByName('name1')[0].onclick = function;

2.2找到樹枝摘果子——查看設(shè)置屬性節(jié)點(diǎn)

接下來，小編就要介紹一下怎么摘果子了！激不激動！

首先，還記得小編提醒了三遍的事情嗎？

查看和設(shè)置屬性節(jié)點(diǎn)，必須先取到元素節(jié)點(diǎn)，才能使用；

1、查看屬性節(jié)點(diǎn)：getAttribute('屬性名')；
2、設(shè)置屬性節(jié)點(diǎn)：setAttribute('屬性名','新屬性值');

var btn1 = document.getElementById('btn1');            
var classes = btn1.getAttribute('class“）；
 btn1.setAttribute('class','btn1');
console.log(classes);

小編提示：
   >>>setAttribute();函數(shù)在IE瀏覽器中可能會存在兼容性問題。比如在IE 中不支持試用這個函數(shù)設(shè)置style/onclick
   等樣式屬性和事件屬性。

   >>>我們推薦使用符號法替代上述函數(shù)：
eg:dom1.style.color='' dom1.onclick='' dom1.src=''

   【總結(jié)-js修改DOM節(jié)點(diǎn)的樣式】
   1、使用setAttribute()設(shè)置class和style屬性，但是存在兼容性問題，不提倡；

 div.setAttribute('class','cls1');

2、使用.className直接設(shè)置class類，注意是className而不是.class:

  div.className = 'cls1';

   3、使用.style設(shè)置單個屬性，注意屬性名要用駝峰命名法：
   div.style.backgroundColor = 'red';
   4、使用.style或.style.cssText設(shè)置多個樣式屬性：
div.style = 'background-color:red;color:yellow;'
div.style = 'background - color:red;color:yellow' √
   3和4小編就不詳細(xì)介紹了，大家可以襲擊去試試！

2.3查看設(shè)置文本節(jié)點(diǎn)

1、.innerText:取到或設(shè)置節(jié)點(diǎn)里面的文字內(nèi)容;
.innerHTML:取到或設(shè)置節(jié)點(diǎn)里面的HTML代碼；
.tagName:取到當(dāng)前結(jié)點(diǎn)的標(biāo)簽名。標(biāo)簽名全部大寫

var div = document.getElementsByClassName('div');
div[0].style = 'background-color:red;color:yellow;'
//    div[0].innerText = 'hehe';
div[0].innerHTML = '<h2>hehe</h2>';

二、根據(jù)層次查看節(jié)點(diǎn)

上面小編帶大家了解了如何查看元素節(jié)點(diǎn)，下面帶大家了解如何根據(jù)層次查看節(jié)點(diǎn)

3.1根據(jù)層次查看節(jié)點(diǎn)

1、.childNodes:獲取元素的所有子節(jié)點(diǎn)。包括回車和文本節(jié)點(diǎn)。
.children: 獲取當(dāng)前元素的所有元素節(jié)點(diǎn)（只獲取標(biāo)簽）。

舉個例子：

HTML代碼：

<ul id='ul'>
            
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
            
</ul>

JS代碼

window.onload = function  () {
        ul = document.getElementById('ul');
        var li = ul.childNodes;
        var lis = ul.children;
        console.log(li);
        console.log(lis)
    }

結(jié)果：

2、.firstChild:獲取元素的第一個子節(jié)點(diǎn)。包括回車等文本節(jié)點(diǎn)。
.firstElementChild：獲取元素的第一個元素子節(jié)點(diǎn)。不包括回車等文本節(jié)點(diǎn)。

舉個例子：

HTML：請看上面的HTML代碼↑

JS：

window.onload = function  () {
        ul = document.getElementById('ul');
        var li = ul.firstChild;
        var lis = ul.firstElementChild;
        console.log(li);
        console.log(lis)
    }

結(jié)果：

.lastchild:獲取元素的最后一個子節(jié)點(diǎn)。包括回車等文本節(jié)點(diǎn)。
.lastElementChild：獲取元素的最后一個子節(jié)點(diǎn)。不包括回車等文本節(jié)點(diǎn)。

同上栗：

JS：

window.onload = function  () {
        ul = document.getElementById('ul');
        var li = ul.lastChild;
        var lis = ul.lastElementChild;
        console.log(li);
        console.log(lis)
    }

結(jié)果：

3、.parentNode:獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)；

再舉個栗子：

HTML：

<div id='div'>
    <ul id='ul'>
            
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
            
    </ul>
</div>

js:

window.onload = function  () {
        ul = document.getElementById('ul');
        var p = ul.parentNode;
        console.log(p)
    }

結(jié)果：

4、.previousSibling：獲取當(dāng)前節(jié)點(diǎn)的前一個兄弟節(jié)點(diǎn)；包括回車等文本節(jié)點(diǎn)。
.previousElementSibling：獲取當(dāng)前節(jié)點(diǎn)的前一個兄弟元素節(jié)點(diǎn)；不包括回車等文本節(jié)點(diǎn)。

HTML：

<div id='div'>
    <ul id='ul2'></ul>
    <ul id='ul'>
            
            <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
            
    </ul>
</div>

js:

window.onload = function  () {
             ul = document.getElementById('ul');
            var p = ul.previousSibling;
            var ps = ul.previousElementSibling;

            console.log(p);
            console.log(ps);
        }

結(jié)果

5、.nextSibling：獲取當(dāng)前節(jié)點(diǎn)的后一個兄弟節(jié)點(diǎn)；包括回車等文本節(jié)點(diǎn)。
.nextElementSibling：獲取當(dāng)前節(jié)點(diǎn)的后一個兄弟元素節(jié)點(diǎn)；不包括回車等文本節(jié)點(diǎn)。
6、.getAttribute:獲得當(dāng)前屬性的元素節(jié)點(diǎn)；
5和6小編就不過多的敘述了，用法和上面的一樣，大家可以試一試

3.2修改節(jié)點(diǎn)

創(chuàng)建并新增節(jié)點(diǎn)
1、document.creatElement('標(biāo)簽名'):創(chuàng)建節(jié)點(diǎn)。需要配合setAttribute設(shè)置各種新的屬性；

　2、父節(jié)點(diǎn).appendChild(新節(jié)點(diǎn))：末尾追加方式插入節(jié)點(diǎn)
3、父節(jié)點(diǎn).insertBefore(新節(jié)點(diǎn)，目標(biāo)節(jié)點(diǎn))：在目標(biāo)節(jié)點(diǎn)前插入新節(jié)點(diǎn)。

舉例：

<body>
<button onclick='addImg()'>點(diǎn)擊添加圖片</button>
</body>
<script type='text/javascript'>
        function addImg () {
                
                
                var img = document.createElement('img');
                img.setAttribute('src','../../img/557833.jpg');
    //            document.body.appendChild(img);
                img.style.height = '100px';
                img.style.width = '100px';
                
                var ul = document.getElementById('ul');
                document.body.insertBefore(img,ul);
            }
</script>

結(jié)果：

4、cloneNode(true/false):克隆節(jié)點(diǎn)
>>>傳入true：表示克隆當(dāng)前節(jié)點(diǎn)，以及當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)；
>>>傳入false：表示只克隆當(dāng)前節(jié)點(diǎn)，不克隆當(dāng)前節(jié)點(diǎn)的子節(jié)點(diǎn)；

再舉個例子：

<body>
        <button onclick='cloneUl()'>點(diǎn)擊復(fù)制圖片</button><br />
</body>
<script type='text/javascript'>
       function cloneUl () {
                var ul = document.getElementById('img');
                var ulClone = ul.cloneNode(true);
                document.body.insertBefore(ulClone,ul);
    //            document.body.appendChild(ulClone);
            }</script>

結(jié)果：

四、表格元素

最后，小編帶大家看一下表格元素的查看增添與修改

【表格對象】

1、rows屬性：返回表格中的所有行，是一個數(shù)組格式；
2、insertRow(index):在指定位置插入一行，index從0開始；
3、deleteRow(index):刪除指定的一行，index從0開始；
【行對象】
1、cells屬性：返回這一行中的所有單元格，是一個數(shù)組格式；
2、rowIndex屬性：返回這一行，是表格中的第幾行，從0開始；
3、insertCell(index):在這一行的指定位置，插入一個單元格，index從領(lǐng)開始；
4、deleteCell(index):刪除這一行的指定單元格，index從0開始
【單元格對象】
1、cellIndex屬性：返回這個單元格是這一行的第幾個單元格
2、innerText inner HTML

舉例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title></title>
        
        <style type='text/css'>
            table{
                width: 400px;
                border-collapse: collapse;
            }
            td,th{
                border: solid 1px black;
            }
            tr:last-of-type{
                color: red;
            }
            tr:frst-of-type{
                background-color: #565656;
            }
        </style>
    </head>
    <body>
        
        <table id='table'>
            <tr>
                <th>書名</th>
                <th>價格</th>
            </tr>
            <tr>
                <td>幸福從天而降</td>
                <td>18.5</td>
            </tr>
            <tr>
                <td>活在當(dāng)下</td>
                <td>45.5元</td>
            </tr>
            <tr>
                <td>人性的弱點(diǎn)</td>
                <td>65.5元</td>
            </tr>
            <tr>
                <td>60個瞬間</td>
                <td>88.0元</td>
            </tr>
            <tr>
                <td>合計(jì)</td>
                <td>100元</td>
            </tr>
        </table>
        <br />
        <button onclick='addRow()'>增加一行</button>
        <button onclick='delRow()'>刪除最后一行</button>
        <button onclick='copyRow()'>復(fù)制最后一行</button>
        <button onclick='changeStyle()'>修改標(biāo)題樣式</button>
        <button onclick='getSum'>求和</button>
    
        <script type='text/javascript'>

            
            var table = document.getElementById('table');
            
            function addRow () {
                var index = table.rows.length-1;
                var newRow = table.insertRow(index);
                
                var name = prompt('請輸入書名');
                var cell0 = newRow.insertCell(0);
                cell0.innerText = name;
                
                var money = parseFloat(prompt('價格'));
                var cell1 = newRow.insertCell(1);
                cell1.innerText = money.toFixed(1)+'元';
            }
            
            function delRow () {
                if (table.rows.length>2) {
                    table.deleteRow(table.rows.length-2);
                } else{
                    alert('沒有了');
                }
            }
            
            function copyRow () {


                var cloneRow = table.rows[table.rows.length-2];
                
                if (table.rows.length>2) {
                    var newRow = table.insertRow(table.rows.length-1);
                    var cell0 = newRow.insertCell(0);
                    cell0.innerText = cloneRow.cells[0].innerText;
                    
                    var cell1 = newRow.insertCell(1);
                    cell1.innerText = cloneRow.cells[1].innerText;
                    
                } else{
                    alert('沒有可復(fù)制的行了?。?/span>');
                }
            }
            
            
            function changeStyle () {
                var color = prompt('請輸入十六進(jìn)制顏色值');
                table.rows[0].style = 'background-color:'+color;

                
            }
            
            
            function getSum () {
                var rows = table.rows;
                if (rows.length<=2) {
                    alert('沒有可以計(jì)算的和');
                    rows[rows.length-1].cells[1].innerText = '0元';
                    return;
                } else{
                    var sum = 0;
                    for (var i = 1; i<rows.length-1; i++) {
                        var cells = rows[i].cells;
                        sum += parseFloat(cells[cells.length-1].innerText);
                    }
                    
                    rows[rows.length-1].cells[1].innerText = sum + '元';
                }
            }
            
            window.onload = function  () {
                getSum();
            }
        </script>
    </body>
</html>

結(jié)果：

編者按

小是個新手，明白前端的學(xué)習(xí)沒有捷徑，這次小編就先講到這，謝謝大家??！

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：家有仙妻寶寶 > 《按鍵精靈》

舉報/認(rèn)領(lǐng)