一文搞懂JS-Web-API——DOM

这篇具有很好参考价值的文章主要介绍了一文搞懂JS-Web-API——DOM。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🌈本系列文章是博主精心整理的面试热点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速建立前端面试知识体系。抓住每一场面试的机会,知己知彼才能百战百胜。直击技术痛点,主动出击,精密打击,这才是面试拿到高薪的秘诀!

  • 本系列订阅 一天时间迅速准备前端面试(高薪精品)–欢迎订阅

介绍

本章介绍 DOM 操作的知识点和题目。包括 DOM 结构,常用 DOM 操作,DOM 性能优化等。DOM 是网页结构的基础,学会 DOM 操作才可以做网页开发。

主要内容

  • 从 JS 基础到 JS-Web-API
  • DOM 的本质是什么
  • DOM 节点操作
  • DOM 结构操作
  • 如何优化 DOM 操作的性能

JS Web API

背景

JS 基础知识,规定语法(ECMA 262 标准)
JS Web API,网页操作的 API(W3C 标准)
前者是后者的基础,两者结合才能真正实际应用

内容

  • DOM:操作网页上的DOM元素,比如文本,图片等
  • BOM:操作浏览器上的一些事情,导航,宽高等
  • 事件绑定:绑定事件,监听点击之类
  • ajax:发送网络请求
  • 存储:浏览器暂存数据

DOM的本质

DOM,document object model
DOM的本质是从HTML中解析出来的一棵树,DOM结构就是树结构。

DOM节点操作

DOM节点操作:

获取dom节点:

documen.getElementById()

document.getElementsByClassName

document.getElementsByTagName

docuement.querySelectorAll  // css选择器

attribute // 对html属性进行修改

property  // js操作属性的一种形式   对dom元素的js变量进行修改

const plist = document.querySelectorAll('p')

const p1 = plist[0]

p1.className // 返回元素的类名

p1.nodeName // 返回节点名称

p1.nodeType // 返回节点类型  一般元素返回的1

attributeproperty的区别

  • property:修改对象属性,不会体现到html结构中 (推荐使用:设置js同一变量不一定会重新渲染)

  • attribute:修改html属性,会改变html结构(设置了dom属性就会重新进行dom渲染)

  • 两者都可能引起dom重新渲染

建议尽量用 property 操作,因为property可能会在JS机制中,避免一些不必要的DOM渲染;但是attribute是修改HTML结构,一定会引起DOM结构的重新渲染,而DOM重新渲染是比较耗费性能的

DOM结构操作

新增/插入节点

const div1 = document.getElementById('div1')

const div2 = document.getElementById('div2')

//新建节点

const newP = document.createElement('p')

newP.innerHTML = 'this is newP'

//插入节点

div1.appendChild(newP)

//移动节点

const p1 = document.getElementById('p1')

div2.appendChild(p1)

获取子元素列表,获取父元素

const div1ChildNodes = div1.childNodes

cosnole.log(div1.childNodes)

const div1ChildNodesP= Array.prototype.slice.call(div1.childNodes).filter(child => {//过滤

if(child.nodeType === 1) {//获得正常DOM节点。而不是text节点

return true

}

return false

})

cosnole.log('div1ChildNodesP',div1ChildNodesP)

console.log(p1.parentNode)

删除子元素

div1.removeChild(div1ChildNodesP[0])

如何优化 DOM 操作的性能

DOM 性能 DOM 操作会占用CPU,可能会导致浏览器的重绘和重排,使得运行耗时或者说耗费CPU计算比较多,频繁操作可能会导致卡顿的一些问题

  1. DOM 查询做缓存
// 不缓存查询
for(let i = 0, i < document.getElementsByTagName('p').length, i++) {
    // 每次循环,都会计算 length, 频繁进行 DOM 查询
}

// 缓存 DOM 查询结果
const length = document.getElementsByTagName('p').length;
for(let i = 0, i < document.getElementsByTagName('p').length, i++) {
    // 缓存 length,只进行一次 DOM 查询
}

说说面试那些事儿9章 js-web-api-dom,前端,javascript,html

2.将频繁操作改成一次性操作

const listNode = document.getElementById('list');

// 频繁操作
for(let i = 0, i < 10, i++) {
    const li = document.createElement('li');
    li.innerHTML = 'List item' + x;
    listNode.appendChild(li);
}

// 频繁操作改为一次性操作
// 创建一个文档片段,此时还没有插入到 DOM 树中 (理解为创建了一个虚拟DOM的teamplate元素)
const frag = document.createDocumentFragment();
for(let i = 0, i < 10, i++) {
    const li = document.createElement('li');
    li.innerHTML = 'List item' + x;
    frag.appendChild(li); // 将生成的 li 先插入到 虚拟DOM中
}
// 都完成之后,再插入到 DOM 树中
list.appendChild(frag);

说说面试那些事儿9章 js-web-api-dom,前端,javascript,html

