当前位置： 首页 > news >正文

【ES6】Proxy的高级用法，实现一个生成各种 DOM 节点的通用函数dom

news 文章来源：https://blog.csdn.net/qq_22744093/article/details/132584940 2025/2/8 23:18:53

下面的例子则是利用get拦截，实现一个生成各种 DOM 节点的通用函数dom。

<body>
</body><script>const dom = new Proxy({}, {get(target, property) {return function(attrs = {}, ...children) {const el = document.createElement(property);for (let prop of Object.keys(attrs)) {el.setAttribute(prop, attrs[prop]);}for (let child of children) {if (typeof child === 'string') {child = document.createTextNode(child);}el.appendChild(child);}return el;}}
});const el = dom.div({},'Hi, my name is ',dom.a({href: 'https://blog.csdn.net/qq_22744093?type=blog'}, 'kexuexiong'),'. I like:',dom.ul({},dom.li({}, 'The web'),dom.li({}, 'Food'),dom.li({}, '…actually that\'s it'))
);document.body.appendChild(el);</script>

输出结果：
在这里插入图片描述

相关文章：

【ES6】Proxy的高级用法，实现一个生成各种 DOM 节点的通用函数dom

下面的例子则是利用get拦截&#xff0c;实现一个生成各种 DOM 节点的通用函数dom。 <body> </body><script>const dom new Proxy({}, {get(target, property) {return function(attrs {}, ...children) {const el document.createElement(property);for …...

编程日记 2023/9/5 19:30:20

气象站是什么设备？功能是什么？

气象站是一种用于测量和记录气象数据的设备。它通常是由各种传感器及其数据传输设备、固定设备和供电设备组成&#xff0c;可以测量风速、风向、温度、湿度、气压、降水量等气象要素&#xff0c;并将这些数据记录下来&#xff0c;以便进一步分析和研究。 气象站通常设置在广阔…...

编程日记 2023/9/5 19:29:18

227. 基本计算器 II Python

文章目录 一、题目描述示例 1示例 2示例 3 二、代码三、解题思路 一、题目描述 给你一个字符串表达式 s &#xff0c;请你实现一个基本计算器来计算并返回它的值。 整数除法仅保留整数部分。 你可以假设给定的表达式总是有效的。所有中间结果将在 [-2^31, 2^31 - 1]的范围内…...

编程日记 2023/9/5 19:28:17

python中字典常用函数

字典常用函数 cmp(dict1,dict2) &#xff08;已删除&#xff0c;直接用>,<,即可&#xff09; 如果两个字典的元素相同返回0&#xff0c;如果字典dict1大于字典dict2返回1&#xff0c;如果字典dict1小于字典dict2返回-1。 先比较字典的长度&#xff0c;然后比较键&#x…...

编程日记 2023/9/5 19:27:16

leetcode88合并两个有序数组

题目&#xff1a; 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&…...

编程日记 2023/9/5 19:26:14

Ceph入门到精通-Nginx 大量请求 延迟优化

优化nginx以处理大量请求并减少延迟可以通过以下几种方法实现&#xff1a; 调整worker_processes和worker_connections参数&#xff1a;增加worker_processes值可以增加nginx的进程数量&#xff0c;提高并发处理能力。增加worker_connections参数的值可以增加每个worker进程可…...

编程日记 2023/9/5 19:25:13

Vulnstack----5、ATTCK红队评估实战靶场五

文章目录 一 环境搭建二 外网渗透三 内网信息收集3.1 本机信息收集3.2 域内信息收集 四 横向移动4.1 路由转发和代理通道4.2 抓取域用户密码4.3 使用Psexec登录域控4.4 3389远程登录 五、痕迹清理 一 环境搭建 1、项目地址 http://vulnstack.qiyuanxuetang.net/vuln/detail/7/ …...

编程日记 2023/9/5 19:24:12

QT 5.8

QT与Qt Creator&#xff0c;前者是框架&#xff0c;类似与MFC&#xff0c;而后者是QT的编译器&#xff0c;也可以使用Visual studio编辑&#xff0c;编译需要其他的 Index of /new_archive/qt/5.8/5.8.0...

