JavaScript零基础入门——（十一）JavaScript的DOM操作

最新推荐文章于 2024-06-20 20:20:21 发布

weixin_33788244

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量55

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/JandenMa/blog/1834887

版权

2019独角兽企业重金招聘Python工程师标准>>>

JavaScript零基础入门——（十一）JavaScript的DOM操作

大家好，欢迎回到我们的JavaScript零基础入门。最近有些同学问我说，我讲的的比书上的精简不少。其实呢，我主要讲的是我在开发中经常会用到或者容易入坑的东西，如果有同学想深入的学习，有机会我考虑讲一下进阶课，当然如果等不及了，可以买些书看下。好了，回到正题。上一节课，我们介绍了DOM基础，那么这一节课，我们接着上一节课，来讲一讲JavaScript的DOM操作。

一般来说，我们常用的DOM操作，主要是创建、删除和插入三种，我们分别来说一下。

首先来说说DOM的创建，我们通常用createElement()来创建元素节点，这个方法接收一个参数，就是tagName，用来告诉文档你要创建的是什么标签；当然这仅仅只是创建，想要在文档中出现，还要追加或者插入到文档里。

通常情况下，新节点我们会使用插入或者在父节点下追加的方式使得其在文档中体现出来。插入节点，即insertBefore(节点, 原节点)，可以在原节点前插入新节点。而在父节点下追加节点，即appendChild()，它接收一个参数，就是要插入的节点。这里要说明一点，如果把父节点下的一个子节点再追加到父节点下时，会先移除原节点再追加。有加就一定有减，js也提供了删除DOM节点的方法removeChild，接收参数是要删除的节点。

除了DOM节点的增删之外，还有一个比较重要的DOM操作，那就是table操作。

在table中，有几个重要的属性有助于我们操作table，我们来看看：

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的定时器。

如果想跟着振丹继续学习，可以微信关注【振丹敲代码】（微信号：JandenCoding）

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

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