BOM 和 DOM

从今天开始我们就开始学习使用 JS 去操作浏览器和页面中的 HTML 元素

BOM 的概念和常用 API

BOM(Browser Object Model): 浏览器对象模型
- 其实就是操作浏览器的一些能力
我们可以操作哪些内容?
- 获取浏览器的相关信息(窗口大小)
- 操作浏览器进行页面的跳转
- 获取当前浏览器地址栏的信息
- 操作浏览器的滚动条
- 浏览器的信息(浏览器的版本)
- 让浏览器出现一个弹出框(alert/prompt/confirm)
- ...
BOM 的核心就是 window 对象
window 是浏览器内置的一个对象, 里面包含着操作浏览器的方法

获取浏览器窗口的尺寸

innerHeight 和 innerWidth
- 作用: 获取浏览器窗口的高度和宽度(包含滚动条)
- 语法: window.innerHeight; window.innerWidth

浏览器的弹出层

confirm
- 有一个询问信息和两个按钮
  - 点击确定返回 true
  - 点击取消返回 false
alert
prompt

浏览器的地址信息

在 window 中有一个对象叫做 location, 他是专门用来存储浏览器地址栏内的信息

location.href

location.href 专门存储浏览器地址栏内 url 地址的信息
语法: var url = window.location.href
我们也可以给这个属性赋值, 这样就会跳转到我们复制的地址了

window.location.href = 'https://www.baidu.com'

location.reload

location.reload 会重新加载页面, 相当于刷新
注意: 不要写在全局内, 否则浏览器会一直刷新

window.location.reload()

浏览器的历史记录

window 中有一个对象叫做 history 他专门用来存储历史记录信息

history.back

history.back 用来回退历史纪录的, 就是回到前一个页面, 相当于浏览器左上角的 ← 按钮
注意: 我们需要有上一条记录, 不然就一直在这个页面不会回退

window.history.back()

history.forward

history.forward 是去到下一个历史记录里面, 也就是去到下一个页面, 就相当于浏览器左上角的 → 按钮
注意: 前提是我们之前有过回退操作, 不然的话我们现在就是在最后一个页面, 没有下一个

window.history.forward()

浏览器的版本信息(了解)

window 中的 navigator 可以获取到浏览器的信息

浏览器的 onload 事件

该事件会在页面所有资源加载完毕后执行

window.onload = function () {
    console.log('页面已经加载完毕')
}

在浏览器中, 把 JS 写在 head 中, JS 在加载时 DOM 还没加载完, 可能会导致获取 DOM 时出现问题, 但是如果把代码放在 onload 事件中, 则不会出现问题
如果把 JS 写在 body 底部, 则写不写 onload 都一样

浏览器的 onscroll 事件

当浏览器的滚动条滚动时会触发该事件, 或者鼠标滚轮滚动时触发

window.onscroll = function () {
    console.log('浏览器滚动了')
}

浏览器的滚动距离

浏览器的内容可以滚动, 那么我们就可以获取到浏览器滚动的距离
但是需要思考一个问题
- 浏览器真的滚动了吗?
- 其实浏览器没有滚动, 一直在那里, 滚动的是浏览器的页面
- 所以说: 其实浏览器没动, 只不过页面向上走了
所以这个已经不能单纯的算是浏览器的内容了, 而是我们页面的内容
所以不再是使用 window 对象了, 而是使用 document 对象

scrollTop

获取的事页面向上滚动的距离
- 两种方式
  - document.body.scrollTop
  - document.documentElement.scrollTop

window.onscroll = function () {
    console.log(document.body.scrollTop)
    console.log(document.documentElement.scrollTop)
}

区别
- IE 浏览器(了解)
  - 没有 DOCTYPE 声明的时候, 用这两个都行
  - 有 DOCTYPE 声明的时候, 只能用 document.documentElement.scrollTop
- Chorme 和 FireFox
  - 没有 DOCTYPE 声明的时候, 用 document.body.scrollTop
  - 有 DOCTYPE 声明的时候, 用 document.documentElement.scrollTop
- Safari
  - 两个都不用, 使用一个单独的方法 window.pageYOffset

scrollLeft

获取页面向左滚动的距离
- document.body.scrollLeft
- document.documentElement.scrollLeft

window.onscroll = function () {
    console.log(document.body.scrollLeft)
    console.log(document.documentElement.scrollLeft)
}

区别
- 参考 scrollTop

浏览器的本地存储

localStorage

浏览器本地存储, 持久存储, 一旦存储永久存在
只能存基础数据类型(一般为字符串), 不能存储复杂数据类型
可以跨页面通讯

// 增
window.localStorage.setItem(key, value)
// 删
window.localStorage.removeItem(key)
// 清除
window.localStorage.clear()
/**
 * 查
 *      有      --->    返回对应的 value
 *      没有    --->    返回 Null
*/
window.localStorage.getItem(key)

sessionStorage

浏览器的本地存储, 临时存储, 关闭浏览器以后, 存储内容自动消失
想要跨页面通讯, 必须是从本页面跳转的才可以

