Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素-白红宇

Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素

阅读量：4218 次

发布时间：2019-05-26

本文共 5747 字，大约阅读时间需要 19 分钟。

Web API介绍

API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

任何开发语言都有自己的API

API的特征输入和输出(I/O)

API的使用方法(console.log())

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

掌握常见的浏览器提供的API的调用方式

JavaScript的组成

在这里插入图片描述

ECMAScript - JavaScript的核心

定义了javascript的语法规范

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

BOM - 浏览器对象模型

一套操作浏览器功能的API

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

DOM - 文档对象模型

一套操作页面元素的API

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

BOM

BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

BOM的顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window

注意：window下一个特殊的属性

  
     title

对话框

alert()

prompt()

confirm()

title

这是一个P

页面加载事件

onload

window.onload = function () {
      // 当页面加载完成执行  // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行}

onunload

window.onunload = function () {
      // 当用户退出页面时执行}

  
     title

定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

// 创建一个定时器，1000毫秒后执行，返回定时器的标示var timerId = setTimeout(function () {
      console.log('Hello World');}, 1000);// 取消定时器的执行clearTimeout(timerId);

  
     title

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

// 创建一个定时器，每隔1秒调用一次var timerId = setInterval(function () {
      var date = new Date();  console.log(date.toLocaleTimeString());}, 1000);// 取消定时器的执行clearInterval(timerId);

  
     title

location对象

location对象是window对象下的一个属性，时候的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

  
     title

URL

统一资源定位符 (Uniform Resource Locator, URL)

URL的组成

scheme://host:port/path?query#fragmentscheme:通信协议	常用的http,ftp,maito等host:主机	服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。port:端口号	整数，可选，省略时使用方案的默认端口，如http的默认端口为80。path:路径	由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。query:查询	可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zsfragment:信息片断	字符串，锚点.

location有哪些成员？

使用chrome的控制台查看

查MDN

成员
- assign()/reload()/replace()
- hash/host/hostname/search/href……

案例

解析URL中的query，并返回对象的形式

function getQuery(queryStr) {
      var query = {
    };  if (queryStr.indexOf('?') > -1) {
        var index = queryStr.indexOf('?');    queryStr = queryStr.substr(index + 1);    var array = queryStr.split('&');    for (var i = 0; i < array.length; i++) {
          var tmpArr = array[i].split('=');      if (tmpArr.length === 2) {
            query[tmpArr[0]] = tmpArr[1];      }    }  }  return query;}console.log(getQuery(location.search));console.log(getQuery(location.href));

history对象

back()

forward()

go()

  
     title

navigator对象

userAgent

通过userAgent可以判断用户浏览器的类型

platform

通过platform可以判断浏览器所在的系统平台类型.

  
     title

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与的“浏览器大战”，双方为了在与一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有、、以及微软自家的格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型

在这里插入图片描述

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签的属性

模拟文档树结构

在这里插入图片描述

function Element(option) {
      this.id = option.id || '';  this.nodeName = option.nodeName || '';  this.nodeValue = option.nodeValue || '';  this.nodeType = 1;  this.children = option.children || [];}var doc = new Element({
      nodeName: 'html'});var head = new Element({
      nodeName: 'head'});var body = new Element({
      nodeName: 'body'})doc.children.push(head);doc.children.push(body);var div = new Element({
      nodeName: 'div',  nodeValue: 'haha',});var p = new Element({
      nodeName: 'p',  nodeValue: '段落'})body.children.push(div);body.children.push(p);function getChildren(ele) {
      for(var i = 0; i < ele.children.length; i++) {
        var child = ele.children[i];    console.log(child.nodeName);    getChildren(child);  }}getChildren(doc);

DOM经常进行的操作

获取元素

动态创建元素

对元素进行操作(设置其属性或调用其方法)

事件(什么时机做相应的操作)

获取页面元素

为什么要获取页面元素

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

var div = document.getElementById('main');console.log(div);// 获取到的数据类型 HTMLDivElement，对象都是有类型的// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素

var divs = document.getElementsByTagName('div');for (var i = 0; i < divs.length; i++) {
      var div = divs[i];  console.log(div);}

根据name获取元素*

var inputs = document.getElementsByName('hobby');for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];  console.log(input);}

根据类名获取元素

var mains = document.getElementsByClassName('main');for (var i = 0; i < mains.length; i++) {
      var main = mains[i];  console.log(main);}

根据选择器获取元素

var text = document.querySelector('#text');console.log(text);var boxes = document.querySelectorAll('.box');for (var i = 0; i < boxes.length; i++) {
      var box = boxes[i];  console.log(box);}

总结

掌握	getElementById()	getElementsByTagName()了解	getElementsByName()	getElementsByClassName()	querySelector()	querySelectorAll()

案例

1.点击按钮弹出对话框

  
     $永远的24k纯帅$

2.点击按钮修改超链接的地址和热点文字

  
     $永远的24k纯帅$鸠摩搜书

3.点击(每个)图片弹出对话框

  
     $永远的24k纯帅$

4.点击图片设置自身宽和高

  
     $永远的24k纯帅$

5.点击按钮修改每个图片的title属性

  
     $永远的24k纯帅$

6.点击按钮显示哈哈(排他功能)

  
     $永远的24k纯帅$

7.点击按钮显示和隐藏div

  
     $永远的24k纯帅$

  
     $永远的24k纯帅$

8.显示和隐藏二维码

9.点击按钮修改所有p标签内容

  
     $永远的24k纯帅$
     
    哈哈,我又变帅了
  
    哈哈,我又变帅了
  
    哈哈,我又变帅了
  
    哈哈,我又变帅了
  
    哈哈,我又变帅了
   
     
    嘎嘎
  
    嘎嘎
  
    嘎嘎
  
    嘎嘎

10.点击按钮修改所有文本框内容

  
     $永远的24k纯帅$

11.点击按钮切换图片

  
     $永远的24k纯帅$

  
     $永远的24k纯帅$

12.点击超链接停止跳转页面

  
     $永远的24k纯帅$
   百度
   百度
   百度

13.点击小图显示大图

  
     $永远的24k纯帅$

14.美女相册

美女画廊

选择一个图片

15点击按钮选中性别和兴趣

  
     $永远的24k纯帅$男女保密
吃饭睡觉打豆豆打篮球打足球打铅球

你可能感兴趣的文章

wcf服务发布到windows Server2008服务器上

WCF服务远程服务器返回错误: (415)