DOM & BOM

API

Application Programming Interface 应用编程接口

http://www.iciba.com/api

engine [ˈɛndʒɪn]

http://iciba.com/engine

目录

  1. DOM
    1. 相关概念
    2. 操作DOM
  2. BOM
  3. 嵌入 JS 脚本
  4. 问答

JS 的能力

由宿主（浏览器、Node平台）决定

  1. 数学运算
  2. 操作字符串
  3. ……

有了 DOM 和 BOM 之后

  1. 操作网页元素
  2. 弹出提示框
  3. console.log、console.dir
  4. localStorage、File API、Canvas
  5. ……

DOM

文档对象模型 Document Object Model，有 Specification

定义：文档对象模型 (DOM) 是HTML和XML文档的编程接口

说人话：想要操作网页，就要使用DOM

分为：

  1. HTML DOM
  2. XML DOM

DOM Tree

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <h1></h1>
    <p><a href=""></a></p>
    <ul>
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>
</body>

</html>

参考：http://www.w3school.com.cn/js/pro_js_implement.asp

DOM 相关概念

  1. 节点（Node）
    1. 文字（空格）也是节点
    2. 注释也是节点
  2. 获取节点
    1. ​document.getElementById
    2. document.getElementsByTagName
    3. document.querySelector
    4. document.querySelectorAll
    5. IE 的一些方法和一些不常用的方法

DOM 相关概念

节点的属性

  1. nodeName

  2. nodeType（注意 node 和 element 的区别）

  3. ownerDocument

  4. nextSibling, previousSibling, parentNode, parentElement

  5. childNodes，firstChild，lastChild

  6. textContent

DOM 相关概念

节点的方法

  1. appendChild()，hasChildNodes()
  2. cloneNode()，insertBefore()，removeChild()，replaceChild()
  3. contains()，compareDocumentPosition()，isEqualNode()

DOM 相关概念

集合

  1. NodeList
    1. childNodes 动态集合
    2. document.querySelectorAll 静态集合
  2. HTMLCollection
    1. document.links 动态集合

DOM 相关概念

ParentNode接口

  1. children

  2. firstElementChild

  3. lastElementChild

  4. childElementCount

ChildNode接口

  1. remove()

 

 

Element对象的方法

http://javascript.ruanyifeng.com/dom/node.html#element

  1. 选择子元素
    1. querySelector方法
    2. querySelectorAll方法
    3. getElementsByTagName方法
    4. getElementsByClassName方法
  2. 属性相关方法
    1. hasAttribute()
    2. getAttribute()
    3. setAttribute()
    4. removeAttribute()
  3. focus、click

BOM

浏览器对象模型，没有 Spec

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口大小
  • 提供 Web 浏览器详细信息的定位对象
  • 提供用户屏幕分辨率详细信息的屏幕对象
  • 对 cookie 的支持
  • IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

BOM 提供的 API

  1. Window 对象
  2. Navigator 对象
  3. Screen 对象
  4. History 对象
  5. Location 对象

将 JS 嵌入到页面中

  1. 写在标签上（inline script）
  2. 内部脚本
  3. 外部文件

Script 标签的工作原理

  1. 浏览器一边下载HTML网页，一边开始解析
  2. 解析过程中，发现script标签
  3. 暂停解析，网页渲染的控制权转交给JavaScript引擎
  4. 如果script标签引用了外部脚本，就下载完再执行，否则直接执行
  5. 执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

完。

下节内容：

  1. DOM Event
  2. jQuery 简介
Made with Slides.com