BOM、DOM
DOM Document Object Model
BOM Browser Object Model
DOM也属于BOM的一种
BOM
1、window
open()打开
close()关闭
innerWidth 、innerHight 浏览器内部宽度高度
outerwidth 、outerHight 浏览器外部宽度高度
screenLeft 、screenTop 、screenX 、screenY 窗口距屏幕左上角的距离
2、location
location.reload() 重载，刷新当前页
location.href = '' 可以设置调转到当前页面的地址
location.assign() 可以设置调转到当前页面的地址
location.replace() 也可以设置调转到当前页面的地址，不过没有历史记录。
location.hash() 获取地址#后面的锚点
location.search() 获取地址？后面的参数
location.hostname() 返回web主机域名
location.pathname() 返回当前页面的路径和文件名
location.port() 返回web主机端口
location.protocol 返回所使用的的web协议
3、history
history.back() 向后退一页
history.forward() 向前进一页
history.go() 可选参数向前几多少页或者向后退多少页 如果为0则为刷新页面
history.pushState() 参加历史记录到列表，可以添加参数
window.onpopstate() 当点击前进后退时出发函数
history.length 返回历史列表中的网址数
4、screen
screen.availWidth screen.availHeight 不包含任务栏宽高
screen.Width screen.Height 整个屏幕的宽高
5、navigator
navigator.userAgent 返回客户机发送服务器的user-agent头部的值
navigator.appName 返回浏览器的名称
navigator.appVersion 返回浏览器的平台和版本信息
navigator.platform 返回浏览器的操作系统平台
DOM
1、DOM节点
节点有元素、属性、文本、注释、文档5中类型
noodName是节点名称
任何标签的nodeName是该标签的大写字母
文本标签的nodeName是#text
注释节点的nodeName是#comment
noodValue为节点值
元素节点的noodValue不能用
注释的noodValue为注释的内容
文本的noodValue为文本的内容
nodeType
元素为1，属性为2，文本为3，注释为8，文档为9.
2、获取DOM元素
document.getElementById() 通过ID名获取
document.getElementByTagName() 通过标签名获取，只能通过document。
document.getElementByName() 通过name属性获取，只能通过document。
document.getElementByClassName() 通过class名获取
document.querySelector(所有选择器) 获取选择器列表中的第一个元素
document.querySelectorAll(所有选择器) 获取选择器列表中的所有元素
3、节点遍历
document.body.children//所有子元素列表
document.body.chilNodes//所有子节点列表
document.body.firstChild//第一个子节点
document.body.firstElementChild//第一个子元素
ducument.body.lastChild//最后一个子节点
document.body.lastElementchild//最后一个子元素
document.body.lastElementChild.previousSibling//上一个兄弟节点
document.body.lastElementChild.nextElementSibling//上一个兄弟元素
document.body.firstElementChild.nextSibling//下一个兄弟节点
document.body.firstElementChild.nextElementSibling//下一个兄弟元素
document.body.firstChild.parentNode//父节点
document.body.firstChild.parentElement//父元素
4、节点的操作方法
1、创建节点
document.createElement('div')//创建元素
document.creatTextNode('')//创建文本节点
2、插入节点或元素
document.body.appendChild(div)//将div插入到body的最后一项
document.body.insinsertBefore(div,document.body.firstChild)
//将div插入到document.body.firstChild之前
3、替换节点
document.body.replaceChild(div,p)//将p替换成div
4、删除节点
document.body.removechild(div)//删除body中的div
div.remove()//删除div
在删除元素时，只仅仅从页面上删除，不是从内存中删除。
5、复制元素
var div0 = document.querySelector('#div0');
var div11 = div0.cloneNode(ture)//深复制，复制元素包括内容
var div11 = div0.cloneNode(false)//浅复制，只复制元素
5、DOM属性
DOM的属性分为自定义性和原DOM对象属性
DOM的对象属性与DOM对象的标签属性部分对应，部分有差别。
设置标签的属性和值，值和属性都必须是字符类型。
DOM的标签属性命名，不能使用大小写区分不适用下划线区分
属性名必须全小写字母，并且使用-区分每个单词
div.setAttribute('shop-data','10');//设置标签属性
div.getAttribute(div.getAttribute("shop-data"))//获取标签属性
div.removeAttribute('shop-data')//删除标签属性
document.body body元素 document.title 标题 document.head head区域 document.URL 当前页面地址 document.domain 域名
