JS笔记-BOM、DOM

BOM是什么？

Browser Object Model  浏览器对象模型  浏览器操作内容都是在对象的方法操作，也就操作浏览器的能力

顶级对象是 window

在全局中定义的变量其实就是在window身上作为属性，this、top、name等属性都是指向window的

获取浏览器窗口的尺寸

innerHeight 获取浏览器窗口的高度(包含滚动条)
innerWidth  获取浏览器窗口的宽度(包含滚动条)

使用：
window.innerHeight
window.innerWidth

浏览器的弹出层

1. alert()    提示弹框    没有返回值     
2. confirm()  询问弹窗  
返回值：确认--true、取消--false
3. prompt()   提示输入弹窗 
返回值：取消返回null
       确定返回输入的内容，不写返回空字符串

浏览器的地址信息

location对象表示用来存储浏览器地址栏内的信息的

1. location.href  
浏览器访问的完整路径 会将地址中的中文转为url中的编码格式
也可以实现浏览器跳转到指定url地址

2. location.reload()  重新加载页面 不要写在全局中 会导致一直刷新

3. location中的其他属性
    hash 地址中#后面的字符串
    host 访问地址主机的地址
    search ?后面的内容

浏览器的历史记录

history对象表示用来存储历史记录信息的

history对象中的length属性，1表示没有历史记录
1. history.back()     回到历史记录的上一个页面 如果没有不会回退

2. history.forward()  去到下一个页面  前提有过回退操作不然当前为最后一个页面 不生效

3. history.go(参数)   去到历史记录中指定的页面
   history.go(-1);    相当于history.forward()
   history.go(1);     相当于history.back()

浏览器的版本信息

navigator对象表示用来获取浏览器信息的

1. navigator.userAgent   获取浏览器整体信息

2. navigator.appName     获取浏览器的名称  不一定有效

3. navigator.appVersion  获取浏览器的版本信息  不一定有效

4. navigator.platform    获取当前计算机的OS   不一定有效

浏览器事件

1.  scroll    浏览器的滚动事件 当滚动条动起来的时候触发的事件

scrollTop    获取页面垂直滚动的距离
两个获取方式：
1. document.body.scrollTop              当页面没有使用DOCTYPE声明的时候可以获取到
2. document.documentElement.scrollTop   当页面有使用DOCTYPE声明的时候可以获取到

scrollLeft   获取页面水平卷去的距离
两个获取方式：
1. document.body.scrollLeft             当页面没有使用DOCTYPE声明的时候可以获取到
2. document.documentElement.scrollLeft  当页面有使用DOCTYPE声明的时候可以获取到

eg：
window.onscroll = function () {
  console.log('浏览器滚动了')
  console.log(document.documentElement.scrollTop)
  console.log(document.documentElement.scrollLeft)
}

2.  load     浏览器的页面加载事件 当浏览器的页面中的内容（页面结构、文本、图片、CSS等资源）全部加载完毕后会触发该事件

window.onload = function () {
    // 这个函数会在页面加载完毕以后在执行
    // 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
    // 编写函数等代码块
}

3.  resize     浏览器的页面可视化窗口变化事件  当浏览器窗口大小变化的时候会触发该事件

eg:
window.onresize = function(){
    console.log(window.innerWidth);
    console.log(window.innerHeight);
}

定时器

JS中有两种定时器，倒计时定时器和间隔定时器   返回值返回每个定时器的标识id

定时是异步执行的

1.  倒计时定时器

作用： 在被设置的规定时间执行函数一次
语法： setTimeout(函数，时间)  时间单位为毫秒
返回值： 定时器标识id

eg：
var timerId = setTimeout(function(){
    console.log("我只执行一次....");
},3000);

2.  间隔定时器

作用： 每一段时间就执行一次函数
语法： setInterval(函数，时间) 时间单位为毫秒
返回值： 定时器标识id

eg：
var timerId = setInterval(function(){
    console.log("我每3秒执行一次....");
},3000);

3.  清除定时器

clearInterval(定时器标识)   关闭对应的定时器
clearTimeout(定时器标识)    关闭对应的定时器


eg：
var timerId = setInterval(function(){
    console.log("我每3秒执行一次....");
},3000);
clearInterval(timerId);


var timerId = setTimeout(function () {
    console.log("我只执行一次....");
}, 3000);
clearTimeout(timerId);



原则上是 
- clearTimeout  关闭 setTimeout
- clearInterval 关闭 setInterval
但是其实是可以通用的，他们可以混着使用

DOM是什么？

Document Object Model  文档对象模型 操作页面中的节点，也就是操作html标签的一些能力

顶级对象是 document（浏览器内置对象，存储着用来操作元素的方法）  上一级是 window 对象

页面中的标签，我们通过JS获取到以后，就把这个对象叫做DOM对象

DOM中的获取方法

1. 通过id获取元素

语法：
document.getElementById(标签的id);
返回值：对应的标签元素，如果没有这个标签返回null

2. 通过类名获取元素

语法： 
document.getElementsByClassName(类名);
返回值：对应类名的标签组成的伪数组，如果没有类名返回空的伪数组

3. 通过标签名获取元素

语法： 
document.getElementsByTagName(标签名);
返回值：返回一个伪数组，里面是匹配的标签，如果没有返回空的伪数组

4. 通过name属性获取元素

语法：
document.getElementsByName(name属性值);
返回值：匹配的所有元素的一个伪数组，如果没有则返回空的伪数组

5. 通过选择器获取元素