// 增
window.sessionStorage.setItem(key, value)
// 删
window.sessionStorage.removeItem(key)
// 清除
window.sessionStorage.clear()
/**
 * 查
 *      有      --->    返回对应的 value
 *      没有    --->    返回 Null
*/
window.sessionStorage.getItem(key)

cookie
1. 只能存储字符串, 有固定格式
  - key=value; key2=value2; key3=value3
2. 存储大小有限制
  - 4KB左右
3. 存储有时效性
  - 默认是会话级别时效, 但是可以手动设置过期时间
4. 操作必须依赖服务器
  - 本地打开的也页面时不能操作 cookie
  - 要求页面必须在服务器打开
5. 跟随前后端请求自动携带
  - 只要 cookie 空间中有内容的时候
  - 会在该页面和后端交互的过程中自动携带
6. 前后端操作
  - 前端可以使用 JS 来操作
  - 任意一个后端语言都可以操作
7. 存储依赖域名
  - 哪一个域名存储, 那一个域名使用
  - 不能跨域名通讯

// 设置 cookie
document.cookie = 'a=100'

// 设置一条带有过期时间的 cookie
var time = new Date()
document.cookie = 'a=100;expires=' + time

// 设置一条 30s 以后过期的 cookie
var time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30)
document.cookie = 'a=100;expires=' + time

// 获取 cookie
document.cookie

本地存储的区别 (面试必问)

出现时间
- cookie: 有 JS 就有了
- storage: H5 出现后才有
存储大小
- cookie: 4k 左右
- storage: 20MB 左右
前后端交互
- cookie: 会随着当前页面的请求自动携带
- storage: 不会跟随请求自动携带
前后端操作
- cookie: 前后端语言都可以操作
- storage: 只能前端 JS 操作
过期时间
- cookie: 默认是会话, 可以手动设置过期时间
- storage: 不能手动设置

localStorage 和 sessionStorage 的区别
- 过期时间
  - localStorage: 永久存储, 除非手动清除
  - sessionStorage: 临时存储
- 跨页面通讯
  - localStorage: 直接跨页面通讯
  - sessionStorage: 只能是当前窗口跳转的页面才可以通讯
- 共同点
  - 只能存储字符串, 不能存储复杂数据类型
  - 存储其他数据类型的时候, 获取回来的也是字符串类型

DOM 的基本概念及操作

DOM(Document Object Model): 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面中添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
DOM 的核心对象就是 document 对象
document 对象是浏览器内置的一个对象, 里面存储这专门用来操作元素的各种方法
DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM 对象

获取非常规元素

document.documentElement
document.head
document.body

// 1. html
var htmlEle = document.documentElement
console.log(htmlEle)
// 2. head
var headEle = document.head
console.log(headEle)
// 3. body
var bodyEle = document.body
console.log(bodyEle)

获取常规元素

通过 JS 代码来获取页面中的标签, 获取后我们就可以操作这些标签

getElementById

getElementById 是通过标签的 ID 名称来获取标签的
因为页面中的 ID 是唯一的, 所以获取到的就是一个元素

<body>
    <div id="box"></div>
    <script>
    	var box = document.getElementById('box')
    	console.log(box) // 页面中 ID 为 box 的标签
    </script>
</body>

getElementsByClassName

getElementsByClassName 是通过标签的 class 名称来获取标签的
因为页面中可能会有多个元素的 class 名称一样, 所以获取到的是一组元素
哪怕页面中只有一个, 获取到的也是一组元素, 只不过这一组元素只有一个 DOM 元素

<body>
<div calss="box"></div>
<script>
    var box = document.getElementsByClassName('box')
    console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
</script>
</body>

注意!!! getElementsByClassName 是一组长得很像数组的数据解构, 但它不是数组, 我们叫这种数据结构为: 伪数组
这一组数据也是按照索引排列的, 所以我们想要准确的拿到这个 div, 需要用索引来获取

getElementsByTagName

getElementsByTagName 是通过标签的标签名称来获取标签饿
因为页面中可能有多个元素的标签名称一样, 所以获取到的是一组元素
哪怕只有一个这个标签名, 获取到的也是一组数据, 只不过一组数据中只有一个 DOM 元素

<body>
<div></div>
<script>
    var box = document.getElementsByTagName('div')
    console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
</script>
</body>

和 getElementsByClassName 一样, 获取到的是一个长得很像数组的元素
必须要用索引才能准确地到 DOM 元素

querySelector

querySelector 是按照选择器的方式来获取元素
也就是说, 按照我们写 css 的时候的选择器来获取
这个方法只能获取到一个元素, 并且是页面中第一个满足条件的元素

console.log(document.querySelector('div'))  // 获取页面中第一个 div 元素
console.log(document.querySelector('.box'))  // 获取页面中第一个 有 box 类名的元素
console.log(document.querySelector('#box'))  // 获取页面中第一个 id 名为 box 的元素

querySelectorAll

querySelectorAll 是按照选择器的方式来获取元素
这个方法能获取到所有满足条件的元素, 以一个伪数组的形式返回

