BOM和DOM第二部分

8.页面卷去的距离

语法 : 

document.documentElement.scrollTop    ---有文档声明的时候使用

document.body.scollTop   ---没有文档声明的时候

兼容写法:

var t = document.documentElement.scrollTop || document.body.scrollTop

9.短路运算

短路运算通常使用 || 和 &&

可以用于赋值-看看代码是否能进行倒最后(符号的右边),如果能进行倒右边,就会将右边的值赋值给变量,如果进行不到右边,就将左边的值赋值给变量

利用逻辑运算,查看左边的结果是否能决定整体的结果

var a = 1 ||  2               var a = null   ||   666       var a = 2  && 3      var a = false  &&  8

10.节点操作

利用ul举例    var ul = document.querySelector('ul')

1.根据标签之间的关系获取标签

获取所有的儿子 -- 父.children

console.log(ul.children)

获取第一个儿子   - 父.firstElementchild

获取最后一个儿子  -- 父.lastElementChild

获取父标签   儿子.parentElement

获取哥哥  -- 弟弟.previousElementSibling;

获取弟弟  -- 哥哥.nextElementSibling

2.创建标签

语法 :  document.createElement('标签名')

var b = document.createElement('b')            b.innerText = '加粗文本'

3.插入到文档中

给父追加一个子 - 将这个标签作为某个父标签的最后一个儿子

语法: 父.appendChild(子)

将标签放在某个父标签的某个子标签的前面

父.insertBefore(新的子,旧的子)

var i = document.createElement('i')     i.innerText = '文本倾斜'    ul.insertBefore(i,b)

4.替换标签

语法: 父.replaceChild(新,旧)

var u = document.createElement('u')     u.innerText = '下划线'   ul.replaceChild(u,i)

5.删除

父.removeChild(子)    ul.removeChild(u)

6.复制

标签.cloneNode()  --复制空壳   var  newu= u.cloneNode()

标签.cloneNode(true)  ---带内容复制   var  newu= u.cloneNode(true)

11.获取标签尺寸

不包含边框的大小

标签.clientWidth      

标签.clientHeight

var w1 = div.clientWidth     console.log(w1)

包含边框的大小

标签.offsetWidth    标签.offsetHeight

var w1 = div.offsetWidth     console.log(w1)

12.获取边框位置

标签.offsetLeft      标签.offsetTop

var l = div.offsetLeft

13.获取边框厚度

标签.clientLeft     标签.clientTop  -- 获取左边框和上边框厚度

console.log(div.clientLeft)

14.回流和重绘

浏览器的渲染过程:

html结构和css代码同时开始解析，html结构最终被解析成一棵dom树，css代码被解析成一个样式规则，dom树和样式规则合并成一棵渲染树，渲染树开始布局(计算标签的大小和位置)，绘画(涂颜色)，将页面显示出来