bom&dom简单总结

bom(browser 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前进
go	去任意页面
pushState	添加state值,添加一个新的历史页面
replaceState	替换一个state值

screen 用户屏幕对象

navigator 导航对象

获取用户代理信息(里面包含浏览器版本,系统版本)

userAgent 方法

dom (document object model)

关于节点的划分

element 元素节点

attribute 属性节点

text 文本节点

关于元素节点的操作:

获取:
document.getElementById('')//通过id获取,返回一个元素
document.getElementsByClassName('')//通过ClassName,返回的是一个htmlCollection
document.getElementsByTagName('')//通过TagName,返回的是一个htmlCollection
document.getElementsByName('')通//过TagName,返回的是一个nodelist
通过选择器进行获取
document.querySelector()//返回的是一个元素
document.querySelectorAll()//返回的是一个nodelist

属性:(赋值就是设置,不赋值就是获取)
id属性:
className属性:
title属性:
style:获取对应样式
innerHTML:获取元素里面显示的内容
innerText:获取元素里面显示的文本(只包含文本,不包含html代码)
TagName:只读的标签名

属性节点的操作
attributes属性	获取所有的属性节点
从attributes获取的属性节点集合中读取相应的属性节点
通过下标读取[0]
通过对应的属性名读取['属性名']
通过getNamedItem方法进行获取,里面传入的参数是属性名
通过.方法进行获取(点方法)

attributes属性获取所有的属性节点的Map里面包含的方法

item根据下标找到对应的属性节点返回的是attr对象
getNamedItem会根据属性名进行获取
setNamedItem根据相应的属性名设置
removeNamedItem根据对应的属性名进行删除

获取属性值的方法:
getAttribute会根据属性名进行获取属性值,返回类型string
setAttribute根据相应的属性名设置
removeAttribute根据对应的属性名进行删除属性

节点关系
children属性	获取所有子元素节点(不包含文本节点)
childNodes获取所有的子节点(包含文本节点)
firstChild	获取第一个子节点
lastChild	获取最后一个子节点

parentNode获取父节点
parentElementNode获取夫元素节点
nextSibling下一个兄弟
preciousSibling上一个兄弟

 节点类型获取,设置,操作:

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

属性设置:
对于天生就有的属性通过点方法直接进行获取或者设置
对于本身没有的使用set/getAattribute进行设置和获取

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

子节点操作方法:
appenChile		添加子节点
removeChild		删除子节点
replaceChild	替换子节点
cloneNode		克隆子节点