JavaScript & DOM（二十三）

最新推荐文章于 2024-04-02 20:25:59 发布
最新推荐文章于 2024-04-02 20:25:59 发布
阅读量375 收藏
点赞数
分类专栏： 前端 文章标签： JavaScript DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddx199806301760/article/details/99685753
版权
本文详细介绍了JavaScript的基本语法，包括数据类型、运算符、流程控制和函数。重点讲解了DOM对象，解释了DOM是什么，提供了访问和操作HTML元素的方法，如getElementById、getElementsByTagName等，并展示了如何进行元素的创建、添加、移除等操作。
摘要由CSDN通过智能技术生成

一. JavaScript基本语法

JavaScript的组成部分：

  • ECMAScript：描述了JS的语法和基本对象

  • 文档对象模型（DOM）：描述与处理网页内容的方法和接口。

  • 浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。

JavaScript的日常用途

  1. 嵌入动态文本于HTML页面。

  2. 对浏览器事件做出响应。

  3. 读写HTML元素

  4. 在数据被提交到服务器之前验证数据。

  5. 检测访客的浏览器信息。

  6. 控制cookies，包括创建和修改等。

  7. 基于Node.js技术进行服务器端编程。

JavaScript的引入

在HTML文件中引入JavaScript有两种方式

  • 一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式

  • 另一种是链接外部JavaScript脚本文件，称为外联式。

内嵌式，在HTML文档中，通过<script>标签引入，如下

<script type="text/javascript">
	//此处为JavaScript代码
</script>

外联式，在HTML文档中，通过<script src="">标签引入.js文件，如下： 

<script src="1.js" type="text/javascript" ></script>

注意：如果在script标签,使用src引入了一个文件，那么当前js标签内的代码全部作废 ,不运行 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 内嵌式 -->
		<script type="text/javascript">
			alert("内嵌式");
		</script>
		<!-- 外联式 -->
		<script type="text/javascript" src="js/1.js">
			<!-- 由于script标签引入了src， 所以，当前script标签中的代码不执行，全部作废 -->
			alert("测试");
		</script>
		
	</body>
</html>

基本语法

JS的语法规则：

  • JS严格区分大小写

  • 语句需要使用分号结尾

  • JS中的命名规则， 按照Java的标识符

  • JS中的关键字不能用来命名使用， 如 function

  • 变量

    JS是弱类型语言，Java是强制类型语言

    弱类型，并不是没有数据类型，而是定义变量时不需要明确类型。

  • JS变量定义，关键字var； 格式：var 变量名 = 值;

<script type="text/javascript">
    var num = 100;
    alert(num);

    num = "东叔";
    alert(num);

    num = 3.14;
    alert(num);

    // 定义变量, 不指定值
    var num2;
    alert(num2);	
</script>

JS的数据类型

  • 数字类型 number: 表示任意数字

  • 布尔类型 boolean: 有两个值 true 和 false 字符串类型 string: 字符串由双引号（"）或单引号（'）声明的。JavaScript 没有字符类型

  • 引用类型 object: 表示JS中的引用类型

    • 空值 Null ,只有一个专用值 null，表示空，属于object类型。

    • 值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

  • 未初始化 undefined: 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

写程序, 使用JS关键字 typeof(变量) 显示出变量的类型

代码演示:

<script type="text/javascript">
    var num = 123;
    alert( typeof(num) ); //number

    var b = true;
    alert( typeof(b) ); //boolean

    var str = "hello";
    alert( typeof(str) ); //string

    var date = new Date(); 
    alert( typeof(date) ); //object

    var n = null;
    alert( typeof(n)); // objcet

    var u;
    alert( typeof(u)); //undefined


    // 值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
    alert(undefined == null); // true
</script>

JS的三种输出方式

  • window.alert(”)，弹框效果，window可省略。弹出比较突然，用户的体验不好，基本用来测试代码使用

