BOM与DOM介绍及相关方法

BOM与DOM介绍及相关方法

BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。

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

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

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

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

window对象是BOM的核心, window对象表示浏览器窗口的一个对象

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

window对象的属性对象:

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

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

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

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

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

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

window的方法及属性 可以省略window. 比如：window.alert()===alert()

console.log(window);  //window表示的是浏览器窗口

常用的属性及方法

console.log(window.innerHeight);   //获取高度（浏览器窗口可视窗口的高度）

console.log(window.innerWidth);    //获取宽度（浏览器窗口可视窗口的宽度)

弹窗方法

window.alert('你好')  //提示窗  没有返回值  window.可以被省略

var isDel = window.confirm('你确定要删除吗？')  //弹窗交互  点击确认返回ture,点击取消返回false
console.log(siDel);

var inputStr = window.prompt('请输入你要输入的数字')   //弹出输入框  返回的是String
console.log(inputStr);

window.console.log('你好')   //window. 是可以被省略的

console.log('哈哈哈哈哈')

打开一个新的窗口

  window.open('http://www.baidu.com','百度','width=400,height=400,top=200,left=200')
//第一个参数是打开的位置url
//第二个是打开的方式也可以是窗口的名字
//第三个是其他设置

//默认打开的是新窗口 打开方式就是_blank
window.open('http://www.baidu.com')
window.open('http://www.baidu.com','百度')
window.open('http://www.baidu.com','_parent') //指定在本窗口打开

//可以指定对应的窗口的一些设置，一般在设置位置的时候还是会指定上和左，不会指定右和下
 window.open('http://www.baidu.com','百度','width=400,height=400,top=200,left=200')

//调用方法：点击html的任意位置；window对象每一个浏览器窗口都会有一个

//opener 表示父窗口 我打开的浏览器窗口和我本身的窗口对应的window对象不一致
window.onclick = function(){
    console.log('hello 点击我')  
    opener.document.write("调用父窗口进行输出！")； //输入对应的内容到文档上
}

关闭窗口

window.close()   //关闭当前的窗口
window.print()    //将页面进行打印
window.setInterval(function({}),2000)    //定时器
window.setTimeout(function({}),2000)     //延时器

location的属性

// https://www.baidu.com/?username=张三

console.log(location.hash);   //返回锚点  有就返回锚点值，没有就是空
console.log(location.host);   //主机地址  访问的地址www.baidu.com 或者14.215.177.39
consoel.log(location.hostname);   //主机名www.baidu.com
console.log(location.href);   //链接地址 https://www.baidu.com
console.log(location.port);    //端口号 ，默认的浏览器占用端口80 /地址栏没有显示端口就没有端口
console.log(location.protocol);  //协议名  https  http（默认的） file议
console.log(location.pathname); //路径名 拿到访问地址后的路径地址/主机名或端口号后面的 资源路径地址
console.log(location.search); //用来接收?传递值  获取?后面的信息
console.log(location.origin); // 跨域信息

页面跳转的方法

//通过地址栏来进行页面跳转  给href赋值
location.href = 'http://www.baidu.com'


//通过assign方法来跳转页面  传入的参数是你需要跳转的页面
location.assign('http://www.baidu.com')
reload方法  重新加载
location.reload()  //默认会从缓存中加载（速度会更快）
location.reload(true)  //去服务器加载
//跳转页面 他会移除当前页面在历史记录里面，历史记录只会存在一个就是跳转好的


//替换本身的地址来完成跳转，同时删除本身的历史记录
location.replace('http://www.baidu.com')

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

<a href="./history01.html">去新的页面</a>
<button onclick="fn()">前进</button>
<button onclick="fn1()">后退</button>
<button onclick="fn2()">跳转到第一个历史页面</button>
<script>
    	console.log(history);
        function fn(){
            history.forward() //前进的方法
        }
        function fn1(){
            history.back() //后退的方法
        }
        function fn2(){
            // 默认自己这页是0 -1 -2(后退)   1 2（前进）
            history.go(2) //去任意历史页面
        }
        //添加的状态值 取出来的话 history.state
        //添加一个数据（可以是任意类型） 添加的数据 会存入state

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

        //替换state值 在对应的url
        history.replaceState('world','world') 


		console.log(history);
        //history属性
        //length属性 返回历史页面的个数
        console.log( history.length);
        console.log( history.state); //状态值 没有存默认为null

navigator 导航对象 用来获取浏览器的相关信息

  console.log(navigator.appName);//浏览器名称
  console.log(navigator.appVersion);//浏览器版本
  console.log(navigator.platform);//操作系统
  console.log(navigator.userAgent);//重点 用户代理信息 里面存放了用户的系统版本浏览器及相关的信息

  // screen获取用户屏幕信息
  console.log(screen.availHeight);//屏幕高
  console.log(screen.availWidth);//屏幕宽

DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。

DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

html文档由html+css组成 DOM利用js操作html+css的

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

获取元素节点的方式

// id选择器 通过id属性来获取元素 里面的参数为string类型的id 返回值是一个htmlElement
var box = document.getElementById("box") //获取id值为box的元素
console.log(box);

// class选择器 通过class属性名来获取对应的元素 他传入的参数为string类型的class名字 ;
//返回值是一个htmlCollectoinof<Element> 返回的是一个集合 这个集合里面存储了Element;
//htmlCollection是类似数组的一种结构 具备下标同时具备length属性 可能会有多个数据,
//但是htmlCollection并不是一个数组 他不具备数组的方法 只是存在对应的下标和length属性;
var content = document.getElementsByClassName("content")
console.log(content);
console.log(content[0]);//通过下标来获取对应的htmlCollection里面的元素

// 标签选择器 里面传入的是一个标签名字的string字符串 返回的也是一个htmlCollection
var div = document.getElementsByTagName('div')
console.log(div);   //这里是一个htmlCollection
console.log(div[0]);  //通过下标来进行获取里面的元素

// 通过name值来获取 返回的类型是一个nodeList nodeList不是htmlCollection
//但是他同样具备对应的下标和length属性 他的方法比htmlCollection要多
//nodeList和htmlCollection的区别
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.属性名
var box = document.getElementById("box") //获取id值为box的元素

//className
console.log(box.className);//返回class名字 同样我们可以进行赋值 set元素属性
box.className='jack' //设置class属性名

//id
console.log(box.id); //获取id名字
box.id = 'rose'

//title
console.log(box.title); //获取title名字 没有为空
box.title = '张三'

//style 样式操作 element.style.样式名
box.style.background = 'red' //给背景颜色赋值为红色
console.log(box.style.background); //获取背景颜色

操作文本节点 text Text文本节点对象 设置文本节点

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

innerHTML //获取显示的html内容 赋值就是设置对应的html内容
console.log(box.innerHTML);    //会将里面所有的html代码全部获取
box.innerHTML = '<b>吃了没</b>' //他会解析里面的b标签 显示为html加粗效果