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

新博文微信同步推送，还附有讲解视频哦~视频

也可直接扫描下方二维码关注。