Dom，Bom的用法

DOM

DOM 全称document object model 文档对象模型 操作HTML

HTML文档有HTML+css组成 DOM 利用js操作HTML+css的

操作元素节点 element Element 元素节点对象

查 获取元素节点的方式

通过选择器获取

div就是元素的节点(任意的标签都是元素节点)

id就是属性节点（任意的属性都是属性节点）

你好就是文本节点（任意的文本都是文本节点）

<div id="box" class="content" name="divName">你好</div>

var divName = document.getElementsByName('divName')
​
console.log(divName);
​
console.log(divName[0]);

复合选择器

里面的参数为string类型的选择器，返回第一个匹配选择器的元素，返回的是一个element

var selectDiv = document.querySelector('div')
​
console.log(selectDiv);
​
返回所有匹配选择器内容 接收的是一个nodeList
​
var selectAll = document.querySelectorAll('.content')
​
console.log(selectAll);
​
console.log(selectAll[0]);

操作属性节点

attribute Attr 属性节点对象 设置属性节点

element内置的属性 element.属性名

获取id值为box的元素
var box = document.getElementById("box")

className

返回class名字，同样我们可以进行赋值，set元素属性

console.log(box.className);
​
设置class属性名
​
box.className='jack'

id

获取id名字

console.log(box.id);
​
box.id = 'rose'

title

获取HTML里的标题名字

console.log(box.title);
​
box.title='刘德华'

style 样式操作

element.style.样式名

 给背景颜色赋值为红色
 
box.style.background='red'
​
获取背景颜色
​
console.log(box.style.background);

操作文本节点

Text文本节点对象 设置文本节点

innerText

获取显示文本，赋值就是设置对应的文本

console.log(box.innerText);//获取里面显示的文本（忽略标签）
​
box.innerText='睡了没'//覆盖之前写里面写的所有内容
​
box.innerText='<b>吃了没<b>'//设置文本 是不会解析里面的标签

innerHTML

获取显示的HTML内容，赋值就是设置对应的HTML内容

box.innerHTML = '<b>吃了吗<b>'//它会解析里面的b标签，显示为HTML加粗效果
console.log(box.innerHTML);//会将里面所有的HTML代码全部获取

Dom补充

// document.getElementById() //通过id获取 返回的是元素

// document.getElementsByClassName() //通过class获取 返回的是htmlCollection

// document.getElementsByTagName() //通过标签名获取 返回的是htmlCollection

// document.getElementsByName() //通过name属性获取 返回的是NodeList

// document.querySelector() //通过选择器获取第一个 返回的是元素

// document.querySelectorAll() //通过选择器获取所有的 返回的是NodeList

// 元素共有属性 赋值就是设置 不赋值就是获取

Bom

bom === borwer object model 浏览器对象模型

特点:

1.bom是进行浏览器操作的

2.bom里面是存在多个对象的

3.bom实际进行操作浏览器是使用多个对象里面的属性以及相关方法

4.bom没有规范 我们所讲的是bom的共有对象

Window常用的属性及方法

window.innerHeight 获取高度（浏览器窗口可视区域的高度）

window.innerWidth 获取宽度（浏览器窗口可视区域的宽度）

window.alert('你好') 提示窗 没有返回值

window.confirm('你确认要删除吗？') 弹交互窗口 点击确认返回true 点击取消返回false

window.prompt('请输入你要输入的号码') 弹出输入框 返回的是string

window.console.log('你好') == console.log('你好') 所以window. 可以省略

第一个参数是打开的位置url 第二个是打开的方式也可以是窗口的名字 第三个是其他的设置

window.open('http://www.baidu.com','百度','_parent,width=400,height=400,top=200,left=200')

关闭窗口 浏览器不允许

window.close() 关闭当前的窗口

window.print() 将页面进行打印

opener 表示父窗口 我打开的浏览器窗口和我本身的窗口对应的window对象不一致

opener.document.write("调用父窗口对象输出!")

定时器

window.setInterval(function(){

},2000)

延时器

window.setTimeout(function(){

},2000)

location和history+navigator

console.log(window.location) == console.log(location) 也可以window.

location的属性

location.hash 返回锚点 有就返回锚点值 没有就是空

location.host 主机地址 访问的地址 www.baidu.com /14.215.177.39

location.hostname 主机名 www.baidu.com

location.href 链接地址 // https://www.baidu.com

location.port 端口号 //默认的浏览器占用端口80 /地址栏没有显示端口就没有端口

location.protocol 协议名 https http（默认的）file协议

location.pathname 路径名 拿到访问地址后的路径地址/主机名或端口号后面的 资源路径地址

location.search 用来接收?传递值 获取?后面的信息

location.origin 跨域信息

通过地址栏来进行页面跳转 给href赋值

location.href = 'http://www.baidu.com'

通过assign方法来跳转页面 传入的参数是你需要跳转的页面

location.assign('http://www.taobao.com')

reload方法 重新加载

location.reload() //默认会从缓存中加载 （速度会更快）

location.reload(true) //去服务器端加载

跳转页面 他会移除当前页面在历史记录里面 历史记录只会存在一个就是跳转好的

替换本身的地址来完成跳转 同时删除本身的历史记录

location.replace('http://www.7k7k.com')

history

histroy是历史对象 保存历史页面

添加一个历史记录 第一个参数为数据 第二个参数为标题 第三个参数为url地址（可以省略）（必须要和本身具备相同的orgin值）

history.pushState('hello','hello')

替换state值 在对应的url

history.replaceState('world','world')

length属性 返回历史页面的个数

console.log( history.length)

状态值 没有存默认为null

console.log( history.state)

history.forward() 前进的方法

history.back() 后退的方法

history.go(2) 去任意历史页面 默认自己这页是0 -1 -2(后退) 1 2（前进）

应用:

function fn(){
            history.forward() //前进的方法
        }
        function fn1(){
            history.back() //后退的方法
        }
        function fn2(){
            // 默认自己这页是0 -1 -2(后退)   1 2（前进）
            history.go(2) //去任意历史页面
        }

navigator

navigator对象的属性

console.log(navigator.appName); //浏览器名称 console.log(navigator.appVersion); //浏览器版本 console.log(navigator.platform); //操作系统 //最新的浏览器已经全面放弃以上这些属性

navigator对象的属性 console.log(navigator.userAgent); //用户代理信息, 通过该属性可以获取浏览器及操作系统信息

close() 关闭浏览器

5秒后关闭浏览器

注意: 火狐浏览器不支持, 如要支持火狐浏览器, 则可以先open指定的页面,然后在该页面调用close()

print(): 调出打印对话框

5秒后关闭浏览器

setTimeout(function(){
      window.close();
      alert("窗口关闭");
}, 5000);

注意: 火狐浏览器不支持, 如要支持火狐浏览器, 则可以先open指定的页面,然后在该页面调用close()

总结

document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)

history(重要): 历史对象,包含窗口的浏览历史，可以实现后退

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

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

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

navigator: 导航对象, 包含所有有关访问者浏览器的信息(浏览器版本信息等 最新版本的浏览器是不支持的)