复习笔记之API(1) JS组成

JS组成

• ECMAScript(JavaScript语法)
• DOM（页面文档对象模型）
• BOM（浏览器对象模型）

Web APIs阶段

JS基础学习ECMAScript基础语法为后面做铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果

• API(Application Programing Interface应用程序编程接口)：是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而无需访问源码，或理解内部工作机制的细节
  • 简单理解：API是给程序员提供的一种工具(一个接口)，以便能更轻松的实现想要完成的功能
• Web API:是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
  • 针对浏览器提供的接口，主要针对于浏览器做交互效果
  • Web API一般都有输入和输出(函数传参和返回值)，Web API很多都是方法(函数)

DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准程序接口
W3C已经定义了一系列的DOM接口，通常这些DOM接口可以改变网页的内容、结构和样式

• DOM树

  
  DOM树.png

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

DOM把以上内容都看对象

获取元素

获取页面中的元素可以使用以下几种方式

• 根据ID获取
• 根据标签名获取
• 通过HTML5新增的方法获取
• 特殊元素获取

• 根据ID获取

  • 使用getElementById()方法可以获取带有ID的元素对象
  • element是一个Element对象，如果文档中拥有特定ID的元素不存在则返回null(ID是大小写敏感的字符串，代表了所要查找的元素的唯一ID)

• 根据标签名获取

  • 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
  • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
  • 得到的元素对象是动态的

• 通过HTML5新增的方法获取

  • document.getElementsByClassName('类名'); 根据类名返回元素对象集合
  • document.querySelector('选择器'); 根据指定选择器返回第一个元素对象
  • document.querySelector('选择器'); 根据指定选择器获取所有元素对象的集合

• 获取特殊元素body和html

  • 获取body元素document.body 返回body元素对象
  • 获取html元素document.documentElement 返回html元素对象

下一篇：事件基础&&节点操作