带你学JavaScript(七)

这一讲我们来学习DOM编程(十分重要),有了DOM编程,我们就可以操作任意的HTML元素了。

DOM,文档对象模型

一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容。

浏览器在解析HTML页面的时候,每遇到一个html标签就会创建一个此标签的对象(任何标签都会有一个对应的对象),当解析完成的时候就会创建一个完整的文档树。使用JavaScript寻找标签结点的时候,我们应当在文档树中获取。而文档树的每一个标签对象都称为Node。

我们可以通过如下的方式获取HTML的所有标签对象:

找结点的方法

想要找HTML标签共有两种方法。

1. 通过标签属性找标签

这种方法的几种寻找方式如下:

练习:实现选择部分商品或者全选商品,并且对选择的商品进行总金额的计算。

下面的代码实际上就是对复选框进行一些列的操作,实现我们平时所看见的全选或者不选的功能,以及最后实现计算总价的功能,仅此而已,没有我们想象的那么复杂。下面直接贴代码。

2. 通过关系找标签

学过数据结构与算法的同学会感到非常的亲切。。。。

这里我就默认大家都学过了数据结构与算法,如果你没学过最好马上就学了,因为这部分的用途十分广大。我们这里讲的虽然不是数据结构与算法,但是能够帮助你理解节点之间的关系还是非常有用处的。

父子关系:一个标签可以有多个子标签,一个子标签只能有一个父标签,下面这些只是值,后面没有括号。

还有一点内容,虽然一般情况下,我们会将标签写在外面,但是执行的时候,***浏览器会自动将标签挪入标签中, ***并且在处理文档的过程中,会将HTML代码中的空文本和注释也当成节点。

那么,我们现在只想要标签对象,如何处理呢?

实际上,节点还有一个nodeType的属性,标签对象的nodeType均为1,在得到所有的节点之后判断一下这个属性就可以了;还有另外一种处理方式,不常用,就不介绍了。

上面的这些内容相当于一个节点的属性,直接用"."调用即可

创建与插入节点、设置节点的属性

用到的方法如下:

应用如下:

应用这种方法,就可以添加一个按钮了。

应用如下:添加或者删除附件的功能。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180429G0VIJY00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券