console.log(document.querySelectAll('div')) // 获取页面中的所有的 div 元素
console.log(document.querySelectAll('.div')) // 获取页面中的所有的 类名为 box 的元素

获取到的是一组数据, 也是需要用索引来获取到准确的每一个 DOM 元素

操作属性

我们获取到元素后, 可以直接操作 DOM的属性, 然后直接把效果展示

DOM (下)

DOM 树就是我们 html 结构中一个一个的节点构成的
不光我们的标签是一个节点, 我们写的文本内容也是一个节点, 注释, 包括空格都是节点

DOM 节点

DOM 节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
如何区分三种节点类型
- 比如我们在获取元素的时候, 通过各种方法获取到的我们叫做元素节点(标签节点)
- 我们标签里面写的文字就是文本节点
- 写在标签上的属性, 就是属性节点
元素节点
- 通过 getElementBy... 获取到的都是元素节点
属性节点
- 通过 getAttribute 获取到的就是元素的属性节点
文本节点
- 通过 innerText 获取到的就是元素的文本节点

获取节点

childNodes: 获取某一节点下所有的子一级节点

<div>
    <p>hello</p>
</div>;

var pDiv = document.querySelector("div");
console.log(pDiv.childNodes);
/**
 *  NodeList(3) [text, p, text]
 *
 *  0 : text
 *  1 : p
 *  2 : text
 *  length : 3
 */

拿到的是一个伪数组, 里面有三个节点
一个 text: 从 <div> 一直到 <p> 中间有一个换行和一堆空格, 这是第一个节点, 是一个文本节点
一个 p: 这个就是 p 标签, 他是第二个节点, 这是一个元素节点
又一个 text: 从 </div> 一直到 </p> 中间有一个换行和一堆空格, 这是第一个节点, 是一个文本节点

children: 获取某一节点下所有的子一级元素节点

<div>
    <p>hello</p>
</div>;

var pDiv = document.querySelector("div");
console.log(pDiv.children);
/**
 *  HTMLCollection(1) [p]
 *
 *  0 : p
 *  length : 1
 */

因为 children 只要元素节点所以就只拿到了 div 下边的唯一一个元素节点, 也就是 p
虽然获取到的只有一个, 但也是一个伪数组

firstChild: 获取某一节点下子一级的第一个节点

<div>
    <p>hello</p>
</div>;

var pDiv = document.querySelector("div");
console.log(pDiv.firstChild);
// #text

这个是只获取第一个节点, 所以不再是伪数组了
根据标签结构我们可以得知, 第一个节点是从 <div> 一直到 <p> 的那个换行和空格, 是个文本节点

lastChild: 获取某一节点下子一级的最后一个节点

<div>
    <p>hello</p>
</div>;

var pDiv = document.querySelector("div");
console.log(pDiv.lastChild);
// #text

这个是只获取最后一个节点, 所以不再是伪数组了
根据标签结构我们可以得知, 第一个节点是从 </div> 一直到 </p> 的那个换行和空格, 是个文本节点

firstElementChild: 获取某一节点下子一级的第一个元素节点

<div>
    <p>hello</p>
</div>;

var pDiv = document.querySelector("div");
console.log(pDiv.firstElementChild);
// #text

这个是只获取第一个节点, 所以不再是伪数组了
获取的是第一个元素节点, 所以是 p 标签

lastElementChild: 获取某一节点下子一级的最后一个元素节点

<div>
    <p>hello</p>
</div>;

var pDiv = document.querySelector("div");
console.log(pDiv.lastElementChild);
// #text

这个是只获取最后一个节点, 所以不再是伪数组了
获取的是最后一个元素节点, 所以是 p 标签

nextSibling: 获取某一个节点的下一个兄弟节点

<ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
</ul>;

var oLi = document.querySelector("#b");
console.log(oLi.nextSubling); // #text

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的下一个兄弟节点
因为 id="b" 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

previousSibling: 获取某一个节点的上一个兄弟节点

<ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
</ul>;

var oLi = document.querySelector("#b");
console.log(oLi.previousSibling); // #text

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的上一个兄弟节点
因为 id="b" 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

nextElementSibling 获取某一个节点的下一个元素节点

<ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
</ul>;

var oLi = document.querySelector("#b");
console.log(oLi.nextElementSubling); // <li id="c">!!!</li>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的下一个兄弟元素节点
因为 id="b" 的下一个节点，是 id="c" 的 li, 所以应该打印 li

previousElementSibling 获取某一个节点的上一个元素节点

<ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
</ul>;

var oLi = document.querySelector("#b");
console.log(oLi.previousElementSibling); // <li id="a">hello</li>

只获取一个节点，不在是伪数组
获取的是 id="b" 这个 li 的上一个兄弟元素节点
因为 id="b" 的上一个节点，是 id="a" 的 li, 所以应该打印 li

parentNode: 获取某一个节点的父节点

<ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
</ul>;

var oLi = document.querySelector("#b");
console.log(oLi.parentNode); // <ul>...</ul>

只获取一个节点，不在是伪数组
获取的是当前这个 li 的父元素节点
因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点

