正文

一文搞懂js-web-api——dom(代码片段)

清风无影Q  清风无影Q  2022-12-08  637

关键词：

介绍

本章介绍 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

attribute和property的区别

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计算比较多，频繁操作可能会导致卡顿的一些问题

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 查询

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);

下期介绍js的高级用法

一文搞懂web端登录过程(代码片段)

一文搞懂web端登录过程无状态HTTP协议session和cookiecookie（存放在客户的浏览器上）session（存放在服务器端）session和cookie的区别token登录过程token验证在了解登陆过程的原理前，应该先弄清楚几个概念无状态HTTP... 查看详情

http/https一文搞懂(代码片段)

HTTP协议（HyperTextTransferProtocol，超文本传输协议）：是一种发布和接收HTML页面的方法。HTTPS（HypertextTransferProtocoloverSecureSocketLayer）简单讲是HTTP的安全版，在HTTP下加入SSL层。SSL（S 查看详情

http/https一文搞懂(代码片段)

一文搞懂tf.function(代码片段)

朋友们，如需转载请标明出处：https://blog.csdn.net/jiangjunshow在tensorflow1.x的时候，代码默认的执行方式是graphexecution（图执行），而从tensorflow2.0开始，改为了eagerexecution（饥饿执行）查看详情

一文彻底搞懂前端沙箱(代码片段)

什么是“沙箱”沙箱（Sandbox）[1]也称作：“沙箱/沙盒/沙盘”。沙箱是一种安全机制，为运行中的程序提供隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。沙箱能够安全的执行不受信... 查看详情

一文彻底搞懂zookeeper(代码片段)

本文是基于CentOS7.9系统环境，进行Zookeeper的学习和使用1.Zookeeper简介1.1什么是ZookeeperZookeeper是一个开源的分布式的，为分布式应用提供协调服务的Apache项目。本质上，就是文件系统+通知机制1.2Zookeeper工作机制Zookeepe... 查看详情

一文彻底搞懂zookeeper(代码片段)

一文彻底搞懂slam技术(代码片段)

什么是SLAM?SLAM (simultaneouslocalizationandmapping),也称为CML(ConcurrentMappingandLocalization),即时定位与地图构建，或并发建图与定位。问题可以描述为：将一个机器人放入未知环境中的未知位置，是否有办法让机器人一边逐步描... 查看详情

一文彻底搞懂slam技术(代码片段)

一文搞懂rpc原理(代码片段)

RPC原理解析什么是RPCRPC(RemoteProcedureCallProtocol)——远程过程调用协议，它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP/IP或UDP，为通信程序之间携带信... 查看详情

一文搞懂跨域问题(代码片段)

一文搞懂跨域问题同源策略跨域解决跨域办法同源策略是浏览器的一个安全策略，保证浏览器的安全运行，要求网页中的协议名，域名和端口号要完全一致，跨域违背了同源策略就会产生跨域，比如说在百度... 查看详情

一文搞懂模型量化算法(代码片段)

1，模型量化概述1.1，模型量化优点模型量化是指将神经网络的浮点算法转换为定点。量化有一些相似的术语，低精度（Lowprecision）可能是常见的。低精度模型表示模型权重数值格式为FP16（半精度浮点）或者INT8（8位的定点整数... 查看详情

新手向：一文搞懂requestparampathvariablerequestbody(代码片段)

@PathVariable和@RequestParam一般用于Get请求，分别是从路径里面去获取变量，也就是把路径当做变量，后者是从请求里面获取参数。RequestBody一般用于Post请求，获取请求Body中的JSON数据RequestParam@ApiOperation(value&#... 查看详情

一文多图搞懂kitti数据集下载及解析(代码片段)

转载自一文多图搞懂KITTI数据集下载及解析-阿里云开发者社区KITTIDataset1.图片下载：点击下载：https://s3.eu-central-1.amazonaws.com/avg-kitti/data_object_image_2.zip2.点云下载：点击下载：https://s3.eu-central-1.amazonaws. 查看详情

一文多图搞懂kitti数据集下载及解析(代码片段)

一文彻底搞懂docker中的namespace(代码片段)

什么是namespacenamespace是对全局系统资源的一种封装隔离。这样可以让不同namespace的进程拥有独立的全局系统资源。这样改变一个namespace的系统资源只会影响当前namespace中的进程，对其它namespace中的资源没有影响。以前Linux也... 查看详情

一文搞懂this指向(代码片段)

前言那你说一下js中的this指向吧！这句话已经成为面试官口中的高频面试题，作为前端开发的我们，你真的搞懂了this指向了吗？快来跟我一起来查漏补缺吧！通过几个小案例让大家更能直白的理解this指向。很... 查看详情

一文搞懂python列表list的截取(代码片段)

〝古人学问遗无力，少壮功夫老始成〞一文搞懂python列表list的截取，列表作为python中最常用的数据类型，如果搞懂它，将会对你学习python有特别大的好处，虽然基础，但是夯实基础，是你成功的阶梯哦... 查看详情