语法：
document.querySelector(选择器);  // 选择器和CSS中写法一致
返回值：匹配的第一个元素，如果没有返回null

6. 通过选择器获取元素

语法：
document.querySelectorAll(选择器);
返回值：匹配的所有元素的一个伪数组，如果没有则返回空的伪数组

DOM中的操作方法

1. 操作标签的内容

获取的对象.innerText  获取设置标签的文本   (不识别html标签)
获取的对象.innerHTML  获取设置标签的超文本 (识别html标签)
获取的对象.xxxxxxxxx  = "值";     设置会覆盖性设置

2. 操作标签属性

获取的对象.getAttribute(属性名)         获取标签的属性值
获取的对象.setAttribute(属性名,属性值)   设置标签的属性
获取的对象.removeAttribute(属性名)      移除标签的属性

3. 操作标签的CSS样式

获取的对象.style          获取到标签的所有行内样式
获取的对象.style.样式名    获取设置标签的行内样式值

4. 操作标签的类名

获取的对象.className              获取设置标签的类名
获取的对象.className  = "值";     设置会覆盖性设置

DOM节点

是什么？ 

DOM就是html结构中一个个节点组成，标签是一个节点，文本内容、注释、空格都是节点。

节点的分类

1. 文本节点  html中的文本内容和空格换行   通过innerText获取到的就是元素的文本节点
2. 元素节点  html标签                  通过getElementBy..获取到的都是元素节点
3. 属性节点  html标签中的属性           通过getAttribute获取到的就是元素的属性节点

获取节点的方法

1. childNodes  获取某一个节点下的所有子节点
语法： 对象.childNodes
返回值：子节点的伪数组

2. children    获取元素的所有子元素节点
语法： 对象.children
返回值：子元素节点的伪数组

3. firstChild  获取元素的子节点的第一个节点
语法： 对象.firstChild

4. lastChild   获取元素的最后一个子节点
语法： 对象.lastChild   

5. firstElementChild   获取元素的第一个子元素节点
语法： 对象.firstElementChild

6. lastElementChild    获取元素的最后一个子元素节点
语法： 对象.lastElementChild

7. nextSibling         获取元素的下一个兄弟节点
语法： 对象.nextSibling

8. previousSibling     获取元素的上一个兄弟节点(包含元素节点、文本节点、注释节点)
语法： 对象.previousSibling

9. nextElementSibling  获取元素的下一个兄弟元素节点
语法： 对象.nextElementSibling

10. previousElementSibling   获取元素的上一个兄弟元素节点(只包含元素节点)
语法： 对象.previousElementSibling

11. parentNode    获取元素的父节点元素
语法： 对象.parentNode

12. attributes    获取元素的所有属性节点
语法： 对象.attributes    
返回值：属性节点伪数组

节点属性

1. 获取节点类型
语法：节点对象.nodeType

2. 获取节点名称
语法：节点对象.nodeName

3. 获取节点值
语法：节点对象.nodeValue


节点类型有一下四种：
1. 元素节点  用1表示
2. 属性节点  用2表示
3. 文本节点  用3表示
4. 注释节点  用8表示

节点名称
1. 元素节点的名称为  大写的标签名
2. 属性节点的名称为  属性名
3. 文本节点的名称为  #text
4. 注释节点的名称为  #comment

节点的值
1. 元素节点的值为   null
2. 属性节点的值为   属性值
3. 文本节点的值为   文本内容
4. 注释节点的值为   注释内容

操作DOM节点

1. createElement     创建一个元素节点
语法：document.createElement(标签名)
返回值：可用的DOM元素节点

2. createTextNode    创建一个文本节点
语法：document.createTextNode(内容)
返回值：返回一个文本节点

3. appendChild       向元素中添加元素
语法：元素A.appendChild(节点B)    将节点B追加到元素A里面的末尾

4. insertBefore      向元素的前面添加一个元素
语法：元素A.insertBefore(节点B,元素C)   将节点B添加到元素A里面的元素C的前面

5. removeChild       移除页面元素
语法：元素A.removeChild(元素B)     将元素A中的元素B移除

6. replaceChild      修改元素，替换元素
语法：元素A.replaceChild(节点B,节点C)   用节点B替换元素A中的节点C

7. cloneNode         克隆
语法: 元素A.cloneNode(参数)    参数默认是布尔值false ,如果是true则克隆子元素
返回值：克隆复制的元素

获取元素的样式

1. 元素对象.style.样式属性 
该方法只能获取到元素行内样式(标签内的style)

2. getComputedStyle   全能获取样式方法，IE8以下不兼容
语法：window.getComputedStyle(元素，参数2).样式名   参数不写默认 null，获取元素的样式值

参数2这个位置 after/before  可以获取元素伪类的样式

3. curentStyle   可以兼容IE8一下的浏览器
语法：元素对象.curentStyle.样式

获取元素的偏移量

是什么？ 就是元素在页面上的什么位置

// 获取元素的尺寸  内容宽高 + padding + border
offsetWidth 宽 
offsetHeight 高
语法：元素对象.offsetWidth  / 元素对象.offsetHeight

// 获取元素的偏移量 
offsetLeft 获取左边的偏移量
offsetTop  获取上边的偏移量
语法：元素对象.offsetLeft   / 元素对象.offsetTop  

如果元素没有定位，则获取的是相对于页面的左上角(元素边框外侧到页面内侧的距离)
如果元素有定位，则获取的是相对父元素左上角的定位(元素边框外侧到定位父级边框内侧的距离(其实就是我们写的 left 和 top 值))