attributes: 获取某一个元素节点的所有属性节点

<ul>
    <li id="a" a="100" test="test">
        hello
    </li>
</ul>;

var oLi = document.querySelector("#a");
console.log(oLi.attributes); // NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}

获取该元素的所有属性, 也是一个伪数组
这个 li 有三个属性 id; a; test, 所以就获取到了这三个

节点属性

后续案例依照这段代码打印

<body>
    <ul test="我是 ul 的一个属性">
        <li>hello</li>
    </ul>

    <script>
        // 先获取 ul
        var oUl = document.querySelector("ul");

        // 获取到 ul 下的第一个子元素节点，是一个元素节点
        var eleNode = oUl.firstElementChild;

        // 获取到 ul 的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
        var attrNode = oUl.attributes[0];

        // 获取到 ul 下的第一个子节点，是一个文本节点
        var textNode = oUl.firstChild;
    </script>
</body>

nodeType 获取节点类型, 用数字表示

console.log(eleNode.nodeType); // 1 ***> 元素节点
console.log(attrNode.nodeType); // 2 ***> 属性节点
console.log(textNode.nodeType); // 3 ***> 文本节点

nodeType === 1 就表示该节点是一个 元素节点
nodeType === 2 就表示该节点是一个 属性节点
nodeType === 3 就表示该节点是一个 文本节点

nodeName 获取节点的节点名称

console.log(eleNode.nodeName); // LI
console.log(attrNode.nodeName); // test
console.log(textNode.nodeName); // #text

元素节点的 nodeName 就是 大写标签名
属性节点的 nodeName 就是 属性名
文本节点的 nodeName 就是 #text

nodeValue 获取节点的值

console.log(eleNode.nodeValue); // null
console.log(attrNode.nodeValue); // 自定义的属性值, 在上述代码中 是: `我是 ul 的一个属性`
console.log(textNode.nodeValue); // 换行 + 空格

元素节点没有 nodeValue
属性节点的 nodeValue 就是 属性值
文本节点的 nodeValue 就是 文本内容

-	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

操纵 DOM 节点

常规意义上的操作 DOM 节点无非就是增删改查(CRUD) 注意, 在增加节点前, 我们应该先有一个节点, 所以应该是 1. 创建 2. 向页面中增加一个节点 3. 删除页面中的某一个节点 4. 修改页面中的某一个节点 5. 获取页面中的某一个节点

创建节点

createElement 创建一个元素节点

var oDiv = document.createElement('div')
console.log(oDiv)   // <div></div>

createTextNode 创建一个文本节点

var oDiv = document.createTextNode('我是一个文本节点~啦啦啦啦啦')
console.log(oDiv)   // 我是一个文本节点~啦啦啦啦啦

向页面中加入一个节点

appendChild: 向一个元素节点的末尾追加一个节点
- 语法: 父节点.appendChild(要插入的子节点)

var oDiv = document.createElement('div')
var oText = document.createTextNode('我是一个文本节点~啦啦啦啦啦')

// 向 oDiv 中追加一个文本节点
oDiv.appendChild(oText)
console.log(oDiv)

insertBefore: 向一个元素节点前插入一个节点
- 语法: 父节点.insertBefore(要插入的节点, 插入在哪一个节点的前面)
- 注意点: insertBefore 的第二个参数不是可选项是必选项, 传递正常节点时代表:插入在哪一个节点的前面, 如果传递的是 null, 则表示插入到父节点的末尾

<div>
    <p>我是一个 p 标签</p>
</div>
var oDiv = document.querySelector('div')
var oP = oDiv.querySelector('p')

// 创建一个元素节点
var oSpan = document.createElement('span')

// 将这个元素节点添加到 div 下的 p 的前面
oDiv.insertBefore(oSpan, oP)

console.log(oDiv)
/**
 *  <div>
 *      <span></span>
 *      <p>我是一个 p 标签</p>
 *  </div>
*/

删除页面中的某一个节点

removeChild: 移出某一节点下的某一个节点
- 语法: 父节点.removeChild(要移除的子节点)

<div>
    <p>我是一个 p 标签</p>
</div>
var oDiv = document.querySelector('div')
var oP = oDiv.querySelector('p')

oDiv.removeChild(oP)
console.log(oDiv) // <div></div>

修改页面中的某一个节点

replaceChild: 将页面中的某一个节点替换掉
- 语法: 父节点.replaceChild(新节点, 旧节点)

<div>
    <p>我是一个 p 标签</p>
</div>
var oDiv = document.querySelector('div')
var oP = oDiv.querySelector('p')
// 创建一个 span 节点
var oSpan = document.createElement('span')
// 向 span 元素中加点文字
oSpan.innerHTML = '我是新创建的 span 标签'

// 用创建的 span 标签替换原先 div 下的 p 标签
oDiv.replaceChild(oSpan, oP)

console.log(oDiv)
/*
    <div>
        <span>我是新创建的 span 标签</span>
    </div>
*/

克隆页面中的某一个节点

