BOOM与DOM操作

BOOM ：是指浏览器对象模型，它使JavaScript 有能力与浏览器进行 对话

window对象：三个弹出框( alert、confirm、prompt )两个定时器( setInterval、setTimeout )两个窗口（open、close）

window.open(url,target)   //打开窗口
//url指的是新窗口的地址，若url为空，表示打开一个空白窗口，
//target表示打开方式，常用取值有两个分别是_blank(表示在新窗口打开)和_self（表示在当前窗口打开）
window.close（）  //关闭窗口 没有参数

对话框有三种：alert().confirm() prompt()
(1)alert()一般仅用于提示文字，实现文本换行用的是“\n”  
     //语法：alert(“提示文字”)
(2)confirm()不仅提示文字，还提供确认   
    //语法：confirm(“提示文字”)
    //若用户点击确认，返回true,点击取消，返回false
let fag=confirm('shibushi')
if(fag){console.log(1112)}    // 1112 点击确定将执行打印

(3)prompt()不仅显示文字，还返回一个字符串
    //语法：prompt(“提示文字”)
let fag=prompt('shibushi')   //点击确定将返回输入的文本

setTimeout()和clearTimeout()  
setInveral()和clearInveral()
let timer =setInterval(function(){console.log(111)},1000) //每个一秒执行一次
clearTimeout(timer)   
let timer =setTimeout(function(){console.log(111)},1000) //一秒执行
clearTimeout(timer)   

 location:url对象

location.herf: //href可读写，配置路径就是跳转  不配置路径就是读取当前地址url
location.replace('url')   //替换页面，没有历史记录 不能返回上一次页面
location.reload()   //刷新页面

地址：http://localhost:8080/#/TreeDataType?type=blog
{
hash: "#/TreeDataType?type=blog"
host: "localhost:8080"
hostname: "localhost"
href: "http://localhost:8080/#/TreeDataType?type=blog"
origin: "http://localhost:8080"
pathname: "/"
port: "8080"
protocol: "http:"
reload: ƒ reload()    刷新页面
replace: ƒ replace()  替换页面跳转
search:''    获取或设置当前页面“？”后面的内容，一般用于数据库查询 
}   

screen对象

screen.height和screen.width //屏幕高度和宽度
screenLeft和screenTop对象 //返回窗口相对于屏幕的x和y坐标。除了火狐浏览器都支持

window.onresize = () => {   //屏幕尺寸变化就重新赋值
      return (() => {
       this.screenWidth = document.body.clientWidth
})()

navigator：浏览器信息

{
appCodeName: "Mozilla"
appName: "Netscape"
appVersion: "5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36"
userAgent: "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36"
platform: "Win32"
}

DOM: 是指文档对象模型，通过它可以访问HTML文档的所有元素

element.nodeType   //获取元素节点类型
//返回元素的节点类型 1元素节点 2属性节点 3文本节点 4CDATA节点 5实体引用名称节点 6实体名称节点  7处理指令节点  8注释节点  9文档节点  10文档类型节点 11文档片段节点 12DTD声明节

//获取节点
document.getElementById(idName) //通过id号来获取元素，返回一个元素对象
document.getElementsByName(name) //通过name属性获取id号，返回元素对象数组
document.getElementsByClassName(className) //通过class来获取元素，返回元素对象数组（ie8以上才有
document.getElementsByTagName(tagName) //通过标签名获取元素，返回元素对象数组
document.qurySelectorAll('选择器') // 通过选择器获取一组元素
document.querySelector("选择器") // 通过选择器获取单个元素

创建节点Node：
document.createElement("h3") //创建一个html元素，这里以创建h3元素为例
document.createTextNode(String) //创建一个文本节点
document.createDocumentFragment() //创建一个DOM片段

添加、移除、替换、插入（父元素调用）
element.appendChild() //添加
element.removeChild() //移除
element.replaceChild() //替换
element.insertBefore() //插入

(常用属性)
var element=document.getElementById("list")[0];
//获取当前元素的父节点 ：
element.parentNode //返回当前元素的父节点对象

//获取当前元素的子节点：
element.chlidren //返回当前元素所有子元素节点对象，只返回HTML节点
element.chilidNodes //返回当前元素所有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.firstChild //返回当前元素的第一个子节点对象
element.lastChild //返回当前元素的最后一个子节点对象

//获取当前元素的同级元素：
element.nextElementSibling //返回当前元素的下一个同级元素 没有就返回null
element.previousElementSibling //返回当前元素上一个同级元素 没有就返回null

//获取当前元素的文本：
element.innerHTML //返回元素的所有文本，包括html代码
element.innerText //返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码

//获取当前节点的节点类型：
node.nodeType //返回节点的类型,数字形式（1-12）常见几个1：元素节点，2：属性节点，3：文本节点

//设置样式：
element.style.color=“#eea” //设置元素的样式时使用style，这里以设置文字颜色为例

var node =document.getElementById("list");
// classList方法操作元素的class属性
node.classList.add("test"); //给node节点添加一个class
node.classList.remove("test");//删除node节点名为test的class
node.classList.replace("old-class","new-class");//替换node节点的class
var hasClass = node.classList.contains("test");//node节点是否存在给定的class，如果存在则返回 true，否则返回 false。
node.classList.toggle("test")//如果节点已经存在给定的class则删除，如果没有则添加

node.setAttribute("id","123");//给node节点设置id=123
var id = node.getAttribute("id");//获取node节点的id属性值
var hasAttr =node.hasAttribute("id");//判断node节点是否存在id属性

// dataset方法获取元素的data- 属性值
var dataId=node.dataset.id; //获取node节点的data-id属性值
var dataName=node.dataset.userName;//类似data-user-name属性必须使用驼峰式来访问
'id' in node.dataset     // 判断node节点是否有data-id属性

// style方法修改元素的样式
node.style.color = 'red';   //设置color样式
node.style.setProperty('font-size', '16px');  //设置font-size样式
node.style.removeProperty('color');  //移除color属性