javascipt Bom 和dom入门

bom

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

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

2.bom里面时存再多个对象的

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

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

window 是顶层对象 所有的其他使用的对象都是通过window扩展出来的

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

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

常用的属性及方法

window.innerHeight //获取高度(浏览器窗口可视区域的高度)

window.innerWidth // 获取宽度(浏览器窗口可视区域的宽度)

弹窗方法

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

2.var isDel = window.confirm('你确认要删除吗?') //弹窗交互窗口 点击确认返回true 点击取消返回false

console.log(isDel);

3.var inputStr = window.prompt('请输入你要输入的号码','123') //弹出输入框 返回的是string

//两个参数第一个是提示 第二个是框里面的默认值

---

打开一个新的窗口(window.open)

第一个参数是打开的位置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(){//延时器  第一个参只能使用function

},2000)

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

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

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

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

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

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

console.log(window.location); // 也可以window

console.log(location);

 location的属性

//http://www.百度.com/?username=张三

console.log(location.hash) // 返回锚点 有就返回锚点值 没有就是空

console.log(location.host); 主机地址 访问的地址 www.baidu.com /或者14.215.177.39

console.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.taobao.com')

//reload方法 重新加载

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

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

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

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

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

 history 历史对象

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

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

---

history 属性

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

history.length

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入门

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

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

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

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

id就是属性节点(任意的属性都是属性节点)

你好就是文本节点 (任意的文本都是文本节点)

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

差 获取元素节点的方式

通过选择器获取

id选择器 通过id属性来获取元素 里面的参数为string类型的id 返回值是一个htmlelement

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

class选择器 通过class属性名来获取对应的元素 他传入的参数为string类型的class名字

返回值是以一个htmlcollectoinof<Element> 返回的是一个集合 这个集合里面存储了Element

htmlcollection是类型数组的一种结构 具备下标同时具备length属性 可能会有多个数据

但是htmlcollection并不是以一个数组 他不具备数组的方法 只是存在对应的下标和length属性

我们可以通过下标来获取对应的htmlcollection里面的元素

var content = document.getElementsByClassName('content')

console.log(content[0])

标签选择器 里面传入的是以一个标签名字的string类型 返回的也是一个htmlcollection

var div = document.getElesByTayName('div')

console.log(div) // 这里也是一个htmlcellection 也可以用下标获取(div[0])

通过name值来获取 返回的类型是一个nodelist nodelist不是htmlcollection

但是他同样具备对应的下标和length属性 他的方法比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]);

nodelist和htmlcollection的区别

1.都具备下标和length属性

2.nodelist是list  而htmlcollection是一个集合

3.nodelist是可以进行排序的(遍历方法forEach())  htmlcollection不能进行排序

4.nodelist具备键值对划分 可以拿到键盘或值   htmlcollection只能拿到元素

 // 操作属性节点 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加粗效果

总结:

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

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

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

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

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

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

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

className title id innerText innerHTML style

//tagName 获取标签名 document表示整个文档

 var content = document.getElementById('content')

console.log(content.tagName); //tagName是一个只读属性 不能进行设置

 //document表示整个文档 使用document.获取方法 是在全文中进行获取

 //缩小区域进行获取

var btns = document.getElementsByTagName('button') //里面会包含按钮4

console.log(btns);

//缩小区域进行获取

// 首先获取content这个div 然后再在这个div里面进行获取button

 var innerBtns = document.getElementById('content').getElementsByTagName('button')

 // var content = document.getElementById('content')

// var innerBtns = content.getElementsByTagName('button')

console.log(innerBtns);

 节点共有属性

元素节点 属性节点 文本节点都有的属性

<div><p>123</p></div>

var title = document.getElementsByTagName("title")[0];

console.log(title.nodeName); //nodeName节点名称

console.log(title.nodeType); //nodeType 节点类型 1 元素节点 2 属性节点 3 文本节点

console.log(title.nodeValue); //节点值 元素节点为null 属性节点 属性值  文本节点 文本值

// 子节点

 var box = document.getElementById("box");

console.log(box.childElementCount); //返回节点的元素个数 1

console.log(box.childNodes); //返回所有的节点集合 返回类型是一个nodelist 包含所有的子节点

console.log(box.children); //返回子元素 返回的是一个htmlCollection 只包含元素节点