API

第四天笔记 API接口

BOM

brower object model的缩写 浏览器对象模型

主要是用来和浏览器交互的对象

BOM主要是和浏览器窗口进行交互，所以BOM当中的核心对象——window对象。
Tip：只要宿主环境是浏览器，那么最高等级的对象，就是window。
js组成：
ECMA语法准则（ECMA）BOM（网景领航者浏览器的一部分） DOM（W3C）

window 对象

宿主环境为浏览器时，所有的对象其实都是延伸自window对象。
由于window对象处于js对象的最顶层，所以说很多时候我们在使用window对象方法的时候可以减肥window省略。
在全局的情况下，任何一个全局函数或者全局的变量都可以说成是window的方法和属性、

介绍
window对象是BOM当中的核心对象。所有的对象都是通过它延申而出，也可以说其他的对象都是window对象的子对象。
由于window对象处于对象的最顶层，所以再调用的过程中可以选择不去知名window对象

    document.write('hello,world');
    alert(123)
    //也可以写成
    window.document.write('hello,world');
    window.alert(123);

也可说，任何一个全局函数或者变量都是window的属性。

var a = 10;
alert(window.a);

属于window的子对象
document 对象 frames 对象 history 对象 location 对象 navigator 对象 screen 对象

window对象当中的常用方法

窗口控制函数
moveBy（）

<input type="button"value="点击移动"onclick="window.moveBy(0,-5)">

Tip：ie有效果
moveTo（）

<input type="button"value="点击移动"onclick="window.moveTo(0,-5)">

Tip：ie有效果
resiezeBy()

<input type="button"value="点击移动"onclick="window.resizeBy(50,50)">

Tip：ie有效果
resizeTo()

<input type="button"value="点击移动"onclick="window.resizeTo(50,50)">

Tip：ie有效果
scrollTo()
在窗口中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置

<input type="button"value="点击移动"onclick="window.scrollTo(50,50)"><div style=" 1000px;height: 1000px;"></div>

Tip:谷歌和IE都可以执行。
scrollBy()
如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置（就是向左移动x像素），将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置（就是想下移动y像素）

<input type="button"value="点击移动"onclick="window.scrollBy(1,1)">
<div style=" 1000px;height: 1000px;"></div>

focus()
使窗体或者控件获得焦点。

<input type="text"id="text">
<input type="button"onclick="javascript:document.all.text.focus()"value="click">

blur()
是控件失去焦点。

<input type = "text" id = "text" onclick = "blur()">

open()
打开一个网页

window.open('http://www.baidu.com');

window对象其他常用方法

alert（）显示带有一段消息和一个确认按钮的警告框。
confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt（）显示可提示用户输入的对话框。
setinterval（）按制定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout（）在指定的毫秒数后调用函数或计算表达式。
clearInterval（）取消由setinterval（）设置的timeout。
clearTimeout（）取消由setTimeout（）方法设置的timeout。

window对象常用属性

innerHeight 返回窗口的文档显示区的高度。
IE9+
innerWidth 返回窗口的文档显示区的宽度。
IE9+
outerHeight 返回窗口的外部高度。
IE9+
overWidth 返回窗口的外部宽度。
IE9+

history 对象

history.go（）前进或后退
history.back()后退一页
history.formard（） 前进一步

location 对象

当前对象主要用于获取或者设置窗口的url，并且可以用于解析url。

JavaScript hash 属性--返回URl中#符号后面的内容
JavaScript host 属性--返回域名
JavaScript hostname 属性--返回主域名
JavaScript href 属性--返回当前文档的完整URl或设置当前文档的URl
JavaScript pathname 属性--返回URl中域名后的部分
JavaScript port 属性--返回URl中的端口
JavaScript protocol 属性--返回URl中的协议
JavaScript search 属性--返回URl中的查询字符串
JavaScript assign（） 函数--设置当前文档的URl
JavaScript replace（） 函数--设置当前文档的URl,并在history对象的地址列表中删除这个URl
JavaScript reload（） 函数--重新载入当前文档（从server服务器端）
JavaScript toString（） 函数--返回location对象href属性当前的值

http://www.baidu.com/index.html?wd=shanghai&name=waxt多个属性参数用&拼接

navigator 对象

当前对象主要用于查看浏览器与操作系统信息。
常用属性：
appCodeName浏览器相关内容用字符串表示
appName官方浏览器的名字的字串符表示
appVersion浏览器信息版本
cookieEnabled检查cookie功能是否启用，如果启用true
platform显示的是浏览器所在的系统平台信息
plugins安装浏览器当中的插件数组
userAgent（使用频率高）用户代理头
比较常用userAgent、cookieEnabled
navigator中最重要的是userAgent属性，返回包含浏览器版本等信息的字符串，其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie。