cloneNode: 把该节点复制一份一摸一样的
- 语法: 节点.cloneNode(参数)
  - 默认是false, 表示不克隆后代节点
  - 选填是 true, 表示克隆后代节点

<div>
    <p>我是一个 p 标签</p>
</div>
var oDiv = document.querySelector('div')
var oP = oDiv.querySelector('p')

// 克隆节点
var cloneDiv = oDiv.cloneNode()
var cloneDiv1 = oDiv.cloneNode(true)
console.log(cloneDiv)
console.log(cloneDiv1)

获取元素的非行内样式

操作 DOM 的时候经常会操作元素的 CSS 样式, 所以我们免不了需要获取元素的样式
元素.style.xxx 的方式也只能获取到元素的行内样式

div {
    width: 100px;
}

<div style="height: 100px"></div>

var oDiv = document.querySelector('div')
console.log(oDiv.style.height)  // 100px
console.log(oDiv.style.width)  // ''

所以我们要想获取元素的非行内样式, 就需要使用 getComputedStyle 和 currentStyle
这两个方法作用是一样的, 只不过一个是在非 IE 浏览器, 一个在 IE 浏览器

getComputedStyle (非IE使用)

语法: window.getComputedStyle(元素).要获取的属性

div {
    width: 100px;
}

<div style="height: 100px"></div>

var oDiv = document.querySelector('div')
console.log(window.getComputedSTYLE(oDiv).width)  // 100px
console.log(window.getComputedSTYLE(oDiv).height)  // 100px

currentStyle (IE使用)

语法: 元素.currentStyle.要获取的属性

div {
    width: 100px;
}

<div style="height: 100px"></div>

var oDiv = document.querySelector('div')
console.log(oDiv.currentStyle.width)  // 100px
console.log(oDiv.currentStyle.height)  // 100px

获取元素偏移量

就是元素在页面上相对于参考父级的左边和上边的距离

offsetParent

获取元素的偏移量参考父级
其实就是假设你要给一个元素 绝对定位 的时候
它是根据谁来进行定位的, 那么这个元素的偏移量参考父级就是谁

offsetLeft / offsetTop

获取的事元素左边的偏移量和上边的偏移量
- offsetLeft 该元素相对于参考父级的左侧偏移量
- offsetTop 该元素相对于参考父级的上侧偏移量

获取元素尺寸

获取元素的占地面积

offsetWidth 和 offsetHeight

offsetWidth: 获取元素内容 + padding + border 的宽度
offsetHeight: 获取元素内容 + padding + border 的高度

clientWidth 和 clientHeight

clientWidth 获取元素内容 + padding 的宽度
clientHeight 获取元素内容 + padding 的高度

注意

获取到的尺寸是没有单位的数字
当元素在页面中不占位置的时候, 获取到的是 0
- display: none 元素在页面不占位
- visibility: hidden 元素在页面占位

获取浏览器窗口尺寸

可视区域的尺寸

document.documentElement.clientWidth: 浏览器可视窗口的宽度
document.documentElement.clientHeight: 浏览器可视窗口的高度

什么是事件

一个事件的组成
- 触发谁的事件: 事件源
- 触发什么事件: 事件类型
- 触发后做什么: 事件处理函数

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
/**
 * 触发谁的事件 ---> oDiv ---> 事件源就是 oDiv
 * 触发什么事件 ---> onclick ---> 事件类型就是 click
 * 触发后做什么 ---> function () {} ---> 这个事件的处理函数
*/

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
	console.log('你点击了 div')
}

当我们点击 div 的时候, 就会执行事件处理函数内部的代码
每点击一次, 就会执行一次事件处理函数

常见的事件 (了解)

事件分类
- 浏览器事件
- 鼠标事件
- 键盘事件
- 表单事件
- 触摸事件

浏览器事件

load: 页面全部资源加载完毕
scroll: 浏览器滚动的时候触发
...

鼠标事件

click: 点击事件
dblclick: 双击事件
contextmenu: 右键事件
mousedown: 鼠标左键按下事件
mouseup: 鼠标左键抬起事件
mousemove: 鼠标移动
mouseover: 鼠标移入事件
mouseout: 鼠标移出事件
mouseenter: 鼠标移入事件
mouseleave: 鼠标移出事件
...

键盘事件

keyup: 键盘抬起事件
keydown: 键盘按下事件
keypress: 键盘按下在抬起事件
...

表单事件

onfocus: 输入框获取焦点
onblur: 输入框失去焦点
change: 表单内容改变事件
input: 表单内容输入事件
...

触摸事件

touchstart: 触摸开始事件
touchend: 触摸结束事件
touchmove: 触摸移动事件
...

事件对象

什么是事件对象
- 当触发一个事件以后, 对该事件的一些描述信息
- 比如: 点击的位置坐标是什么, 触发键盘事件时按的那个按钮
每一个事件都会有一个对象的对象来描述这些信息, 我们就把这个对象叫做 事件对象
浏览器给了我们一个 黑盒子, 叫做 window.event, 就是对事件信息的所有描述
- 比如点击事件, 我们可以通过 event 对象知道我们点击了那个位置

