BOM DOM

BOM DOM

BOM

概述：

BOM 浏览器对象模型，对于路由的底层就是bom

六大对象

window 全局对象

location 地址栏（url）*

history 历史页面 *

document 文档对象

navigator 导航（获取浏览器对应的信息）

screen 屏幕对象 （获取对应的宽高 适配兼容）

frames 框架的布局

DOM

概述：

DOM 文档对象模型 他是用于操作对应的html文档（增删改查）

dom树分为

元素节点 （所有的标签都是属于元素节点）

属性节点 （所有标签里面的属性都是属性节点）

文本节点 （所有显示的文本都是文本节点）

元素节点的操作

元素节点的获取

获取元素的方法

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

getElementByID 根据id选择器获取（元素）

getElementsByClassName 根据class名字获取 （返回一个元素数组 他是一个伪数组 （除了具备对应的下标 和length属性其他方法都不具备））

getElementsByTagName 根据标签名获取 （返回伪数组 htmlcollection）

getElementsByName 根据name属性获取 （返回伪数组）

querySelector 根据选择器获取（他会获取找到第一个元素）

querySelectorall 根据选择器获取所有匹配的元素 （返回伪数组 nodeList）

获取body和head的属性

获取body document.body 属性

获取head document.head 属性

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

id 获取对应的id （设置）

className 获取对应的class名字

style 获取样式 （设置）

tagName 获取标签名

title 获取title属性

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

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

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

节点的区分（属性）

nodeType 节点的类型

nodeName 节点名字

nodeValue 节点值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7YYkAdkN-1655080570879)(C:\Users\29769\AppData\Roaming\Typora\typora-user-images\image-20220606100327765.png)]

获取子节点

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

children （获取所有的子元素节点） *

parentNode 获取对应的父节点

removeChild 移出子节点

Math的方法（静态方法）

abs 绝对值

random 随机数

pow 幂次方

sqrt 开平方

max 最大值

min 最小值

ceil 向上取整

floor 向下取整

round 四舍五入

属性

PI 圆周率

E 科学计数法

属性节点的相关的内容（针对元素节点）

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

var box =  document.getElementById("box")
//所有元素都具备的属性 attributes 获取所有里面所有的属性节点 返回的是一个伪数组 namedNodeMap
//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); //2
console.log(id.nodeValue); //box
console.log(id.nodeName); //id

NamedNodeMap里面的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RpXtZbhN-1655080570881)(C:\Users\29769\AppData\Roaming\Typora\typora-user-images\image-20220606142438061.png)]

getNamedItem 获取对应属性节点

setNamedItem 设置对应的属性节点

removeNamedItem 移除对应的属性节点

关于属性操作的方法（操作任意属性）

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)

节点之间的关系

父子关系（属性）

childNodes 获取所有的子节点（文本节点及元素节点）

children 获取所有的子元素节点

parentNode 父节点

parentElement 父元素

//获取子节点
var div = document.querySelector("div")
//得到所有的子节点 
var childs = div.childNodes //返回nodeList
console.log(childs);
//返回所有的子元素节点 
console.log(div.children);
//获取第一个子元素 空文本
console.log(childs[0].parentNode);//得到父节点 （节点）
//获取对应的父元素节点
console.log(childs[0].parentElement); //得到父元素（元素节点）

兄弟关系（属性）

previousSibling 前一个节点

previousElementSibling 前一个元素节点

nextSibling 后一个节点

nextElementSibling 后一个元素节点

firstChild 第一个节点

lastChild 最后一个

//获取前一个节点
var b  =  document.querySelector("b")
console.log(b.previousSibling); //前一个节点
console.log(b.nextSibling); //后一个节点
console.log(b.previousElementSibling); //前一个元素节点
console.log(b.nextElementSibling); //后一个元素节点
console.log(document.querySelector("div").firstChild); //获取第一个子节点
console.log(document.querySelector("div").lastChild);//获取最后一个子节点

this

this关键词表示自己 指向当前的调用者

//获取所有的按钮
var btns = document.querySelectorAll("button")
//for循环遍历
for (var i=0;i<btns.length;i++) {//var 声明的是伪全局作用域 
    //拿到对应的元素添加点击事件
    btns[i].onclick = function(){ //事件是异步
        // console.log(i);
        // btns[i] 显示为undefined 原因是这个地方i为5
        //this会指向你点的按钮
        // console.log(this); this指向当前调用的元素
        console.log(this.innerText);
    }
}
setTimeout(function(){
    console.log(this);
},100) //window 对象 setTimeout属于window对象的
console.log(i);

tion(){ //事件是异步
// console.log(i);
// btns[i] 显示为undefined 原因是这个地方i为5
//this会指向你点的按钮
// console.log(this); this指向当前调用的元素
console.log(this.innerText);
}
}
setTimeout(function(){
console.log(this);
},100) //window 对象 setTimeout属于window对象的
console.log(i);