文章目录

前言DOM增创建元素节点 document.createElement()添加子元素 obj.appendChild(obj) 删删除子元素 obj.removeChild () 查获取元素节点 改替换子元素 obj.replaceChild ()插入子元素 obj.insertBefore ()移动子元素 同添加子元素用法 其他操作类名操作移除类名 obj.classlist.remove("") / obj.className = ""添加类名 obj.classlist.add("") / obj.className = "xxx" 属性操作给元素节点设置属性 obj.setAttribute (属性名，属性值)获取属性值 obj.getAttribute (属性名) 复制元素节点 obj.cloneNode(true) 节点类型 nodeTypeproperty和attribute的区别node和element的区别HTMLCollection和NodeList的区别DOM操作很耗性能，如何做优化document.activeElement获取当前聚焦的元素 BOMhistorylocationnavigatorscreen方法与属性

前言

JS由两个标准构建，一个ES是基础语法标准，一个W3C是web api标准。前者是后者的基础。

DOM

Document Object Model，文档对象模型。每个浏览器都会把html文档解析成DOM树。可以通过DOM对象的属性和方法来操作html元素，例如可以修改，访问相关的元素。

增

创建元素节点 document.createElement()

var oLi = document.createElement("li")

添加子元素 obj.appendChild(obj)

var oLi = document.createElement("li")oLi.innerHTML = "new" oUl1.appendChild(oLi)// 移动元素的操作和新增一样，只不过createElement改成getELement

删

删除子元素 obj.removeChild ()

// 点击哪个li就删除哪个oUl.onclick = function(ev) {var ev = ev || eventif(ev.target.nodeName === "LI"){oUl.removeChild(ev.target)}}

查

获取元素节点

// 通过id获取document.getElementById ()// 通过class获取（获取到的是个伪数组集合，可通过[1]的方式使用指定DOM）document.getElementsByClassName ()// 通过标签名获取（获取到的是个伪数组集合，可通过[1]的方式使用指定DOM）document.getElementsByTagName () // obj.getElementsByTagName("*") 可以获取到当前元素下面所有节点// 通过css选择器获取（获取到的是个伪数组集合，可通过[1]的方式使用指定DOM）与getElementsByTagName比较，后者执行效率更高运算更快，但查找起来相对麻烦些document.querySelectorAll ("css选择器")// 通过css选择器获取，通过css选择器获取（获取到的是个伪数组集合，可通过[1]的方式使用指定DOM）document.querySelector("css选择器")// 获取所有html元素document.documentElements// 获取父节元素点obj.parentNode// 获取上一个兄弟节点obj.previousSibling// 获取下一个兄弟节点obj.nextSibling// 获取所有类型的子节点，是个集合obj.childNodes// 获取所有的子元素节点obj.children// 获取第一个子节点obj.firstChild// 获取最后一个子节点obj.lastChild// 获取第一个子元素节点obj.firstElementChild// 获取标签名称，大写的obj.nodeName// 表格元素获取objtable.tBodies[0].rows[0].cells[0]

改

替换子元素 obj.replaceChild ()

插入子元素 obj.insertBefore ()

var oLiNew = document.createElement("li")oLiNew.innerHTML = "new" // 在哪一个元素节点前固定添加元素节点oUl1.insertBefore(oLiNew, oLi1)

移动子元素 同添加子元素用法

其他操作

类名操作

移除类名 obj.classlist.remove(“”) / obj.className = “”

前者是表示只去掉class里指定的类名

添加类名 obj.classlist.add(“”) / obj.className = “xxx”

前者表示在原来类名的基础上添加新的类名

属性操作

给元素节点设置属性 obj.setAttribute (属性名，属性值)

oBtn.setAttribute("class","btn")class ="btn"// 用createElement创建的dom可以直接div.id = "myDiv";div.className = "div1";

获取属性值 obj.getAttribute (属性名)

<div id="btn" index="1"></div>alert(oBtn.getAttribute("id"))/alert(oBtn.getAttribute("index")) // btn/1

复制元素节点 obj.cloneNode(true)

节点类型 nodeType

节点类型的应用场景：遍历节点的时候为了能获需要的的节点类型，用来过滤；

