前端学习day50 to day54：2-JS页面交互之DOM与BOM

1.节点类型

        ⑴childNodes：获取一个元素的所有子节点

        ⑵节点类型：DOM包含了多种节点，我们通常获取的标签，只是节点中的一种：

节点名称	nodeType
元素节点	1
属性节点	2
文本节点	3
CDATA节点	4
实体引用名称节点	5
实体名称节点	6
处理指令节点	7
注释节点	8
文档节点	9
文档类型节点	10
文档片段节点	11
DTD声明节点	12

        重点理解前三种节点即可

        每个节点有nodeName属性、文本节点和属性节点的nodeValue属性。

       ⑶节点获取的API：

        常用：children、parentNode、offsetParent

        不常用：firstElementChild、firstChild、lastElementChild、lastChild、nextElementSibling、nextSibling、previousElementSibling、 previouSibling          sibling [ˈsɪblɪŋ] 兄弟姐妹;兄;弟;姐;妹

2.创建、添加、删除节点

        ⑴创建节点：

        createElement：创建一个元素节点；

        createTextNode：创建一个文本节点；

        createDocumentFragment：创建一个文档碎片，先将多个节点整合到这里面再统一添加。  fragment [ˈfræɡmənt , fræɡˈment] 碎片;片段

        ⑵添加节点：

        appendChild：在元素的最后添加一个子节点；

        insertBefore：在元素某个子节点之前添加新子节点，第一个参数为新节点，第二个参数为已存在的子节点。

        ⑶替换节点：

        replaceChild：用新节点替换某个子节点，第一个参数为新节点，第二个参数为已存在的某个子节点。

        ⑷删除节点：

        removeChild：删除元素的某个子节点。

3.BOM

BOM（Browser Object Model）浏览器对象模型，提供了一些跟浏览或窗口相关的操作。我们学过的弹窗、日志、定时器就属于BOM的一部分。

4.重要事件

        ⑴onresize

        浏览器窗口大小发生改变的时候触发。

        ⑵onscroll               scroll [skrəʊl] 滚屏;滚动

        页面滚动的时候触发，也可以用于某个元素节点上。

        ⑶onfocus onblur              blur  [blɜː(r)] 使)变得模糊不清;(使)视线模糊;(使)看不清;(使)难以区分

        进入页面和离开页面时触发，也可以用于其他能获得焦点的元素节点上。

        ⑷open() close()

        打开与关闭窗口

5.重要对象

        ⑴location

        获取/设置 URL相关的属性。

        ⑵history

        操作当前标签页的历史，类似于点击浏览器地址栏左侧的前进和后退按钮。

        history.go(number) -- 前进或后退指定的页面数。

        history.back() -- 后退一页。

        history.forward() -- 前进一页。

        ⑶navigator

        获取浏览器相关的信息。

        ⑷Screen

        获取用户显示屏幕的各种信息。

        .width .height 获取显示器分辨率。

        .availWidth .availHeight 获取除去任务栏的大小。

6.各种尺寸获取

⑴可视区宽高

        ①窗口宽高

        window.innerWidth window.innerHeight

        包含了滚动条的宽度和浏览器本身的边框宽度（低版本IE不支持）。

        ②内容区宽高

        document.documentElement.clientWidth        client [ˈklaɪənt] 客户;当事人;委托人;

        document.documentElement.clientHeight

        不包含滚动条等。

⑵元素的各种宽高

        ①client

        clientWidth clientHeight

        宽(高)+padding。

        ②offset                 offset [ˈɒfset] 开端;出发;平版印刷;抵消;补偿

        offsetWidth offsetHeight

        宽(高)+padding+border。

        ③scroll

        scrollWidth scrollHeigh

        内容的实际宽高，当内容没超出相当于client，当内容超出之后，会得到包括超出内容的实际高度，即使加了超出隐藏，也还是会得到内容所占的实际宽高。

⑷元素的各种距离

        ①offset

        offsetLeft offsetTop

        获取左边（上边），到定位父级的左边（上边）的距离。

        ②getBoundingClientRect

        返回一个对象，包含了元素各边到窗口的距离，返回的结构类似于：{top:100,left:20,bottom:500,right:890}。

⑸滚动距离

        ①页面滚动宽高

        doucment.documentElement.scrollTop

        document.documentElement.scrollLeft

        ②页面的滚动宽（高）。此属性可以赋值，能让页面滚动到指定的位置。

        设置滚动距离也可以使用window.scrollTo()。

        ③元素滚动宽高

        元素节点.scrollTop 元素节点.scrollLeft

7.其他注意事项

        ⑴cloneNode(true)：深复制，里面的所有节点都会被会复制

        ⑵cloneNode(false)：浅复制，只复制外层元素节点