前端开发(2)-JavaScript核心DOM BOM1

发表于
字数统计 1.4k | 阅读时长 5

系列课程地址：戳这里。
系列课程共分为三部分：阶段 1：HTML+CSS；阶段 2：JavaScript；阶段 3：开发工具；阶段 4：前端框架；阶段 5：移动及服务端开发。
这里介绍阶段 2：JavaScript，此部分涉及许多计算机及编程基础知识，这里略过不做记录，只记录之前用的比较少的部分。

Web API

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的调用方式

MDN-Web API

JavaScript的组成

![1496912475691](D:/Study/02-JavaScript-WEB-API-第1天/01教学资料/02-Web API/media/1496912475691.png)

ECMAScript - JavaScript的核心

定义了javascript的语法规范

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

BOM - 浏览器对象模型

一套操作浏览器功能的API

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

DOM - 文档对象模型

一套操作页面元素的API

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

Dom

  • 文档：一个页面就是一个文档，DOM 中使用 document 表示
  • 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看做是对象

获取页面元素

根据ID获取

使用 getElementById() 方法可以获取带有ID 的元素对象。

1
document.getElementById('id');

根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

1
document.getElementsByTagName('标签名');

注意：

1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。

2.得到元素对象是动态的

3.如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

还可以获取某个元素(父元素)内部所有指定标签名的子元素。

1
element.getElementsByTagName('标签名');

注意：父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己。

Html5新增的获取方法

1
2
3
1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器');     // 根据指定选择器返回

注意：querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

特殊元素（body/html获取）

1
2
1. doucumnet.body  // 返回body元素对象
2. document.documentElement  // 返回html元素对象

事件基础

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发— 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

事件执行步骤

  1. 获取事件源

  2. 注册事件（绑定事件）

  3. 添加事件处理程序（采取函数赋值形式）

操作元素

改变元素内容

1
element.innerText

从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉。

1
element.innerHTML

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行。

常用元素的属性操作

1
2
3
1. src、href

2. id、alt、title

直接在事件中修改元素.属性即可。

表单元素属性修改

利用 DOM 可以操作如下表单元素的属性：

1
2
3
4
5
6
  type、value、checked、selected、disabled
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性

样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1
2
3
1. element.style     行内样式操作

2. element.className 类名样式操作

注意：

  1. JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
  2. JS 修改 style 样式操作，产生的是行内样式，权重比CSS 高
  3. 如果样式修改较多，可以采取操作类名方式更改元素样式。
  4. class因为是个保留字，因此使用className来操作元素类名属性
  5. className 会直接更改元素的类名，会覆盖原先的类名，如果想要保留原类名，使用多类名选择器，即this.className=’原类名 新类名’。

注：转载文章请注明出处，谢谢~