JavaScript语法学习.-2018-03-08
JavaScript语法学习.
学习目标:
- 掌握API和webAPI的概念(了解)
- 账户常见浏览器提供的API调用方式(了解)
- 能通过WebAPI开发常见的页面交互功能(重要)
- 能够利用搜索引擎解决问题(重要)
一. WebAPI介绍
1. API的概念
API(Application programming Interface)是一些预先定义的函数.
目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力.而又无需访问源码,或理解内部工作机制的细节.
- 任何程序设计语言都有自己的API
- API的特征是输入和输入(I/O)
- var maxNum = Math.max(10,20);
- API的使用方法,通常是函数调用的方式.
2. WebAPI的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的WebAPI特指浏览器提供的API(一组方法的集合).
WebAPI在后续的学习中我们将会理解它的更多含义.
3. 掌握常见的浏览器提供的API调用方式
4. JavaScript的组成
JavaScript的组成
-
ECMAScript - JavaScript的核心
定义了JavaScript的语法规范
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关.
-
BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口,比如:弹出框,控制浏览器跳转\获取分辨率等.
-
DOM - 文档对象模型
一套操作页面元素的API
�DOM可以把HTML看做是文档树.通过DOM提供的API可以对树上的节点进行操作.
二. DOM
1. DOM的概念
文档对象模型(Document Object Model, 简称DOM) , 是W3C组织推荐的处理可扩展标记语言的标准编程接口 .
它是一种与平台和语言无关的应用程序接口(API),它可以动态的访问程序和脚本,
更新其内容,接口和www文档的风格(目前,HTML和XML文档是通过说明部分定义的).文档可以进一步被处理,处理结果可以加入到当前页面.
DOM是基于树的API文档,它要求在处理过程中整个文档都表示在存储器中.
DOM又称为文档树模型
文档树模型
- 文档: 一个网页可以称为文档.
- 节点: 网页中所有的内容都是节点(标签,属性,文本,注释等).
- 元素: 网页中的标签称为元素.
2. DOM经常进行的操作
- 获取元素
- 对元素进行操作(设置属性或调用方法)
- 动态创建元素
- 时间(交互式作出相应动作)
三. 获取页面元素
1. 为什么要获取页面元素
例如: 我们要操作页面上的某个部分作出一些改变(显示/隐藏,动画),需要先获取到该部分对应的元素,才能进行后续的操作.
2. 根据id获取元素
主要代码:
//使用id获取元素
var div = document.getElementById("box");
完整html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02获取元素id</title>
</head>
<body>
<div id="aaa">111</div>
<div id="box">world</div>
<div id="cast">Header</div>
<script>
var div = document.getElementById("box");
//输出元素对应的标签
// console.log(div);
//打印元素对象
console.dir(div);
var arr = [];
//Array[]数据类型的join函数并不会增加list大小.
// arr.join([1]);
// arr.join(2);
//使用push方法向list里面添加元素.相应的pop方法是弹出元素.
// arr.push(1,2,3,4,5,65);
// console.log(arr);
// 怎么获取对象的类型? 对象都是有类型的
// //打印数据类型. 这些变量的数据类型都是Object
// console.log(typeof arr);
// console.log(typeof div);
//可以认为构造函数就是对象的类型,其实是不一样的概念.
//Array()
// console.log(arr.constructor);
//HTMLDivElement()
// console.log(div.constructor);
</script>
</body>
</html>
完整代码输出的效果:
根据id获取页面元素,查看对象类型
3. 根据标签名获取元素
核心代码:
//使用标签名获取元素
var divs = document.getElementsByTagName("div");
//打印获取到的元素集合Collection
console.log(divs)
完整html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03根据标签名获取元素</title>
</head>
<body>
<div id="aaa">111</div>
<div id="box">world</div>
<div id="cast">Header</div>
<script>
//使用标签名获取元素
var divs = document.getElementsByTagName("div");
//打印获取到的元素集合Collection
console.log(divs)
</script>
</body>
</html>
根据标签名获取元素
可以看出,最后的proto:指出了我们获取到了一个集合,这里面装了三个div元素对象.
4. 根据name获取元素
核心代码:
//radios数据类型是NodeList
var radios = document.getElementsByName("sex");
console.log(radios)
完整html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04根据name属性获取元素</title>
</head>
<body>
<form id="form" action="1.php">
<input type="text" name="name"><br>
<input type="text" name="pwd"><br>
<input type="radio" name="sex" value="man">
<input type="radio" name="sex" value="female">
<input type="submit" value="login">
</form>
<script>
// var frm = document.getElementById("form");
//这里获取到的是表单中的所有input标签
// frm.getElementsByTagName("input")
//radios数据类型是NodeList
var radios = document.getElementsByName("sex");
console.log(radios)
</script>
</body>
</html>
根据name获取元素的结果
