文档章节

JavaScript零基础入门——(十一)JavaScript的DOM操作

JandenMa
 JandenMa
发布于 06/25 00:53
字数 875
阅读 11
收藏 1

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)

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

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

© 著作权归作者所有

共有 人打赏支持
JandenMa
粉丝 11
博文 28
码字总数 27794
作品 0
汕头
JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa
06/23
0
0
JavaScript零基础入门——(十二)JavaScript的定时器

JavaScript零基础入门——(十二)JavaScript的定时器 大家好,欢迎回到我们的JavaScript零基础入门。上一节课我们讲了JavaScript中一些常用的DOM操作,这里要补充一个点,上节课讲的table几...

JandenMa
06/27
0
0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
07/20
0
0
jQuery零基础入门——(二)Selector选择器

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎回到我们的jQuery零基础...

JandenMa
07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
23分钟前
0
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
5
2
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
1
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
1
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部