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

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

news 2026/4/4 18:17:24

下面的例子则是利用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

品牌想被AI推荐，必须满足这3个条件

我们团队去年给一家智能家居客户做GEO交付&#xff0c;第一个月内容铺了三千篇&#xff0c;数据后台一打开&#xff0c;引用率不到1.7%。客户电话直接打过来问&#xff1a;“你们是不是把同一篇文章&#xff0c;用AI换了个说法发了三千遍&#xff1f;”这就是很多营销服务公司踩…...

编程新知 2026/4/4 17:53:50

阿里通义Z-Image-GGUF功能体验：中英文提示词支持实测

阿里通义Z-Image-GGUF功能体验&#xff1a;中英文提示词支持实测 1. 快速开始 1.1 30秒快速上手 如果你已经迫不及待想体验这个强大的文生图模型&#xff0c;跟着这几步操作&#xff1a; # 1. 访问WebUI界面 浏览器打开: http://<服务器IP>:7860# 2. 加载Z-Image工作…...

编程新知 2026/4/4 17:33:39

告别Keil和IAR？试试这款专为RISC-V打造的免费IDE：MounRiver Studio深度体验

从Keil/IAR到MounRiver Studio&#xff1a;RISC-V开发者的IDE迁移实战指南 当ARM架构的STM32开发者首次接触RISC-V平台时&#xff0c;往往会面临一个灵魂拷问&#xff1a;能否延续Keil或IAR那套熟悉的开发流程&#xff1f;事实上&#xff0c;专为RISC-V打造的MounRiver Studio正…...

编程新知 2026/4/4 17:21:13

RXG24预充电阻-解决新能源设备启动电流浪涌难题

电力电子设备启动阶段的电流浪涌&#xff0c;是损坏电路元件、影响设备寿命的核心隐患。在新能源汽车、变频器、光伏逆变器等各类高压、大功率设备中&#xff0c;预充电阻作为关键保护元器件&#xff0c;承担着限制启动电流、平滑启动过程的重要使命。RXG24 系列预充电阻是一款…...

编程新知 2026/4/4 17:07:06

数学建模实战：用熵权法+PCA搞定你的综合评价问题（附Python完整代码与数据）

数学建模实战&#xff1a;用熵权法PCA搞定你的综合评价问题&#xff08;附Python完整代码与数据&#xff09; 在数学建模竞赛中&#xff0c;综合评价问题一直是让参赛者头疼的难题。如何从一堆看似杂乱无章的指标中&#xff0c;提炼出关键信息&#xff0c;给出客观公正的评价&a…...

编程新知 2026/4/4 15:35:38

永久保存QQ空间记忆：GetQzonehistory数据备份工具完全指南

永久保存QQ空间记忆&#xff1a;GetQzonehistory数据备份工具完全指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 在数字时代&#xff0c;我们的青春记忆大多存储在社交平台中&…...

编程新知 2026/4/4 15:07:14

5个实用技巧：让waifu2x-caffe成为你的图像超分辨率利器

5个实用技巧&#xff1a;让waifu2x-caffe成为你的图像超分辨率利器 【免费下载链接】waifu2x-caffe waifu2xのCaffe版 项目地址: https://gitcode.com/gh_mirrors/wa/waifu2x-caffe waifu2x-caffe是一个基于Caffe深度学习框架的图像超分辨率与降噪工具&#xff0c;专为W…...

编程新知 2026/4/4 14:22:39

为什么Python开发者需要关注RadarSimPy：现代雷达系统仿真的技术突破

为什么Python开发者需要关注RadarSimPy&#xff1a;现代雷达系统仿真的技术突破 【免费下载链接】radarsimpy Radar Simulator built with Python and C 项目地址: https://gitcode.com/gh_mirrors/ra/radarsimpy 在自动驾驶、无人机探测和智能安防等领域&#xff0c;雷…...

编程新知 2026/4/4 12:00:19

联想拯救者Y7000系列BIOS隐藏功能一键解锁工具：3分钟开启高级设置，轻松安装黑苹果

联想拯救者Y7000系列BIOS隐藏功能一键解锁工具&#xff1a;3分钟开启高级设置&#xff0c;轻松安装黑苹果 【免费下载链接】LEGION_Y7000Series_Insyde_Advanced_Settings_Tools 支持一键修改 Insyde BIOS 隐藏选项的小工具&#xff0c;例如关闭CFG LOCK、修改DVMT等等 项目地…...

编程新知 2026/4/4 11:15:52

像素时装锻造坊应用场景：NFT项目像素角色皮肤的批量生成方案

像素时装锻造坊应用场景&#xff1a;NFT项目像素角色皮肤的批量生成方案 1. 项目背景与核心价值 像素时装锻造坊&#xff08;Pixel Fashion Atelier&#xff09;是一款专为NFT项目设计的像素角色皮肤批量生成工具。它基于Stable Diffusion与Anything-v5技术栈&#xff0c;将传…...

编程新知 2026/4/4 11:13:47