编程日记 2023/9/5 19:23:11

AIGC+思维导图：提升你的学习与工作效率的「神器」

目录 一、产品简介 二、功能介绍 2.1 AI一句话生成思维导图 2.2百万模版免费用 2.3分屏视图&#xff0c;一屏读写 2.4团队空间&#xff0c;多人协作 2.5 云端跨平台化 2.6 免费够用&#xff0c;会员功能更强大 2.7 支持多种格式的导入导出 三、使用教程 3.1 使用AI…...

编程日记 2023/9/5 19:22:09

javaScript:DOM元素的获取（静态/动态获取）

目录 一.dom元素获取的意义与使用场景 使用场景&#xff08;绝大多数js操作都需要dom操作&#xff09; 总结/疑问解答&#xff01; 二.DOM元素获取的常用方法&#xff08;重点&#xff09; 获取dom元素&#xff08;动态&#xff09; document.gerElementbyId() docume…...

编程日记 2023/9/5 19:21:08

数据结构前言

一、什么是数据结构&#xff1f; 数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。 上面是百度百科的定义&#xff0c;通俗的来讲数据结构就是数据元素集合与数据元素集合或者数据元素与数据元素之间的组成形式。 举个…...

编程日记 2023/9/5 19:20:07

Docker基于alpine带glibc的小型容器image

由于程序是C写的&#xff0c;gc编译&#xff0c;找了几个容器&#xff0c;生成比较小的是debianslim和ubuntu&#xff0c;生成后的大小分别为88MB&#xff0c;和91MB&#xff0c;还是太大了&#xff0c;于是想起一些小型容器如busybox或者alpine自己装glibc&#xff0c;但是试了…...

编程日记 2023/9/5 19:19:06

Nginx教程

Nginx教程 01-Nginx简介02-windows安装Nginx03-Nginx目录结构04-Linux安装Nginx05-linux下源码安装nginx06-linux下nginx配置07-在docker中安装nginx08-源码安装和yum安装的区别09-Nginx运行组和运行用户10-卸载nginx11-nginx的基本原理和架构12-nginx是如何处理请求的13-nginx…...

编程日记 2023/9/5 19:18:05

直播预约｜哪吒汽车岳文强：OEM和Tier1如何有效对接网络安全需求

信息安全是一个防护市场。如果数字化程度低&#xff0c;数据量不够&#xff0c;对外接口少&#xff0c;攻击成本高&#xff0c;所获利益少&#xff0c;自然就没有什么攻击&#xff0c;车厂因此也不需要在防护上花费太多成本。所以此前尽管说得热闹&#xff0c;但并没有太多真实…...

编程日记 2023/9/5 19:17:04

hiveserver2经常挂断的原因

hiveserver2经常挂断的原因 HiveServer2 经常挂断可能有多种原因&#xff0c;以下是一些可能导致挂断的常见原因&#xff1a; 资源不足&#xff1a;HiveServer2 需要足够的内存和 CPU 资源来处理查询请求。如果资源不足&#xff0c;可能会导致 HiveServer2 挂断。请确保在配置…...

编程日记 2023/9/5 19:16:03

openeuler 23.03 安装mysql 8.X

遇到一堆问题&#xff1a;直接从mysql官下载&#xff0c;都不行。下列是失败的&#xff1a; mysql80-community-release-el8-1.noarch.rpm mysql-8.0.34-1.el8.x86_64.rpm-bundle.tar mysql-8.1.0-1.el9.x86_64.rpm-bundle.tar 后来想从openeuler下载应该靠谱&#xff1a;ht…...

编程日记 2023/9/5 19:15:02

网络安全—0基础学习笔记（黑客）

一、前言 1.这是一条坚持的道路,三分钟的热情可以放弃往下看了. 2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发. 3.有时多 google,baidu,我们往往都遇不到好心的大神,谁会无聊天天给你做解答. 4.遇到实在搞不懂的,可以先放放,以后再来解决. …...

编程日记 2023/9/5 19:14:00

react HashRouter 与 BrowserRouter 的区别及使用场景

