js►webAPI

1.WebApi基本概念、DOM获取元素&注册事件

WebApi基本概念

API（Application Programming Interface,应用程序编程接口）,API是一些预先定义的方法，这些方法能够实现某些特定的功能。

  • 任何开发语言都会提供自己的API

  • API的特征输入和输出(参数/返回值)

ECMAScript - JavaScript的核心

定义了JavaScript 的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准。与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM-文档对象模型

DOM基本概念

DOM（Document Object Model）文档对象模型，是W3C组织推荐的一套用于处理HTML的标准编程接口。

DOM又称为文档树模型，因为整个HTML文档是一个树形的结构

DOM中常见的概念

  • 文档document：一个网页可以称为文档
  • 节点node：网页中的所有内容都是节点（标签、属性、文本、注释等）
  • 元素element：网页中的标签

DOM初体验

document.getElementById("box")的作用是根据页面中元素的id来获取元素

在DOM中，想要操作一个元素，首先需要先获取到这个元素才能进行操作。

1
2
3
4
5
6
//功能：通过id获取元素
//参数：字符串类型的id值
//返回值：元素，如果id不存在，会返回null
var div = document.getElementById('main');

console.dir(div);

关于console.log和console.dir的区别

  • console.log打印一个元素的时候，是以标签的形式进行展示的
  • console.dir打印一个元素的时候，是以对象的形式进行展示的

在DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。

1
2
3
4
5
6
7
8
9
10
11
<!-- html内容 -->
<div title="hehe" id="box">

<script>
// javascript代码
var div = document.getElementById('box');
div.title = "哈哈";
</script>

<!-- 结果：div标签的title属性就发生了更改 -->
<div title="哈哈" id="box">

获取元素

使用getElementById的注意事项

  • 如果id不存在，会返回null
  • 在DOM中，document.getElementById("box")方法需要写在html内容的后面，保证页面加载完成之后才能获取到内容。
  • 部分浏览器，如果元素设置了id属性，可以直接使用（但是不是规范，不推荐）

当getElementById返回null的时候，null.onclick就会报错

1
2
3
4
5
6
7
8
<!--没有id-->
<img src="images/1.jpg" alt="图破了" title="呵呵">

<script>
  // 如果找不到，返回的是null，试图给null设置属性会报错
  var element = document.getElementById("img");
  element.title = "嘿嘿";// 报错Uncaught TypeError: Cannot set property 'title' of null
</script>

mdn地址

getElementsByTagName

通过标签名获取元素

1
2
3
// 参数：标签名
// 返回值：一个伪数组， 伪数组不是数组，不能使用数组的方法，但是可以跟数组一样进行遍历和使用下标进行操作。
var divs = document.getElementsByTagName('div');

注意：返回值有没有获取到元素，都是一个伪数组，即便元素只有一个

缩小查找范围

  1. document.getElemntsByTagName("div")表示获取页面中所有的div元素，范围太大了，可以使用box.getElementsByTagName("div")表示获取box中所有的div元素，范围更小。
  2. document.getElementById("demo")表示获取页面中id为box的元素，没有box.getElementById("demo")这种用法。

注册事件

事件的基本使用

事件：触发-响应机制

事件三要素：

  • 事件源:触发事件的元素
  • 事件名称: click 点击事件
  • 事件处理程序:事件触发后要执行的代码(函数形式)

注册事件的基本语法：

1
2
3
4
5
var box = document.getElementById('box');
// on:当  click:点击   当按钮被点击的时候触发
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

注意：事件处理程序并不是立马执行，而是当事件触发的时候在会执行（浏览器会自动调用）

修改标签的属性

在DOM中，页面标签的属性和DOM对象的属性是一一对应的，因此我们可以通过修改DOM对象的属性来修改标签的属性。

标签的alt，title，src，width，height等属性，可以直接通过对象进行修改。

如果是class属性，在js中class是关键字，因此对应的是className属性

鼠标经过事件与鼠标离开事件

1
2
onmouseover:当鼠标经过时触发
onmouseout:当鼠标离开时触发

事件中的this

当在事件中表示当前元素的时候，可以使用this

1
2
3
4
5
var btn = document.getElementById("btn");
btn.onclick = function() {
  // 给 btn注册的事件，因此this表示btn
  this.value = "哈哈";
}

阻止a标签跳转

对于a标签来说，默认的行为就是进行页面跳转，如果不想让a标签进行跳转，可以在注册事件中使用return false

1
2
3
4
5
6
var link = document.getElementById("link");
link.onclick = function() {
  alert("呵呵");
  // 阻止页面跳转
  return false;
}

标签的内容属性

innerText && innerHTML