专栏首页零基础自学Java【JavaWeb】83:js不能算是一门编程语言?

【JavaWeb】83:js不能算是一门编程语言?

前天刚开始接触JavaScript的时候,心中就一直有一个疑问:

后台编程语言之间互相争论不断,为何一提到前端基本都会想到JS?

因为才刚开始学js,所以很多话不敢说的太绝对,就加上了“基本,大概,可能”这样的形容词。

毕竟话说的太绝对容易被吐槽,谁知道竟然还是被吐槽了:

纳尼?js连编程语言都不算了?

我只是尽可能不把话说的太绝对,可能js并不是前端公认的语言,但没想到连编程语言都不算了?

这是我万万没有想到的。

在这一刻我的内心产生了动摇,我突然想到了那张编程语言排行榜的图片。

前段时间c语言排名超过Java,导致经常性地能看到,我明明在这张表中看到了JavaScript。

莫非这不能算是编程语言排行榜?

于是我又网上查了下,查询到的结果都是说js是一门编程语言。

现在结果就显而易见了,说js不是编程语言就好比说前端不是程序员一样,带有很浓的个人主义色彩,当个笑话即可。

嘛,不管如何,js还是很重要的,话不多说,继续学习:今天是刘小爱自学Java的第83天:

昨天学习了BOM编程,今天学DOM编程。

DOM,全称Document Object Model,即文档对象模型,具体什么意思呢?

还是一样的学习方法,先学习其对应的知识点,再理解其概念。

一、DOM编程

1根据标签名获取元素

①页面加载事件

因为script标签在body标签前面,而页面加载又是从上到下的。

如果在script标签想获取body标签中的内容,需要先触发页面加载事件。

②点击事件

要达到的效果为,点击按钮会给a便签添加相应的地址。

这里使用的的匿名函数注册方式触发点击事件。

③getElementsByTagName()

根据标签名获取元素,因为页面中a标签有3个,所以使用该方法获取的是一个数组。

再将数组遍历,逐一给href属性赋值。

注意:如果相同标签的数量有多个,其返回值为数组,一开始完全就给忽视了。

代码写完,做一个测试:

点一下按钮,触发点击上事件,a标签添加了一个超链接,颜色从黑变成了紫,

再点下,会跳转超链接对应的页面

2根据name获取元素

标签基本都会有一个name属性,根据name属性获取对应的元素:

有三个div标签,但是name为"myDiv"的只有两个,我们只需要对应name的标签。

所以不能getElementsByTagName()方法,而是getElementsByName();

这样的话第三个div标签就不会对它有影响,

做一个测试:

可以通过name属性给对应的标签赋值。

3根据类名获取元素

getElementsByClassName(),这个方法的思路就跟name是一样的。

只不过一个是标签里的name属性,一个是标签里的class属性。

二、如何理解DOM?

上述的3中方法便是对DOM编程的一个初步说明,当然肯定不会就只有这3种。

但这几种比较常见,并且很具有代表性。

先看一个HTML,其具体内容不用细看:

上述代码也就是一个文档,DOM模型是使用一个DOM树来表示文档的。

  • DOM树的根节点为html标签。
  • html标签有两个子标签(子节点):head标签,body标签。
  • body标签也有两个子标签(子节点):a标签,table标签。
  • 子节点又有子节点,这样就形成了一个树形结构。
  • 其中每个节点都包含着对象(objects)。

树形结构图如下:

当然图我并没有画完全,但大致就是这么一个树形的结构。

并且我举这个例子中文档内容也比较简单,一共也就那么几行代码,实际情况肯定要复杂的多。

DOM编程就是可以用特定方式操作这个树,从而可以改变文档的结构、样式或者内容。

其中就包括最先说明的那三种方法:根据标签名,根据id名,根据类名……等等。

三、js操作CSS

CSS可以设定标签的样式,是怎么操作的?

①CSS设定样式

这里使用的是id选择器,可以设定对应id的标签样式。

颜色color:红。

字体font-family:微软雅黑。

字体大小font-size:50px。

除了这种设定标签的样式外,现在还可以通过js代码去动态修改标签的样式。

代码编写如下:

②js设定样式

根据id获取对应的元素。

在html中每一个标签都会有一个属性叫style,所以设置其style即可。

值得注意的是:fontFamily相当于CSS中的font-family,采用的是小驼峰命名规则。

其中如果用css和js同时操作同一标签,会以js设定的为主。

这也好理解,css相当于给标签格式初始化,而js就相当于修改标签格式。

当然这还不能看出js的使用特殊之处,我们再看一个案例:

①CSS设定格式

CSS根据类选择器设定样式,类为myClass。

但是要注意,HTML中本身并没有myClass类的标签。

②js操作CSS

js厉害的地方在于它可以设定和修改标签的类名。根据需求,js可以让同一标签:

  • 设定类名为a时,对应一种CSS样式。
  • 设定类名为b时,又对应另一种CSS样式

从而达到同一标签样式可以根据需求不停地切换。

最后

谢谢你的观看。

本文分享自微信公众号 - 刘小爱(liuxiaoai946),作者:刘小爱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaWeb】76:html各种标签

    下面编写代码,其中我每行之间用了两个换行符(<br/><br/>),为了使页面看起来相对而言更加美观些。

    刘小爱
  • 【JavaWeb】75:写一个登录案例

    关于数据库这一块暂时也告一段落了,其中后续会做一个思维导图的总结。想把数据库完全学清楚,几天的学习肯定是远远不够的。毕竟要知道数据库在大学可是一门课,要花一整学...

    刘小爱
  • 【JavaWeb】86:jQuery的属性、文档、动画以及事件

    昨天学习了jQuery中的选择器,有一些还没有学完全,只能说等到以后遇到了再查文档了。

    刘小爱
  • 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • HTML标签

    HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行...

    星辰_大海
  • 用户画像标签平台技术

    1.灵活可扩展的标签创建规则或者人群分群规则: 我们需要有非常灵活可扩展的标签的规则定义和分组分群。

    平常心
  • HTML5标签

    HTML5新增了27个标签,废除了16个标签,依据现有的标准规范,按照优先等级将其定义为结构性标签、级块性标签、行内语义性标签、交互性标签4大类。下面一起来看一...

    申霖
  • 001.html常用的基础知识点

    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

    qubianzhong
  • web前端基础

    代码示例:跳转到https://www.acai.cloud地址时用浏览器空白标签页打开

    慕容峻才
  • 互联网进入标签时代

    最近有三个产品的改版引起了我的注意:一个是网易跟帖上线了标签功能,用户可以给其他跟帖用户打上特定标签,看上去是为了提升互动性和实现用户自运营;第二是百度图片搜索...

    罗超频道

扫码关注云+社区

领取腾讯云代金券