JS的BOM和DOM的简介与使用方法

BOM

浏览器对象模型,没有规范

控制前进\后退\刷新\打印.....

window对象是BOM的核心, window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对象与之对应.

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的

window对象的属性对象:

 var oBtn1=document.getElementById("btn1")
        var oBtn2=document.getElementById("btn2")
        var oBtn3=document.getElementById("btn3")
        oBtn1.οnclick=function(){
            open("http://www.usc.edu.cn")        //打开新页面
        }
        oBtn2.οnclick=function(){
            close()            //关闭页面
        }
        oBtn3.οnclick=function(){
            print()            //打印
        }
        console.log(window.location);                浏览器地址

history(重要):

历史对象,包含窗口的浏览历史，可以实现后退

back() forword() go()---1/0/-1

pushState replaceState state onpopstate事件

location(重要):

包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面

protocol 协议:

http:普通 不安全 端口号:80

https:加密 安全 端口号:443

screen:

包含有关客户端显示屏幕的信息

navigator:

导航对象, 包含所有有关访问者浏览器的信息

userAgent 获取操作系统和浏览器的版本信息

在请求头里也有 user-Agent,服务器就知道当前用户的浏览器与操作系统的相关信息

frames:

框架对象，可以获取页面框架内容

document(核心):

文档对象 (DOM) DOM是BOM的分支

获取页面元素的方法

dir查看对象的详细信息

1.通过id获取页面元素

document.getElementById("")

2.通过类名获取页面元素

返回的是集合

document.getElementsByClassName()

3.通过标签名称获取页面上的元素

返回一个集合

document.getElementsByTagName()

4.根据name属性获取页面元素

返回集合

document.getElementsByName()

最新选择器

5.获取指定条件的单个元素

document.querySelector() //始终返回一个,也会是第一个

6.获取页面所有指定条件的元素

document.querySelectorAll() //返回一个集合,但是有foreach()方法

节点的组成

1.元素节点 nodeType 1

2.属性节点 nodeType 2

3.文本节点 nodeType 3

DOM

同步

按照顺序一步一步的执行

异步:

与同步是相对的,不按照顺序执行(目前而言异步有回调函数)

回调函数:把一个函数当做另外一个函数的参数,在另一个函数内部,被执行和传递参数

由于js引擎是单线程,异步通常需要回调函数来解决

宏任务 和 微任务

1. 宏任务---script标签,事件,定时器,延时器

script标签是最高级的宏任务,先执行script标签里的同步代码,按顺序执行,其他的宏任务,微任务放在队列里之后执行

先执行宏任务,再执行微任务,当执行完第一个微任务后,是否还有微任务,直到当前所有微任务执行完,才执行下一个宏任务...

1. 微任务---Promise.nexiTike

DOM节点分类

元素节点 nodeType:1 nodeValue:null

属性节点 nodeType:2 nodeValue:元素类型(div....)

文本节点 nodeType:3 nodeValue:内容

属性操作

1. 属性值 attributes
2. 获取属性 getAttribute()
3. 设置属性 setAttribute()
4. 移除属性 removeAttribute()

getAttribute,setAttribute,removeAttribute不建议操作动态属性--checked,selected,disable 会出现bug

childNodes遵循W3C规范,包含元素节点和文本节点

children由微软推出,在IE6/7/8下注释会被当成节点,childElementCount获取子元素个数

DOM节点操作

parentNode 父节点

childNodes 子节点 一个集合

nextSibling和nextElementSibling 后一个兄弟

previousSibling和previousElementSibling 前一个兄弟

firstElementChild,lastElementChild 第一个/最后一个元素孩子 高版本浏览器识别

firstChild,lastChild 低版本浏览器(IE)识别

解决版本兼容问题 .firstElementChild|| .firstChild .lastElementChild|| .lastChild

createElement() 创建元素节点

createTextNode() 创建文本节点

createComment() 创建注释节点

classList 类集合列表 add()增加,remove()移除,contains()包含,toggle()切换

父节点.appendChild(子节点) 往父元素插入最后位置的子元素

insertBefore(新的元素,参照位置) 在某个元素前插入新元素

insertBefore( ,null)等价于appendChild()往父元素最后的位置添加子元素

父元素.replaceChild(新的元素,要替换的元素) 替换

父元素.removeChild(子元素) 删除

子元素.remove() 删除

浅克隆 只克隆元素,不复制里面的内容 cloneNode(false) 默认为false

深复制 克隆元素及里面的内容 cloneNode(true)