JavaScript-BOM以及DOM操作

BOM（brower object model） 浏览器对象模型

常用对象 window
window的子对象
document 文档对象（表示整个html文档的内容）
location （地址栏url对象）

获取地址的内容 属性
href 地址栏完整链接
host hostname 主机
pathname 文件路径
hash 锚点
port 端口号
protocol 协议
orgin 跨域相关

方法
assign 跳转方法
replace 替换url的方法
常见的跳转方式
location直接赋值
location.url进行赋值
使用assign方法进行跳转
使用replace进行替换跳转（不会将原本的页面添加到历史记录）

history （历史对象）

属性
length 历史页面的个数
state 历史页面对应的状态值

方法
forward 前进
back 后退
go 去任意的历史页面
pushState 添加state值 添加一个新的历史页面
replaceState 替换一个state值
screen （用户屏幕对象）
navigator （导航对象）
获取用户代理信息（里面包含了用户浏览器 系统版本等）

userAgent 属性

DOM （document object model 主要是用于操作html文档）
关于节点的划分
element 元素节点（所有的标签都是元素节点）
attribute 属性节点 （所有的属性都是属性节点）
text 文本节点 （所有的文本都是文本节点）

关于元素节点的操作

获取元素

通过id获取 document.getElementById （返回的是一个元素）
通过class名字获取 document.getElementsByClassName (返回的是一个htmlCollection)
通过标签名获取 document.getElementsByTagName (返回的是一个htmlCollection)
通过name属性获取 document.getElementsByName (返回的是一个NodeList)
通过选择器获取 获取第一个 document.querySelector (返回的是一个元素)
通过选择器获取 获取所有的 document.querySelectorAll (返回的是一个NodeList)

元素的属性（赋值就是设置 没有赋值就是获取）

id 属性 获取id值
className 属性 获取class名字
title 获取title属性
style 获取对应的样式 （element.style.样式名）
innerHTML 获取元素里面显示的内容（包含了html代码）
innerText 获取元素里面显示的文本 （只包含文本 不包含html代码）
TagName 只读的获取标签名

属性节点的操作

获取所有的属性节点
attributes 属性获取所有的属性节点
从attributes获取的属性节点集合中读取对应的属性节点
通过下标读取 [0]
通过对应的属性名读取 [‘属性名’]
通过getNamedItem 方法进行获取 里面传入的参数为属性名
通过.的方式获取 .id
attributes 属性获取所有的属性节点的Map里面包含的方法
item 根据下标找到对应的属性节点 返回的attr对象
getNamedItem 根据属性名进行获取 返回的attr对象
setNamedItem 根据对应的属性名进行设置 返回的attr对象
removeNamedItem 根据对应的属性名进行删除 返回的attr对象

获取属性值的方法

getAttribute 根据属性名获取属性值 返回的类型是String
setAttribute 根据传入的属性名和属性值进行设置
removeAttribute 根据属性名移除属性

节点关系（属性）

children 属性 获取所有的子元素节点（不包含文本节点）
childNodes 获取所有的子节点 （包含文本节点）
firstChild 获取第一个子节点 （包含文本节点）
lastChild 获取最后一个子节点 （包含文本节点）
parentNode 获取父节点 parentElementNode 获取父元素节点
nextSibling 下一个兄弟 previousSibling 上一个兄弟节点

节点类型获取（属性）

nodeType 1表示元素节点 2表示属性节点 3表示文本节点
nodeValue 获取对应的节点值
nodeName 获取节点的名称

属性设置

对于天生就有的属性通过.属性名直接进行获取或者设置
a.href = 'http://www.baidu.com'
对于本身没有的使用setAttribute来进行设置 或者通过getAttribute进行获取节点操作

节点创建（方法）

元素节点的创建 document.createElement('标签名') 返回的是一个element
属性节点创建 document.createAttribute('属性名') 返回的是一个Attr对象 （必须要指定value值）
文本节点创建 document.createTextNode('文本值') 返回的是一个文本节点

子节点操作（方法）

appendChild 添加子节点
removeChild 删除子节点
replaceChild 替换子节点
cloneNode 克隆节点