for(var i = 0 ; i < aLiNode.length ; i++){// 为了过滤其他节点，只需要给元素节点添加css样式if(aLiNode[i].nodeType == 1){aLiNode[i].style.backgroundColor = "red"}

元素 1文本（就是标签里的文字，空格也算是文本节点，一般标签换行，上下标签之间就会有一个空格文本）3comment 8document 9

property和attribute的区别

property指通过dom操作获取到的dom对象上的属性，例如obox.style.widthattribute指标签上的属性，例如class和自定义属性等。一般优先使用property，底层可能会有dom渲染优化，而attribute的改变就是直接改变html的结构，必定渲染。

node和element的区别

不准确的来说：

node是dom树的节点，是element的基类element就是div、p这些标签

想深入可以百度一下，挺多东西的。4-13

HTMLCollection和NodeList的区别

HTMLCollection是element的集合NodeList是node的集合都是类数组

DOM操作很耗性能，如何做优化

第一：查询做缓存

for (let i = 0; i < document.getElementsByTagName("p").length; i++) {// 每次循环都计算了length，频繁对dom查询}// 做缓存后const pList = document.getElementsByTagName("p");const length = pList.length;for (let i = 0; i < length; i++) {// 只会查询一次dom的数量}

第二：把频繁操作换成一次性操作

const list = document.getElementById("list");// 创建一个文档片段，此时还没有插入到 DOM 结构中const frag = document.createDocumentFragment();for (let i = 0; i < 20; i++) {const li = document.createElement("li");li.innerHTML = `List item ${i}`;// 先插入文档片段中frag.appendChild(li);}// 都完成之后，再统一插入到 DOM 结构中list.appendChild(frag);

第三：用事件冒泡代替循环绑定事件的写法

document.activeElement获取当前聚焦的元素

例如一些可交互的标签：input、可选中div等，可以从document.activeElement实时获取到被聚焦（或者说被激活）的元素。

let activeElement = document.activeElement

如果没有标签被聚焦，那么获取到的是body元素。

如果还想对获取到的聚焦元素进行进一步的筛选，可以使用dom上的matchs方法：

if (activeElement?.matches('div[role="button"]')) {// matches方法内写的是css选择器}

BOM

Browse Object Model，浏览器对象模型， 可以通过一些属性和方法来操作浏览器。

console.log(window) //是最顶层的，很多指令都是window下的，例如window.alert()，一般直接简写alert()

self对象：指窗口本身，它返回的对象跟window对象是一模一样的。也正因为如此，window对象的常用方法和函数都可以用self代替window。

举个例子，常见的写法如“self.close();”，把它放在<a>标记中：“<a href="javascript:self.close();">关闭窗口</a>”，单击“关闭窗口”链接，当前页面关闭。

下面来看下挂在window上的一些对象。

history

浏览器历史记录对象

// 返回上一条历史记录页面history.back()// 进入下一条历史记录页面history.forword()// 进入指定的历史记录页面history.go() history.go(1) // 相当于前进history.go(-1) // 相当于后退history.go(0) // 表示刷新当前页面// 进入新页面history.pushState('/url') // 无刷新页面，静态跳转；这个是Html5新增的// 表示当前页面的历史记录条数history.length

location

浏览器页面信息对象

// 用于获取或设置当前页面的完整URL地址location.hrefwindow.location.href = url // 打开url网址的新页面// 获取#和#后的urllocation.hash// 获取?和?后的url（?wd="xxx"&age=13）location.search// 查看协议，例如https:location.protocol // 还有host，pathname等

这里普及适用于search的一个对象，可以快速获取&a=10的value值：

function query(name) {const search = location.searchconst p = new URLSearchParams(search) // 但是这个低版本浏览器不兼容return p.get(name)}console.log(query('a')) // 10

面试题：将url参数解析为JS对象

// 第一种方法function queryToObj() {const res = {}const search = location.search.substr(1) // 去掉前面的"?"search.split('&').forEach(p=>{const arr = p.split('=')const key = arr[0]const val = arr[1]res[key] = val})return res}// 第二种方法function queryToObj() {const res = {}const pList = new URLSearchParams(loaction.search)pList.forEach((val, key)=>{res[key] = val})return res}

navigator

浏览器的信息检测对象

// 返回浏览器的相关信息window.navigator.userAgent // 返回一个字符串 包含浏览器的相关信息，例如版本，浏览器名称。一般把这个属性简称UAconsole.log(window.navigator.userAgent)// 但我们会发现，打印出的浏览器信息有谷歌、苹果、火狐等，这是因为以前网站通过UA识别，只兼容某个特定浏览器，其他浏览器是访问不了的，那么其他浏览器想兼容让自己能够访问的网站更加全面怎么办，那就都加进去呗。// 应用：可以用来检测是不是某个浏览器。indexOf()里面传入一个字符串，如果这个字符串在前面的字符串中，返回一个具体位置(数字)，如果没有返回-1if(window.navigator.userAgent.indexOf("Chrome") == -1 ){alert("当前不是chrome浏览器")}else{alert("当前浏览器是chrome")}// 因为上面的原因，所以如果想严格检查浏览器类别，还需更加专业的办法（网上有）

// 当前浏览器的语言navigator.language// 当前平台信息（32/64x）navigator.platform

screen

屏幕子对象

// 当前屏幕分辨率的宽度screen.width// 当前屏幕分辨率的高度screen.height// 当前窗口化到屏幕指定边缘的距离。比较特殊，直接screenLeft/right/top/downalert(screenLeft)

方法与属性

方法：

// 表示打开一个窗口window.open ()// ()有很多参数// 第一个：填写"网址"，不填写默认是空白网页// 第二个：表示打开方式，默认为"_blank"，表示新建打开，_self"表示覆盖本网页打开// 第三个：写窗口大小和位置，"width=200,height=100,left=1000,top=200"var w = nullopBtn.onclick = function(){w = open()console.log(w) //表示的又是一个window；w.document.body.style.backgroundColor = "red"}clsBtn.onclick = function(){w.close()}

// 表示关掉网页window.close ()

属性：

// 用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法window.onload = fn()// 获取浏览器内容高度window.innerHeight// 获取纵向滚动距离window.scrollY// 浏览器滚动就触发window.onscroll = fn

未来继续补充…