一篇带给你一些容易忽略的知识点

发布时间：2025-11-05 04:08:56 来源：云智核 作者：数据库

没啥好说的篇带，总结了点基础知识查漏补缺。易忽

那么如何使用XHR或fetch实现一个Ajax呢?知识

function ajax(url, successFn){

const xhr = new XMLHttpRequest();

xhr.open("GET",url,false);

xhr.onreadystatechange = function(){

//这里的函数异步执行，可以使用Promise进行处理

if(xhr.readyState === 4){

if(xhr.state === 200){

successFn(xhr.responseText);

}

}

}

xhr.send(null);

}

function ajax2(url){

return fetch(url).then(res=>res.json);

}

箭头函数的一些缺点：

箭头函数不能使用的场景：

那么，for await...of有什么作用呢?

for await...of用于遍历多个Promise：

function createPromise(val){

return new Promise((resolve)=>{

setTimeout(()=>{

resolve(val)

},1000)

})

}

(async function(){

const p1 = createPromise(100)

const p2 = createPromise(200)

const p3 = createPromise(300)

const list = [p1,p2,p3]

// Promise.all(list).then(res=>

// console.log(res)

// )

//等价于Promise.all

for await(let p of list){

console.log(p);

}

})()

DOM其实是一棵树，多有的节点都是Node节点，而Node是Element的基类，Element是其它HTML元素的基类，如：HTMLDivElement、HTMLULElement等。

HTMLCollection是Element的集合NodeList是Node的集合

你好呀

const p1 = document.querySelector("#root")

console.log(p1.childNodes,p1.children);

我们可以看到最终打印的结果如下图所示，NodeList打印的服务器托管是所有的Node节点的集合，包括Element元素标签、文本、注释等内容。HTMLCollection打印的是纯粹的Element元素标签的集合，不包含任何文本和注释等。

因此：

比如，HTMLCollection和NodeList都是"类数组"，但不是数组。

const list1 = Array.from(list)

const list2 = Array.prototype.slice.call(list)

const list3 = [...list]

要想理解offsetHeight、scrollHeight和clientHeight的区别，首先我们得了解下盒子模型：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。

标准W3C盒子模型：

而标签元素的实际高度=height+(padding+border+margin*2

标准W3C盒子模型

IE盒子模型：

而标签元素的实际高度=height+margin*2

IE盒子模型

我们在实际开发中，html标签默认采用的W3C盒子模型，当然你也可以设置box-sizing:border-box;将W3C盒子模型转为IE盒子模型。

offsetHeight、scrollHeight和clientHeight的计算规则：

clientHeight

offsetHeight

scrollHeight

简单总结了一些基础知识，希望能够帮到大家。

相关文章