【JS基础】这些是web api中的DOM和BOM必然要会使用的东西

庞囧

已于 2023-12-26 15:18:50 修改

阅读量723

点赞数 3

分类专栏： # JS基础文章标签： javascript 前端 typescript

于 2022-02-20 23:15:44 首次发布

本文链接：https://blog.csdn.net/pagnzong/article/details/123037673

版权

JS基础专栏收录该内容

27 篇文章 3 订阅

订阅专栏

文章目录

前言
DOM
BOM

前言

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 || event
	if(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
文本（就是标签里的文字，空格也算是文本节点，一般标签换行，上下标签之间就会有一个空格文本）3
comment 8
document 9

property和attribute的区别

property指通过dom操作获取到的dom对象上的属性，例如obox.style.width
attribute指标签上的属性，例如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.href
window.location.href = url // 打开url网址的新页面

// 获取#和#后的url
location.hash

// 获取?和?后的url（?wd="xxx"&age=13）
location.search

// 查看协议，例如https:
location.protocol 

// 还有host，pathname等

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

function query(name) {
	const search = location.search
	const 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
}

目前对于URL的操作，推荐使用URLSearchParams

navigator

浏览器的信息检测对象

// 返回浏览器的相关信息
window.navigator.userAgent // 返回一个字符串 包含浏览器的相关信息，例如版本，浏览器名称。一般把这个属性简称UA
console.log(window.navigator.userAgent)

// 但我们会发现，打印出的浏览器信息有谷歌、苹果、火狐等，这是因为以前网站通过UA识别，只兼容某个特定浏览器，其他浏览器是访问不了的，那么其他浏览器想兼容让自己能够访问的网站更加全面怎么办，那就都加进去呗。

// 应用：可以用来检测是不是某个浏览器。indexOf()里面传入一个字符串，如果这个字符串在前面的字符串中，返回一个具体位置(数字)，如果没有返回-1
if(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/down
alert(screenLeft)

方法与属性

方法：

// 表示打开一个窗口
window.open ()

// ()有很多参数
// 第一个：填写"网址"，不填写默认是空白网页
// 第二个：表示打开方式，默认为"_blank"，表示新建打开，_self"表示覆盖本网页打开
// 第三个：写窗口大小和位置，"width=200,height=100,left=1000,top=200"

var w = null
opBtn.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