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 { 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节点 实体引用名称节点 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.removePrperty('color'); //移除color属性