oDiv.onclick = function () {
	console.log(window.event.X轴坐标点信息)
	console.log(window.event.Y轴坐标点信息)
}

但这东西有兼容性问题, 在低版本IE里很好用, 但是在高版本IE和Chrome 里不好使了
所以我们需要换一个方式来获取, 就是在每一个事件处理函数的形参位置, 默认第一个就是 事件对象

oDiv.onclick = function (e) {
	console.log(e.X轴坐标点信息)
	console.log(e.Y轴坐标点信息)
}

综上所述, 我们以后在每一个事件里, 都采用兼容写法

oDiv.onclick = function (e) {
	e = e || window.event
	console.log(e.X轴坐标点信息)
	console.log(e.Y轴坐标点信息)
}

点击事件的光标点获取

我们点击事件的坐标点都不是一堆, 所以要有一个相对的坐标系
例如:
- 相对于事件源(就是我们点击的那个元素)
- 相对于页面
- 相对于浏览器窗口
因为这些都不一样, 所以我们获取的方式也不一样

相对于事件源

offsetX 和 offsetY
相对于我们点击的元素的边框内测开始计算

* {
	margin: 0;
	padding: 0;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.offsetX)
	console.log(e.offsetY)
}

相对于浏览器窗口你点击的坐标点

clientX 和 clientY
相对于浏览器窗口来计算的, 不管你页面滚动到什么情况, 都是根据窗口来计算坐标

* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.clientX)
	console.log(e.clientY)
}

相对于页面你点击的坐标点

pageX 和 pageY
是相对于整个页面的坐标点, 不管有没有滚动, 都是相对于页面拿到的坐标点

* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.pageX)
	console.log(e.pageY)
}

键盘事件

键盘事件中最主要做两件事
- 判断点击的是那个按键
- 有没有组合按键, 比如 ctrl + c; ctrl + v
我们先要明确, 不是所有的元素都可以绑定键盘事件
- 事件有一个关键的东西, 就是由谁触发的
- 通常 div 这种标签是无法触发键盘事件的, 键盘事件一般都只能给页面上选中的元素(表单元素) 和 document 来绑定键盘事件

document.onkeyup = function () {}
oInpput.onkeyup = function () {}

确定按键

键盘的每一个按键都有一个自己的编码
我们可以通过 事件对象.keyCode 或者 事件对象.which 来获取

document.onkeyup = function (e) {
	e = e || window.event

	var keyCode = e.keyCode || e.which

	console.log(keyCode)
}

组合按键

组合按键最主要的就是 alt / shift / ctrl
所以在点击某一按键的时候判断一下这三个键有没有按下, 有就是组合键, 没有就是没有组合
事件对象给我们提供三个属性
- altKey / shiftKey / ctrlKey
- 三个键按下时会得到 true, 否则为 false

document.onkeyup = function (e) {
	e = e || window.event
	keyCode = e.keyCode || e.which

	if (e.altKey && keyCode ===65) {
		console.log('按下组合键 alt 和 a')
	}
}

事件的绑定方式

我们现在给一个注册事件都是使用 onXXX 的方式
但是这种方式不是很好, 只能给一个元素注册一个事件, 如果写了第二个, 那么第一个会被覆盖

oDiv.onclick = function () {
	console.log('第一个事件')
}
oDiv.onclick = function () {
	console.log('第二个事件')
}

我们这种绑定方式, 只会执行第二个, 第一个就没了
如果想要两个都存在, 我们可以使用事件监听的方式去给元素绑定事件
使用 addEventListener 的方式添加
- 在 IE 中要使用 attachEvent

事件监听

addEventListener (非IE7 8 下使用)

语法: 元素.addEventListener('事件类型', 事件处理函数, 冒泡还是捕获)

oDiv.addEventListener('click', function () {
	console.log('我是第一个事件')
}, false)
oDiv.addEventListener('click', function () {
	console.log('我是第二个事件')
}, false)

点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序执行
先打印 我是第一个事件, 然后打印 我是第二个事件
注意: 事件类型不要写 on, 点击事件就是 click, 不是 onclick

attachEvent (IE 7 8 下使用)

语法: 元素.attachEvent('事件类型', 事件处理函数)

oDiv.attachEvent('click', function () {
	console.log('我是第一个事件')
})
oDiv.attachEvent('click', function () {
	console.log('我是第二个事件')
})

点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序倒叙执行
先打印 我是第二个事件, 然后打印 我是第一个事件
注意: 事件类型需要要写 on, 点击事件就是 onclick

两个方式的区别

注册事件的时候事件类型参数的书写
- addEventListener: 需要写 on
- attachEvent: 不需要写 on
参数个数
- addEventListener: 一般是三个常用参数
- attachEvent: 两个参数
执行顺序
- addEventListener: 顺序注册, 顺序执行
- attachEvent: 顺序注册, 倒叙执行
适用浏览器
- addEventListener: 非 IE 7 8 的浏览器
- attachEvent: IE 7 8浏览器

进制转换(了解)与保留小数(掌握)

十进制转换为其他进制

