js进阶第一天!

一、Web API 概述

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

Web API：浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)，此处的Web API特指浏览器提供的一组方法。

二、JavaScript组成

ECMAScript

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

BOM

BOM（Browser Object Model）其实是一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等 。

DOM

DOM（Document Object Model）其实是一套操作页面元素的API，JavaScript中的DOM把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

三、DOM的概念

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理 可扩展标记语言（html或xml文档） 的标准 编程接口。它是一种与平台和语言无关的 API，它可以动态操作HTML文档，如 对html标签作增删改查操作。DOM 是一种基于树的 API 文档，在处理html文档的过程中，DOM以对象的形式存储在内存中。

因为DOM是基于树结构存储在内存中的，所以DOM又称为文档树模型

DOM中的几个常用概念

​ 1、文档：一个网页可以称为文档
​ 2、节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
​ 3、元素：网页中的标签
​ 4、属性：标签的属性

DOM经常进行的操作

​ 1、获取元素
​ 2、对元素进行操作(设置其属性或调用其方法)
​ 3、动态创建元素
​ 4、事件(什么时机做相应的操作)

四、获取元素几种的方式

语法：

document.getElementById('id')             //通过ID获取元素，唯一一个
document.getElementsByTagName('标签名')    //通过标签名称获取元素，[]集合
document.getElementsByClassName('类名')    //通过类名获取元素，[]集合。兼容性问题
document.getElementsByName("name")        //通过name属性值获取元素(表单)

// HTML5向Web API新引入了两个方法用来更方便地从DOM选取元素
// 功能类似于jQuery的选择器。
document.querySelector('selectors')    //获取一组元素中第一个满足条件的元素，高版本浏览器支持
document.querySelectorAll('selectors') //获取所有满足条件的元素
// 这个参数selectors需要是合法的CSS选择语法，可以包含多个CSS选择器，用逗号隔开

五、JS中的事件

事件是可以被控件识别的操作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件，如窗体的加载、单击、双击等事件，编辑框（文本框）的文本改变事件，等等。

事件是基于触发-响应 机制实现的，当用户对控件做某些操作时，如 点击，移入鼠标，输入文字等，控件会识别到该操作，并作出对应的响应。

5.1、事件三要素

​ 1、事件源: 被触发的对象
​ 2、事件类型: 用户的操作、例如：鼠标点击，鼠标经过，鼠标离开
​ 3、事件处理程序: 事件触发后要执行的代码(函数形式)–就是我们要去做上面事情

5.2、Javascript的书写位置

js 行内式：

<button onclick="alert('我是行内式')">行内式</button>

js 内嵌式：

<button onclick="fun()">内嵌式</button>
<script type="text/javascript">
function fun(){
	alert("我是内嵌式");
}

外部javascript：

第一步：先建立一个JS的文件 demo.js 书写JS代码
第二步：调用外部JS文件

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

<button onclick="fun1()">外部JS</button>

5.3、Javascript代码分离

行内事件绑定语法：

<button onclick="fun()">点击</button>
<script>
  function fun(){
     alert("您点击了我");
 }
</script>

行内事件绑定的写法没有体现出 结构样式行为代码分离 的特性，所以这种用法大家会用即可

我们重点掌握的是用代码分离的写法：

事件源.on事件=function(){要执行的处理程序;}

代码示例：

var btn=document.getElementById("btn");  /*获取id为btn的元素*/
 /*事件源.事件=function(){  }*/
btn.onclick=function(){
    alert("点了我");
}

六、常见内容修改

6.1、文本内容修改

语法：

element.innerHTML = '<p>xxx</p>'  //向一个元素中插入一段 HTML
element.innerText = 'xxx'         //修改元素的显示文本内容

6.2、css样式修改

语法：

element.style.backgroundColor = "red";

修改多个样式：

// 思路：将多个样式写成对象的形式作为参数，传递给一个函数
var obox = document.getElementById("box");
// 函数封装
function setCss(ele, css) {
    for (var key in css) {
        ele.style[key] = css[key];
    }
}
// 调用函数，传递参数
setCss(obox, {
    width: "200px",
    height: "200px",
    backgroundColor: "red"
})

6.3、非表单元素的属性修改

所谓表单元素，就是可以放在form表单标签中存储用户输入的数据的标签，如 input、select标签，而非表单元素就是只能展示数据，不能存储用户输入的数据 的标签，如 a、img标签。

常用的非表单元素属性有 href、title、id、src、className，使用DOM对象操作属性，常用操作有 使用元素获取属性值，以及使用元素修改属性值。以下以a、img标签为例。

语法：

element.属性 = 'xxx';

七、为多个元素绑定事件（this）

需求：点击按钮设置多个p标签的文字内容

var btn = document.getElementById("btn");//获取id为btn的元素
btn.onclick = function () {
   //根据标签名字获取标签
   var pObjs = document.getElementsByTagName("p");
   //无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组
   console.log(pObjs);
   //循环遍历这个数组
   for(var i =0; i < pObjs.length; i++){
      //每个p标签,设置文字
      pObjs[i].innerText = "都是P标签";
   }
};

希望对你有所帮助,明天见!