文档章节

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

JandenMa
 JandenMa
发布于 06/25 00:53
字数 875
阅读 15
收藏 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
粉丝 14
博文 28
码字总数 27794
作品 0
汕头
私信 提问
JavaScript零基础入门——(十)JavaScript的DOM基础

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

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

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

阿小庆
06/14
0
0
JavaScript零基础入门——(十二)JavaScript的定时器

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

JandenMa
06/27
0
0
jQuery零基础入门——(六)修改DOM结构

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

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

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

JandenMa
07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 教程:在 Confluence 中导航

当你对 Confluence 有所了解后,你会发现 Confluence 使用起来非常简单。这个教程主要是针对你使用的 Confluence 界面进行一些说明,同时向你展示在那里可以进行一些通用的任务和操作。 空间...

honeymose
今天
2
0
sed, awk 练习

1. sed打印某行到某行之间的内容 2. sed 转换大小写 将单词首字母转化大写 将所有小写转化大写 3. sed 在某一行最后面添加一个数字 4. 删除某行到最后一行 解析: {:a;N;$!ba;d} :a : 是...

Fc丶
今天
2
0
babel6升级到7,jest-babel报错:Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

自从将前端环境更新到babel7,jest-babel之前是基于babel6的,执行时候就会报:Requires Babel "^7.0.0-0", but was loaded with "6.26.3". 很烦,因为连续帮好几台电脑修复这个问题,所以记...

曾建凯
今天
1
0
探索802.11ax

802.11ax承诺在真实条件下改善峰值性能和最差情况。 如何改善今天的Wi-Fi? 在决定如何改进当前版本以外的Wi-Fi时,802.11ac,IEEE和Wi-Fi联盟调查了Wi-Fi部署和行为,以确定更广泛使用的障碍...

linuxprobe16
今天
2
0
使用linux将64G的SDCARD格式化为FAT32

一、命令如下: sudo fdisk -lsudo mkfs.vfat /dev/sda -Isudo fdisk /dev/sda Welcome to fdisk (util-linux 2.29.2). Changes will remain in memory only, until you decide to wri......

mbzhong
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部