十进制数组.toString(其他进制的数)

var num = 100
num.toString(2) // 将 10 进制的 100, 转换为 2 进制的数, 得到了: '1100100'
num.toString(36) // 将 10 进制的 100, 转换为 36 进制的数, 得到了: '2s'

其他进制转换为十进制

var num = parseInt(数字, 将数字视为几进制的数字然后转换为10进制的数字)

var num = parseInt(100, 2)  // 将100视为2进制的数, 然后将其转换为十进制的数字, 得到了: 4
var num = parseInt(100, 16)  // 将100视为16进制的数, 然后将其转换为十进制的数字, 得到了: 256

保留小数 toFixed, 保留小数时四舍五入, 且返回的是字符串

var num = 100.123456789
var num1 = num.toFixed(2)   // 100.12
var num2 = num.toFixed(4)   // 100.1235

Date

Date 给我们提供了操作时间的一些方法, 是 JS 内置的一个对象

时间对象

时间对象的创建

语法: var timer = new Date()

不传参

默认返回当前时间

var timer = new Date()
console.log(timer)
// Fri Oct 07 2022 08:52:29 GMT+0800 (中国标准时间)

传参

可以获取到一个你传递进去的时间

var timer = new Date('2022-01-06 12:12:12')
console.log(timer)
// Thu Jan 06 2022 12:12:12 GMT+0800 (中国标准时间)

传递两个数字, 第一个为年, 第二个为月

var timer = new Date(2022, 00)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)

传递三个数字, 前两个不变, 第三个表示该月份的第几天, 从1到31

var timer = new Date(2022, 00, 31)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Mon Jan 31 2022 00:00:00 GMT+0800 (中国标准时间)

传递四个数字, 前三个不变, 第四个表示当天的几点, 0-23

var timer = new Date(2022, 00, 31, 23)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Mon Jan 31 2022 23:00:00 GMT+0800 (中国标准时间)

传递五个数字, 前四个不变, 第五个为该小时的多少分钟, 0-59

var timer = new Date(2022, 00, 31, 23, 59)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Mon Jan 31 2022 23:59:00 GMT+0800 (中国标准时间)

传递六个参数, 前五个不变, 第六个表示该分钟的多少秒, 0-59

var timer = new Date(2022, 00, 31, 23, 59, 59)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)

传递字符串的形式

console.log(new Date('2019'))   // Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)

console.log(new Date('2019-02'))   // Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)

console.log(new Date('2019-02-28')) // Thu Feb 28 2019 08:00:00 GMT+0800 (中国标准时间)

console.log(new Date('2019-02-28 13:')) // Thu Feb 28 2019 13:00:00 GMT+0800 (中国标准时间)
 
console.log(new Date('2019-02-28 13:13:')) // Thu Feb 28 2019 13:13:00 GMT+0800 (中国标准时间)
 
console.log(new Date('2019-02-28 13:13:13')) // Thu Feb 28 2019 13:13:13 GMT+0800 (中国标准时间)

将日期对象格式化成指定内容

我们得到的时间字符串是: Thu Feb 28 2019 13:13:13 GMT+0800 (中国标准时间)
我们得到这个日期中是那年或者那天, 需要靠截取字符串的形式得到
但是现在 JS 为我们提供了一系列的方法来得到里面的指定内容

getFullYear

得到指定字符串中的那一年

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getFullYear()) // 2022

getMonth

得到指定字符串中的那一月, 月的计数从 0 开始

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMonth()) // 0

getDate

得到指定字符串中的那一日

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDate()) // 31

getHours

得到指定字符串的那小时

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getHours()) // 23

getMinutes

得到指定字符串中的那分钟

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMinutes()) // 59

getSeconds

得到指定字符串中的那秒钟

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getSeconds()) // 59

getDay

获取当前日期是一周中的第几天(周日是0, 周六是6)

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDay()) // 1

getTime

按照格林威治时间计算从1970 年 1 月 1 日 0 时 0 分 0 秒到现在(或指定日期)的毫秒数

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getTime()) // 1554681622000

设置相关

setFullYear()

语法: 时间对象.setFullYear(年份信息)
作用: 修改该时间对象内的年份信息

var time = new Date()
timer.setFullYear(2008)
console.log(timer.getFullYear())

setMonth()

语法: 时间对象.setMonth(月份信息)
作用: 修改该时间对象内的月份信息

var time = new Date()
timer.setMonth(2)
console.log(timer.getMonth())

setDate()

语法: 时间对象.setDate(日期信息)
作用: 修改该时间对象内的日期信息

var time = new Date()
timer.setDate(4)
console.log(timer.getDate())

setHours()

语法: 时间对象.setHours(小时信息)
作用: 修改该时间对象内的小时信息

var time = new Date()
timer.setHours(12)
console.log(timer.getHours())

setMinutes()

语法: 时间对象.setMinutes(分钟信息)
作用: 修改该时间对象内的分钟信息

var time = new Date()
timer.setMinutes(45)
console.log(timer.getMinutes())

setSeconds()

