BOM和DOM归纳总结

BOM和DOM!

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

常用对象window

window的子对象 （表示整个html文档的内容）

获取地址的内容属性

href 地址栏完整链接

host hostname 主机

pathname 文件路径

hash 锚点

port 端口号

protocol 协议

orgin 跨域相关

assign 跳转方法

replace 替换url的方法

常见的跳转方式

location直接赋值

location.url进行赋值

使用assign方法进行跳转

使用replace进行替换跳转（不会将原本的页面添加到历史记录）

history(历史对象 )

属性：

length 历史页面的个数

state 历史页面对应的状态值

方法

forward 前进

back 后退

go 去任意的历史页面

pushState 添加state值 添加一个新的历史页面

ceState 替换一个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 克隆节点