一、简介 在单页面应用中&#xff0c;如何在切换页面后&#xff0c;不刷新浏览器呢&#xff1f;为了解决这个问题&#xff0c;有两种方法&#xff0c;就是hash路由模式、history路由模式&#xff0c;而 react router 的两种路由就是使用这两种路由模式。 二、区别 HashRouter…...

编程日记 2023/9/5 19:12:59

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU硬件那些事（2.3）- 串行NOR Flash下载算法(J-Link工具篇)

https://www.cnblogs.com/henjay724/p/13770137.html 大家好&#xff0c;我是痞子衡&#xff0c;是正经搞技术的痞子。今天痞子衡给大家介绍的是J-Link工具下i.MXRT的串行NOR Flash下载算法设计。 在i.MXRT硬件那些事系列之《在串行NOR Flash XIP调试原理》一文中&#xff0c;痞…...

编程日记 2023/9/5 19:11:58

多目标应用：基于多目标向日葵优化算法（MOSFO）的微电网多目标优化调度MATLAB

一、微网系统运行优化模型 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、多目标向日葵优化算法 多目标向日葵优化算法&#xff08;Multi-objective sunflower optimization&#xff0c;MOS…...

编程日记 2023/9/5 19:10:57

智能安全科技，Vatee万腾为您服务

在智能科技的引领下&#xff0c;Vatee万腾将为您点亮投资之路&#xff0c;助您在金融市场中抓住机遇&#xff0c;实现财务目标。作为一家融合科技与投资的先锋平台&#xff0c;Vatee万腾致力于为投资者提供智能化的投资方案和支持。 Vatee万腾以其先进的智能科技为基础&#xf…...

编程日记 2023/9/5 19:09:55

Scala中的类型检查和转换，以及泛型，scala泛型的协变和逆变

Scala中的类型检查和转换&#xff0c;以及泛型 类型检查和转换 说明 &#xff08;1&#xff09; obj.isInstanceOf[T]&#xff1a;判断 obj 是不是T 类型。 &#xff08;2&#xff09; obj.asInstanceOf[T]&#xff1a;将 obj 强转成 T 类型。 &#xff08;3&#xff09; cla…...

编程日记 2023/9/5 19:08:54

【数据结构】C语言队列(详解)

前言: &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨专栏:http://t.csdn.cn/oXkBa ⛳⛳本篇内容:c语言数据结构--C语言实现队列 目录 一.队列概念及结构 1.1队列的概念 1.2队列的结构 二.队列的实现 2.1头文…...

编程日记 2023/9/5 19:07:53

【数据结构初阶】一. 复杂度讲解

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 学C的第三十四天【程序环境和预处理】_高高的胖子的博客-CSDN博客 1 . 算法效率 &#xff08;1&#xff09;. 什么是数据结构&#xff1a; 数据结构(Data Structure)是计算机存储、…...

编程日记 2023/9/5 19:06:53

Jmete+Grafana+Prometheus+Influxdb+Nginx+Docker架构搭建压测体系/监控体系/实时压测数据展示平台+遇到问题总结

背景 需要大批量压测时&#xff0c;单机发出的压力能力有限&#xff0c;需要多台jmeter来同时进行压测&#xff1b;发压机资源不够&#xff0c;被压测系统没到瓶颈之前&#xff0c;发压机难免先发生资源不足的情形&#xff1b;反复压测时候也需要在不同机器中启动压测脚本&…...

编程日记 2023/9/5 19:05:52

php提交表单将html相互字符转化的封装函数

在 PHP 中&#xff0c;您可以使用 htmlspecialchars() 函数将 HTML 字符转换为文本。该函数将把 <、>、" 和 等特殊字符转换为对应的 HTML 实体&#xff0c;从而避免跨站点脚本&#xff08;XSS&#xff09;攻击。 例如&#xff0c;如果您有一个表单输入字段的值&a…...

编程日记 2023/9/5 19:04:51

7 Series FPGAs GTX/GTH Transceivers