<script type="text/javascript"> 
    /*
     * window.alert()  把小括号里的内容，以弹窗的方式显示出来
     * window是BOM对象，指的是整个浏览器，可以省略不写
     */
    window.alert('浏览器弹框显示');
    alert("浏览器弹框显示");
</script>
  • console系列，会在控制台（一般使用F12键打开）输出内容，开发时会经常使用 
<script>
    console.log('控制台.日志()');
    console.warn('控制台.警告()');
    console.error('控制台.错误()');
</script>
  • document.write()，直接在页面上输出内容 
<script>
    /*
     * document 指的是我们所写的HTML文档
     * write() 把小括号里的内容输出到页面上
     */
    document.write('页面显示内容');
</script>

运算符

算术运算符 | 赋值运算符 | 比较运算符 | 逻辑运算符

JavaScript运算符与Java运算符基本一致。

  • 算术运算符：+ ，- ，* ，/ ，% ，++ ，--

  • 赋值运算符：= ，&#

最低0.47元/天 解锁文章
爱学习的东叔
关注
专栏目录
getElementsByClassName() 定义与用法
LdleFlsh的博客
06-15 9491
getElementsByClassName() 方法 定义和使用 getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。 NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。 提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。 浏览器支持 谷歌4.0 ie浏览器9.0 ..
js中使用getElementsByClassName获取class对象
实际工作与学习当中的随记
08-09 6643
前端开发一般不需要过多考虑性能问题，但你想在性能上追求极致的话，一定要知道jQuery性能很差。所以js之前没做getElementByClassName也是出于严谨的考虑，现在document.getElementsByClassName返回数组应该也是出于严谨的考虑。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。......
JavaScript-DOM（获取元素节点、自定义byClassName方法）
weixin_46048542的博客
02-07 1185
DOM: document object model(文档对象模型) 节点类型： 元素节点 <div></div> 属性节点 id = 'div1' 文本节点 div文本 元素节点的获取 document.getElementById(id) 功能：通过id获取符合条件的元素（id必须是唯一的） 返回值：就是符合条件的一个节点 <!DOCTYPE htm
源生javascript 添加getElementByClass方法
weixin_33928137的博客
06-28 546
直接上代码： document.getElementByClass = function(n) { var el = [], _el = document.getElementsByTagName('*'); for (var i=0; i<_el.length; i++ ) { ...
document.getElementByclassName（）方法
Java&Develop的博客
08-02 1050
document.getElementByclassName（）方法;使用指定的calss属性值返回相关元素的集合(节点列表)
JavaScript & DOM Enlightenment
11-30
JavaScript和DOM Enlightenment是关于Web开发中的核心技术的深入学习资源，主要涵盖了JavaScript编程语言以及文档对象模型（Document Object Model）的应用。这两个概念对于任何希望成为前端开发者的人来说都是至关...
JavaScript_DOM编程艺术第二版（中文）
03-12
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM（Document Object Model）交互的权威书籍，主要面向希望提升JavaScript客户端开发技能的程序员。DOM是Web页面的结构化表示，JavaScript通过DOM API可以...
javascript&&dom葵花宝典
04-16
《JavaScript与DOM编程葵花宝典》是一本深入解析JavaScript语言和DOM操作的参考资料，旨在帮助编程人员在软件开发中更高效地运用这些技术。JavaScript作为网页动态化的基础，是前端开发不可或缺的一部分，而DOM...
Javascript & DHTML DOM基础和基本API第1/5页
10-30
二、DOM与JavaScript的关系 JavaScript与DOM紧密相连，因为DOM提供了JavaScript操作页面内容的接口。通过这些API，JavaScript可以创建、删除、修改或者遍历DOM树中的任何节点。比如，`getElementById`方法允许我们...
javascript实现document.getElementByClass的方法
ty19921009的博客
09-01 1万+
function getElementsByClassName (className) { var all = document.all ? document.all : document.getElementsByTagName( ' *' ); var elements = new Array(); for ( var e = 0; e < all.length; e ++ ) { if (a
JS中获取元素的方法
weixin_43765641的博客
09-11 5149
2、document.getElment.querySelectorAll('选择器') 获取拥有此选择器的元素，获取的是一个数组。1、document.getElement.querySelector('选择器') 获取该选择器的第一个元素。2、不只是通过document对象获取元素，也可以通过父元素获取子元素。document.getElementsByClassName('class名')document.getElementByid('id名')注意：1、获取多个元素的，获取到的都是数组。
getElementbyclassName错误
docwangsir的博客
07-12 1852
朋友们 有一个js函数叫做 document.getElementsByClassName 不是document.getElementByClassName 这错我找半天 ，一直看着也没错啊，最后发现他妈的少个s,是元素们，不是元素 ...
Js关于getElmentsByClassName()的兼容与封装
F__Rong的博客
08-01 1441
getElmentsByClassName()的兼容与封装
javascript中获取 DOM 元素的几种方式
夸克IT
12-14 4071
回顾 上一篇中我们初步了解了代码提交的规范，这个规范也是业内相当知名的规范，建议添加到你的项目中熟悉熟悉。有什么不懂得欢迎随时留言~ 在之前我们已经把 JavaScript 基础部分全部学完了，基础部分一共分为了10篇，在10篇的内容中需要记住的东西还是挺多，所以需要你多在编辑器中敲一敲。应用在实际的场景中，纸上得来终觉浅，绝知此事要躬行。 WebApi 从这篇及往后我们要进一步扩展知识面了，来到了 js 中进阶的部分—— WebApi，初来乍到你肯定会问这个 WebApi 是什么？API：顾名思义就是接口
JavaScript 学习笔记（第四天）
weixin_74155781的博客
01-11 1022
DOM (Document object Mode1):文档对象模型其实就是操作html中的标签的一些能力我们可以操作哪些内容获取一个元素移除一个元素创建一个元素向页面里面添加一个元素给元素绑定一些事件获取元素的属性给元素添加一些css样式DOM的核心对象就是docuemnt对象document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法DOM:页面中的标签，我们通过js 获取到以后，就把这个对象叫做DOM对象margin : o;
用getElementsByClassName()和getElementById（）来获取label标签中的值
weixin_44877577的博客
10-23 4123
getElementsByClassName()与getElementById（）区别与联系 区别：getElementsByClassName()获取的是class 里的值，class不具有唯一性，所以一般以数组的方式被获取，getElementById（）获取的是id的值，id 是具有唯一性的。 联系：都可以获取值 getElementById（）这个获取label标签中的值 <!DOCTYPE html> <html> <head> <meta c
JavaScript库，编写$()和getElementsByClassName()方法
最新发布
weixin_59272777的博客
04-02 826
JavaScript库是一组预先编写好的JavaScript代码集合，旨在简化常见的网页开发任务。这些库通常包含了许多函数和方法，可以帮助开发人员处理各种任务，比如DOM操作、事件处理、动画效果、AJAX请求等等。使用JavaScript库可以节省开发时间，并提供了一种标准化的方法来解决常见的编程问题。举个例子，假设你需要在网页中实现一个图片轮播的功能。如果你从头开始编写代码，需要处理图片的切换、定时器的设置、按钮的事件绑定等等，这会耗费大量的时间和精力。
js解决getElementByClassName
热门推荐
alisalearn的博客
09-24 2万+
<!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <script> /*JS写getElementByClassName; 我发现chorm、firefox、ie都支持document.getElementsByClassName */ window.onload = f
DOM基础与API教程：Javascript&DHTML实例解析
二、DOM树 DOM将HTML或XML文档视为一棵树形结构，其中每个节点代表文档的一部分。树的根节点是`document`对象。节点之间的关系包括： 1. **根结点**：整个DOM结构的起点，即`document`对象。 2. **父结点**：一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值