screen 对象

用于获取屏幕信息
width 屏幕分辨率的宽度
height 屏幕分辨率的高度

availWidth 窗口可以使用的屏幕宽度
availHeight 窗口可以使用的屏幕高度

常用属性：

    JavaScript availHeight属性--窗口可以使用的屏幕高度，单位像素
    JavaScript availWidth属性--窗口可以使用的屏幕宽度，单位像素
    JavaScript colorDepth属性--用户浏览器表示的颜色位数，通常为32位（每像素的位数）
    JavaScript pixelDepth属性--用户浏览器表示的颜色位数，通常为32位（每像素的位数）（IE不支持此属性）
    JavaScript height属性--屏幕的高度，单位像素
    JavaScript width属性--屏幕的宽度，单位像素

DOM 对象

Document object Madel 文档对象模型
主要用来操作html 和 xml 文档内容的基础API。

json（所有的json对象都是字符串）
    {
        "status":"ok",
        "message":"登陆成功"
    }

文本对象模型，是w3c推荐的处理扩展语言的标准编程接口

DOM 分级：

1级 DOM
1998年10月份提出 ， 1级DOM有两部分组成，DOM核心（操作xml）、DOM HTML（操作html） 两部分
2级 DOM
增加了鼠标、用户界面、如何遍历元素、如何范围查找元素等以及随css操作的支持
3级 DOM
引入了一个新的模块：DOM的载入和保存

DOM 树

有不同的网页标签构成的网页整体称之为DOM树。

节点（网页里面的一切内容）-----//标签属于节点，但节点不属于标签
节点之间的关系：
---父子关系
---兄弟关系
节点之间的分类：
Document
document文档
（代表他的是“9”）
DocumentType
doctype html
（10）
Element
element 元素 彻头彻尾的标签
（1）
Attribute
attr 属性
（2）
Text
text 文本内容
（3）
Comment
comment 注释
（8）
DocumentFragment
DocumentFragment
（11）

如何获取节点：

通过id名找到元素节点：
document.getElementByID('id');
如何传入多个id值，一次性找到多个元素？

通过指定标签名来获取节点

document.getElementsByTagName()

通过传入一个*，那么可以找到所有标签

document.getElementsByTagName("*");

通过类名获取元素

document.getElementsByClassName('class值')；

通过name来获取元素

document.getElementsByName("name值");通过标签的name属性来获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <ul>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>
        </ul>
    </div>
</body>
<script>
    var divs= document.getElementsByTagName('div')[0];
    console.log(divs)
</script>
</html>

通过css选择器来选择元素（不是实时的）

document.querySelectorAll('#id名');
document.querySelectorAll('.class名');
例如：
    <div class="d1" id="box"></div>
    document.querySelectorAll('#box');
    querySelectorAll()非常看重执行时机，在执行之前的内容都可以获取，但是执行之后的内容将没办法获取。
    ：link ：visited也会失效，浏览器会禁止使用。
通过节点之间的关系来访问元素

子父级关系
    parentNode
兄弟节点
    下一个兄弟节点
    nextSibling   ie 678支持的
    nextElementSibling
    上一个节点
    previousSibling  ie 678支持的
    previousElementSibling

    兼容写法：
    var a = info.nextElementSibling || info.nextSibling
选取子节点
    firstChild 第一个子元素 ie 678认识
    firstElementChild 第一个子元素 其他浏览器认识

    lastChild 最后一的子元素 ie 678认识
    lastElementChild其他浏览器认识

    childNodes 选取全部的子元素，但不推荐使用
    children 选取全部子元素 更好用
        tip：会把注释也当节点

节点的常规操作

创建节点

document.createElement()
info.innerHTML

插入节点

appendChild()
    将节点插入到元素的最后面
inserBefore(插入节点，参照节点)
    如果第二个参数为null，则默认把要插入的节点插入到容器的最后面

删除

removeChild()移除子节点

克隆节点

cloneNode()复制节点
如果说在cloneNode()括号内传入一个true，则为深克隆，如果没有传入参数，则默认为flase即是浅克隆。

DocumentFragment

是一个特殊的节点，属于临时容器。
document.createDocumentFragment()创建一个临时容器
不是与任何节点的子节点，是一个独立的节点，如果查看parentNode，结果为Null1