目录 1. Overview2. Block Diagram3. Transmitter4. Receiver5. Physical Coding Sublayer（PCS）6. Physical Medium Attachment（PMA）本博客为Xilinx 7系列FPGA的千兆比特高速收发器（Gigabit Transceiver, GT）介绍 ug476 - 7 Series FPGAs GTX GTH TransceiversUser Guide…...

编程日记 2023/9/5 19:03:49

iOS系统下轻松构建自动化数据收集流程

在当今信息爆炸的时代&#xff0c;我们经常需要从各种渠道获取大量的数据。然而&#xff0c;手动收集这些数据不仅耗费时间和精力&#xff0c;还容易出错。幸运的是&#xff0c;在现代科技发展中有两个强大工具可以帮助我们解决这一问题——Python编程语言和iOS设备上预装的Sho…...

编程日记 2023/9/5 19:02:48

Android基础之Activity生命周期

Activity是Android四大组件之一、称为之首也恰如其分。 Activity直接翻译为中文叫活动。在Android系统中Activity就是我看到的一个完整的界面。 界面中看到的TextView(文字&#xff09;、Button(按钮)、ImageView&#xff08;图片&#xff09;都是需要Activity来承载的。 总…...

编程日记 2023/9/5 19:01:47

Golang 程序漏洞检测利器 govulncheck（一）：安装和使用方法

govulncheck 是什么&#xff1f; govulncheck 是一个命令行工具&#xff0c;可以帮助 Golang 开发者快速找到项目代码和依赖的模块中的安全漏洞。该工具可以分析源代码和二进制文件&#xff0c;识别代码中对这些漏洞的任何直接或间接调用。 默认情况下&#xff0c;govulnchec…...

编程日记 2023/9/5 19:00:46

网站开发主管工作内容/汕头网站建设推广

Zookeeper安装 zookeeper的安装分为三种模式&#xff1a;单机模式、集群模式和伪集群模式。 单机模式 首先&#xff0c;从Apache官网下载一个Zookeeper稳定版本&#xff0c;本次教程采用的是zookeeper-3.4.9版本。 http://apache.fayea.com/zookeeper/zookeeper-3.4.9/然后解压…...

编程日记 2025/2/8 16:53:52

泰和网站制作/营销推广的作用

摘自&#xff1a;http://www.cnblogs.com/justinw/archive/2006/12/29/607498.html下面这些故事个个都很经典&#xff0c;值得思考...------------------------------------犯戒 老和尚携小和尚游方&#xff0c;途遇一条河&#xff1b;见一女子正想过河&#xff0c;却又不敢过。…...

编程日记 2025/2/8 15:34:30

wordpress 迅搜/百度推广怎么才能效果好

Python之路【第四篇】&#xff1a;模块 模块&#xff0c;用一砣代码实现了某个功能的代码集合。 类似于函数式编程和面向过程编程&#xff0c;函数式编程则完成一个功能&#xff0c;其他代码用来调用即可&#xff0c;提供了代码的重用性和代码间的耦合。而对于一个复杂的功能来…...

编程日记 2025/2/8 14:55:44

网站建设 技术支持 阿里/韩国电视剧

一.网络架构层次模型 1.网络层次架构组成如图&#xff1a; 核心层&#xff1a;放置外网互联路由器设备 核心层的功能主要是实现骨干网络之间的优化传输&#xff0c;骨干层设计任务的重点通常是冗余能力、可靠性和高速的传输 汇聚层&#xff1a;放置的三层交换机 汇聚层是楼群或…...

编程日记 2025/2/8 12:55:41

4.请简述网站建设流程的过程/seo网站免费优化软件

4k摄像机是什么概念呢&#xff1f;今天就由速名网小编带大家一起去了解一下。4K分辨率属于超高清分辨率&#xff0c;在这种分辨率下&#xff0c;拍摄的视频效果就如同看电影一样。画面中的每一个细节&#xff0c;每一个特写都如同亲临现场观看。4K分辨率是指水平方向上每行的像…...

编程日记 2025/2/8 12:19:24

ps做素材下载网站有哪些/宁波做seo推广企业

/...

编程日记 2025/2/8 11:12:34