BOM&DOM

BOM DOM

BOM

概述:BOM 浏览器对象模型,对于路由的底层就是bom

六大对象:

window 全局对象

location 地址栏(url) *

histroy 历史页面 *

document 文档对象

navigator 导航(获取浏览器对应的信息)

screen 屏幕对象(获取对应的宽高 适配兼容)

frames 框架的布局

DOM

概述:DOM文档对象模型 它是用于操作对应的html文档

dom树分为

元素节点 (所有的标签都属于元素节点)

属性节点 (所有标签里面的属性都是属性节点)

文本节点 (所有显示的文本都是文本节点)

元素节点的操作

元素节点的获取

获取元素的方法

document对象加对应的方法来获取元素

getElementByID 根据id选择器获取(元素)

getElementsByTagName 根据标签名获取(返回伪数组,具备下标和length属性,其他的不具备 )

getElementsByClassName 根据class名字获取(返回伪数组)

getElementsByName 根据name属性获取(返回一个伪数组)

querySelector 根据选择器获取 (会获取找到的第一个)

querySelectorAll 根据选择器获取所有匹配的元素(返回伪数组)

获取body和head的属性

获取body document.body 属性

获取head document.head 属性

元素所具备的属性（赋值就是对应的设置 反之就是获取）

id 获取对应的id （设置）

className 获取对应的class名字

style 获取样式 （设置）

tagName 获取标签名

title 获取title属性

innerHtml 获取显示的内容 （设置显示的内容 包含html代码）

innerText 获取显示的文本 （设置显示的文本 不包含html代码）

所有的表单元素都具备的属性 value

节点的区分(属性)

nodeType 节点的类型

nodeName 节点名字

nodeValue 节点值

获取子节点

childNodes (获取所有的子元素节点及文本节点(包含空格和换行符))

children (获取所有的子元素节点) *

parentNode (获取对应的父节点)

removeChild 移出子节点

Math的方法(静态方法)

abs 绝对值

random 随机数

pow 幂次方

sqrt 开平方

max 最大值

min 最小值

ceil 向上取整

floor 向下取整

round 四舍五入

属性

PI 圆周率

E 科学记数法

属性节点的相关内容(针对元素节点)

获取所有的属性节点 attributes 返回一个伪数组(element)

<div id="box" name="content" class="context"></div>
    

var box = document.getElementById('box')
//所有元素都具备的属性  attributes 获取所有里面所有的属性节点
//map  key-value形式的伪数组  object
console.log(box.attributes)
console.log(box.attributes.length)
//通过下标来获取对应的属性节点
var id = box.attributes[0]
//通过key来获取对应的节点(属性名)
console.log(box.attributes['id']) //node对象
console.log(id) //node对象
//节点的几个属性  nodeType  nodeValue  nodeName
console.log(id.nodeType)
console.log(id.nodeValue)
console.log(id.nodeName)

关于属性操作的方法(操作任意属性)

getAttribute 获取属性值

setAttribute 设置属性

removeAttribute 移除属性

var div = document.querySelector('div')
//属性操作的三个方法
//查询  获取 getAttribute(属性名)
var value =div.getAttribute('title') //返回属性值
console.log(value)
//删除 delete 全删 remove 删内容不删日志  removeAttribute(属性名)
div.removeAttribute('title')
//添加 添加重复就是修改 setAttribute(属性名,属性值)
div.setAttribute('class','box')
div.setAttribute('class','innerBox')

节点的操作

元素节点的创建 createElement

属性节点的创建 createAttribute

文本节点的创建 createTextNode

增删改的方法

appendChild 添加到后面

insertBefore 添加到前面(两个参数,第一个 必需.需要插入的节点对象。第二个是可选,在其之前插入新节点的子节点)

remove 移除自身的所有内容

removeChild 移除对应的子节点

replaceChild 替换对应的子节点

replaceChildren 替换里面的所有内容

//创建元素节点 返回的是一个元素节点 createElement(标签名)
var newEle =  document.createElement("div")
var newEle1 =  document.createElement("div")
//创建属性节点 createAttribute(属性名)
var attr = document.createAttribute("class")
//设置属性值
attr.value = "box"
//创建文本节点 传的是显示的内容 createTextNode(对应的文本)
var text = document.createTextNode("hello world")
//添加子节点 add append
newEle.setAttributeNode(attr) //设置属性节点 setAttribute
newEle.appendChild(text) //添加文本节点 innerText
var span =  document.createElement("span")
var a =  document.createElement("a")
var span1 =  document.createElement("span")
newEle.appendChild(span) 
// appendChild 追加到后面  insertBefore  appendChild 元素已经添加是不会再次添加
newEle.insertBefore(span1,text)
document.body.appendChild(newEle) //添加元素节点
//删除节点 直接删除对应的节点 
document.body.appendChild(newEle1)
newEle1.remove() //把自己所有的都删除 包含里面的内容和自己
//删除子节点 removeChild(传入的是被删除的节点)
newEle.removeChild(span1)
//修改的方法 replace replaceChildren替换所有的  replaceChild(新的节点,原本的子节点) 替换对应的节点
newEle.replaceChild(a,span)
newEle.replaceChildren(a) //不常用的

节点克隆的方法

cloneNode

var div = document.querySelector('div')
//deep 是否深入 里面的内容是否全部克隆包含事件
//如果deep是false 那么只能克隆当前的元素 默认为false
var clone = div.cloneNOde() //节点克隆 返回的是克隆的元素
document.body.appendChild(clone)