JavaScript零基礎入門——（十一）JavaScript的DOM操做

時間 2019-11-05

標籤 javascript 零基礎入門十一 dom 欄目 JavaScript 简体版

原文原文鏈接

JavaScript零基礎入門——（十一）JavaScript的DOM操做

你們好，歡迎回到咱們的JavaScript零基礎入門。最近有些同窗問我說，我講的的比書上的精簡很多。其實呢，我主要講的是我在開發中常常會用到或者容易入坑的東西，若是有同窗想深刻的學習，有機會我考慮講一下進階課，固然若是等不及了，能夠買些書看下。好了，回到正題。上一節課，咱們介紹了DOM基礎，那麼這一節課，咱們接着上一節課，來說一講JavaScript的DOM操做。javascript

通常來講，咱們經常使用的DOM操做，主要是建立、刪除和插入三種，咱們分別來講一下。css

首先來講說DOM的建立，咱們一般用createElement()來建立元素節點，這個方法接收一個參數，就是tagName，用來告訴文檔你要建立的是什麼標籤；固然這僅僅只是建立，想要在文檔中出現，還要追加或者插入到文檔裏。html

一般狀況下，新節點咱們會使用插入或者在父節點下追加的方式使得其在文檔中體現出來。插入節點，即insertBefore(節點, 原節點)，能夠在原節點前插入新節點。而在父節點下追加節點，即appendChild()，它接收一個參數，就是要插入的節點。這裏要說明一點，若是把父節點下的一個子節點再追加到父節點下時，會先移除原節點再追加。有加就必定有減，js也提供了刪除DOM節點的方法removeChild，接收參數是要刪除的節點。java

除了DOM節點的增刪以外，還有一個比較重要的DOM操做，那就是table操做。微信

在table中，有幾個重要的屬性有助於咱們操做table，咱們來看看：app

tBodies——獲取table表身，等價於getElementsByTagName("tbody");
rows——獲取table行，等價於getElementsByTagName("tr");
cells——獲取table列，等價於getElementsByTagName("td");
tHead——獲取table表頭，等價於getElementsByTagName("thead");

有了這些屬性，咱們就能夠快速定位和處理指定單元格的值，好比下面的代碼：學習

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">

    </style>
</head>

<body>
    <table id="tb1" border="" cellspacing="" cellpadding="">
        <thead>
            <tr>
                <th>Header1</th>
                <th>Header2</th>
                <th>Header3</th>
                <th>Header4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1</td>
                <td>1.2</td>
                <td>1.3</td>
                <td>1.4</td>
            </tr>
            <tr>
                <td>2.1</td>
                <td>2.2</td>
                <td>2.3</td>
                <td>2.4</td>
            </tr>
            <tr>
                <td>3.1</td>
                <td>3.2</td>
                <td>3.3</td>
                <td>3.4</td>
            </tr>
            <tr>
                <td>4.1</td>
                <td>4.2</td>
                <td>4.3</td>
                <td>4.4</td>
            </tr>
        </tbody>
    </table>
</body>
<script type="text/javascript">
    var tb = document.getElementById('tb1');
    alert(tb.tBodies[0].rows[0].cells[0].innerHTML);//1.1
</script>

</html>

好了，這節課補充講了有關DOM操做的相關知識點，內容很少，你們消化一下，本身敲一敲。下節課咱們來說一講JavaScript的定時器。spa

若是想跟着振丹繼續學習，能夠微信關注【振丹敲代碼】（微信號：JandenCoding）code

新博文微信同步推送，還附有講解視頻哦~視頻

也可直接掃描下方二維碼關注。