语法: 时间对象.setSecond(秒钟信息)
作用: 修改该时间对象内的秒钟信息

var time = new Date()
timer.setSeconds(20)
console.log(timer.getSeconds())

setMilliseconds()

语法: 时间对象.setMilliseconds(毫秒信息)
作用: 修改该时间对象内的毫秒信息

var time = new Date()
timer.setMilliseconds(857)
console.log(timer.getMilliseconds())

setTime()

语法: 时间对象.setTime(毫秒信息)
作用: 使用时间戳信息直接定位时间对象

var time = new Date()
timer.setTime(1440004004531)
console.log(timer)

定时器

两种定时器的介绍和作用 ( setTimeout / setInterval )
- setInterval 计时器, 每间隔固定的时间执行一次语法: setInterval(函数, 数字) 函数: 每间隔多少时间执行的代码数字: 间隔时间, 单位是毫秒
- setTimeout 倒计时器, 在指定时间到达后, 执行一次
  - 语法: setTimeout(函数, 数字) 函数: 一段时间后执行的代码数字: 间隔时间, 单位是毫秒
定时器的返回值及意义
- 返回值不区分定时器种类, 用于表示你这个定时器是页面中的第几个定时器
- 作用: 用来关闭定时器
关闭定时器
- 不区分定时器种类, 只要给出正确的定时器返回值就可以关闭
- 语法:
  - clearTimeout(定时器返回值)
  - clearInterval(定时器返回值)

简单的代码异步执行机制

什么是非异步执行代码
- 按照从上到下的顺序, 从左到右的顺序, 依次执行每一行代码
- 上一行代码没有执行完毕, 不会执行下一行代码
什么是异步执行代码
- 当代码遇到异步任务的时候, 会把该代码放在异步队列内等待
- 所有的同步代码执行完毕后, 再开始执行异步队列内的代码
什么是异步任务
- 两种定时器都是异步任务
- 可以理解为, 限制性定时器外面的代码, 然后执行定时器里边的代码

BOM/DOM

BOM 和 DOM

BOM 的概念和常用 API

获取浏览器窗口的尺寸

浏览器的弹出层

浏览器的地址信息

location.href

location.reload

浏览器的历史记录

history.back

history.forward

浏览器的版本信息(了解)

浏览器的 onload 事件

浏览器的 onscroll 事件

浏览器的滚动距离

scrollTop

scrollLeft

浏览器的本地存储

本地存储的区别 (面试必问)

DOM 的基本概念及操作

获取非常规元素

获取常规元素

getElementById

getElementsByClassName

getElementsByTagName

querySelector

querySelectorAll

操作属性

DOM (下)

DOM 节点

获取节点

childNodes: 获取某一节点下 所有的子一级 节点

children: 获取某一节点下所有的子一级 元素节点

firstChild: 获取某一节点下子一级的 第一个节点

lastChild: 获取某一节点下子一级的 最后一个节点

firstElementChild: 获取某一节点下子一级的 第一个元素节点

lastElementChild: 获取某一节点下子一级的 最后一个元素节点

nextSibling: 获取某一个节点的 下一个兄弟节点

previousSibling: 获取某一个节点的 上一个兄弟节点

nextElementSibling 获取某一个节点的 下一个元素节点

previousElementSibling 获取某一个节点的 上一个元素节点

parentNode: 获取某一个节点的 父节点

attributes: 获取某一个 元素节点 的所有 属性节点

节点属性

nodeType 获取节点类型, 用数字表示

nodeName 获取节点的节点名称

nodeValue 获取节点的值

操纵 DOM 节点

创建节点

向页面中加入一个节点

删除页面中的某一个节点

修改页面中的某一个节点

克隆页面中的某一个节点

获取元素的非行内样式

getComputedStyle (非IE使用)

currentStyle (IE使用)

获取元素偏移量

offsetParent

offsetLeft / offsetTop

获取元素尺寸

offsetWidth 和 offsetHeight

clientWidth 和 clientHeight

注意

获取浏览器窗口尺寸

什么是 事件

常见的事件 (了解)

浏览器事件

鼠标事件

键盘事件

表单事件

触摸事件

事件对象

点击事件的光标点获取

相对于事件源

相对于浏览器窗口你点击的坐标点

相对于页面你点击的坐标点

键盘事件

确定按键

组合按键

事件的绑定方式

childNodes: 获取某一节点下所有的子一级节点

children: 获取某一节点下所有的子一级元素节点

firstChild: 获取某一节点下子一级的第一个节点

lastChild: 获取某一节点下子一级的最后一个节点

firstElementChild: 获取某一节点下子一级的第一个元素节点

lastElementChild: 获取某一节点下子一级的最后一个元素节点

nextSibling: 获取某一个节点的下一个兄弟节点

previousSibling: 获取某一个节点的上一个兄弟节点

nextElementSibling 获取某一个节点的下一个元素节点

previousElementSibling 获取某一个节点的上一个元素节点

parentNode: 获取某一个节点的父节点

attributes: 获取某一个元素节点的所有属性节点

什么是事件

attachEvent (IE 7 8 下使用)