下期介绍js的高级用法
🌈文末福利:搜索公众号【前端二次元】回复关键字「前端资料」,领取前端系统课程,涵盖前端所有内容文章来源地址https://www.toymoban.com/news/detail-798864.html

到了这里,关于一文搞懂JS-Web-API——DOM的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一文1000字彻底搞懂Web测试与App测试的区别

    总结分享一些项目需要结合Web测试和App测试的工作经验给大家: 从功能测试区分,Web测试与App测试在测试用例设计和测试流程上没什么区别。 而两者的主要区别体现在如下几个方面: Web项目,B/S架构,基于浏览器的;Web测试过程中,客户端会随服务器端同步更新,所以只需

    2024年02月08日
    浏览(42)
  • 史上最全C/C++面试八股文,一文带你彻底搞懂C/C++面试!

    目录 1.讲一讲封装、继承、多态是什么? 2.多态的实现原理(实现方式)是什么?以及多态的优点(特点)? 3.final的作用是什么? 4.虚函数是怎么实现的?它存放在哪里在内存的哪个区?什么时候生成的 5.智能指针的本质是什么,它们的实现原理是什么? 6.匿名函数

    2024年02月08日
    浏览(44)
  • 美团面试官:可重复读隔离级别实现原理是什么?(一文搞懂MVCC机制)

    本文首发于公众号【看点代码再上班】,欢迎围观,第一时间获取最新文章。 原文:美团面试官:可重复读隔离级别实现原理是什么?(一文搞懂MVCC机制) “全文共计4270字,预计阅读时间6分钟 大家好,我是 tin ,这是我的第26篇原创文章 还记得MySQL数据库事务都有哪些隔离

    2024年02月13日
    浏览(36)
  • 面试都在问的微服务、服务治理、RPC、下一代微服务… 一文带你彻底搞懂!

    文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定。可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 与微服务相对的另一个概念是传统的 单体式应用程序 ( Monolithic application ),单体式应用内部包含了所有需要的服务。

    2024年02月22日
    浏览(49)
  • 前端面试:【浏览器与渲染引擎】Web APIs - DOM、XHR、Fetch、Canvas

    嗨,亲爱的读者!当我们在浏览器中浏览网页时,我们常常会与各种Web API打交道。这些API允许我们与网页内容、服务器资源和图形进行交互。本文将深入探讨一些常见的Web API,包括DOM、XHR、Fetch和Canvas,以帮助你了解它们的用途和如何使用它们。 1. DOM(文档对象模型): 用

    2024年02月11日
    浏览(46)
  • 一文搞懂什么是Hadoop?Hadoop的前世今生,Hadoop的优点有哪些?Hadoop面试考查重点,大数据技术生态体系

    目录 1.1 Hadoop 是什么  1.2 Hadoop 发展历史 1.3 Hadoop 三大发行版本  1.4 Hadoop优势(4高)  1.5 Hadoop 组成(面试重点)  1.5.1 HDFS 架构概述   1.5.2 YARN 架构概述   1.5.3 MapReduce 架构概述   1.5.4 HDFS、YARN、MapReduce 三者关系   1.6 大数据技术生态体系  1.7 推荐系统框架图   (1 ) Had

    2024年02月01日
    浏览(48)
  • 一文搞懂 Promise 新 Api allSettled 的用法和 all 区别,以及如何在不支持新特性的环境下实现一个 Polyfill

    返回一个数组,每一个元素都是一个对象,里面必然包含 status 属性 status 属性只会有两个值, fulfilled 或者 rejected ,非黑即白的既即视感 allSettled 总是走 then 的,也就是并发的 Promise 出现 reject 也不会走 catch ,需要自行遍历返回的数组,判断 status 来做错误捕获 对象中还有另

    2024年02月01日
    浏览(35)
  • 这些年Web前端面试的那些套路,优化后,ES-做到了几十亿数据检索-3-秒返回,前端音频框架

    默认情况下 routing参数是文档ID (murmurhash3),可通过 URL中的 _routing 参数指定数据分布在同一个分片中,index和search的时候都需要一致才能找到数据。 如果能明确根据_routing进行数据分区,则可减少分片的检索工作,以提高性能 。 在我们的案例中,查询字段都是固定的,不提供全

    2024年04月26日
    浏览(40)
  • 【Node.js实战】一文带你开发博客项目(API 对接 MySQL)

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,也会涉及到服务端 📃 个人状态: 在校大学生一枚,已拿多个前端 offer(秋招) 🚀 未来打算: 为中国的工业软件事业效力n年 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2Vue3项目实战 🥝

    2024年02月02日
    浏览(65)
  • 【Web3】Web3Js高频Api

    目录 Web3Js方法 初始化Web3实例 Web3Api 创建账号Api 获取余额Api 单位转换工具函数 Web3Js方法 web3.eth:用于与以太坊区块链和智能合约之间的交互。 web3.utils:包含一些辅助方法。 web3.shh:用于协议进行通信的P2P和广播。 web3.bzz:用于与群网络交互的Bzz模块。 初始化Web3实例 npm

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包