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的属性, 然后直接把效果展示在页面上

innerHTML

获取元素内部的 HTML 解构

<div>
    <p>
        <span>hello</span>
    </p>
</div>
var div = document.querySelector('div')
console.log(div.innerHTML)    // <p><span>hello</span></p>

设置元素内部的 HTML 解构

<div></div>
var div = document.querySelector('div')
div.innerHTML = '<p><span>hello</span></p>'

innerText

获取元素内部的文本(只能获取到文本, 获取不到 html 标签)

<div>
    <p>
        <span>hello</span>
    </p>
</div>
var div = document.querySelector('div')
console.log(div.innerHTML)    // hello

设置元素内部的 HTML 解构

<div></div>
var div = document.querySelector('div')
div.innerHTML = '<p><span>hello</span></p>'

会把 '
hello
' 当作一段文本出现在 div 元素内, 而不会吧 p 解析成标签

getAttribute

获取元素的某个属性(包括自定义属性)

<div a="100" class="box"></div>

var div = document.querySelector('div')
console.log(div.getAttribute('a'))  // 100
console.log(div.getAttribute('calss'))  // box

setAttribute

给元素设置的一个属性(包括自定义属性)

<div></div>

var div = document.querySelector('div')
console.log(div.setAttribute('a', 100))
console.log(div.setAttribute('calss', box))

removeAttribute

直接移出元素的某个属性

<div a="100" class="box"></div>

var div = document.querySelector('div')
console.log(div.removeAttribute('calss'))

H5 自定义属性

在 H5 自定义属性中 data- 表示该属性是一个自定义属性
data- 以后的内容才是属性名
= 后面的内容才叫做属性值
每一个元素身上天生自带一个属性, 叫做 dataset, 是一个类似对象的数据结构
内部记录的是该元素身上所有 data- 开头的自定义属性
对于该元素 H5 自定义属性的操作, 就是对这个数据结构的操作(对象操作语法)

<div data-a="100" class="box"></div>

var oDiv = document.querySelector('div')
// 增
oDiv.dataset.age = 18
// 删
delete oDiv.dataset.a
// 查
console.log(oDiv.dataset.age)

style

专门用来个元素添加 css 样式的
添加的都是行内样式

<div></div>

var div = document.querySelector('div')
div.style.width = '100px'
div.style.hright = '100px'
div.style.backgroundColor = 'pink'

className

专门用来操作元素的类名

<div class='box'></div>

var div = document.querySelector('div')
console.log(div.className)  // box
div.calssName = 'ceshi'
console.log(div.calssName)  // ceshi

在设置的时候, 不管之前有没有类名, 都会全部被设置的值覆盖

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: 浏览器可视窗口的高度

JavaScript DOM和BOM

BOM 和 DOM

BOM 的概念和常用 API

获取浏览器窗口的尺寸

浏览器的弹出层

浏览器的地址信息

location.href

location.reload

浏览器的历史记录

history.back

history.forward

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

浏览器的 onload 事件

浏览器的 onscroll 事件

浏览器的滚动距离

scrollTop

scrollLeft

浏览器的本地存储

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

DOM 的基本概念及操作

获取非常规元素

获取常规元素

getElementById

getElementsByClassName

getElementsByTagName

querySelector

querySelectorAll

操作属性

innerHTML

innerText

getAttribute

setAttribute

removeAttribute

H5 自定义属性

style

className

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: 获取某一个元素节点的所有属性节点