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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60467.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElasticSearch(一)数据类型

ElasticSearch&#xff08;一&#xff09;数据类型 1.简述 Es数据类型分为基础数据类型和复杂类型数据&#xff0c;掌握ES数据类型才能进一步使用ES检索数据内容。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…

CSS中的margin与padding

目录 一、margin 1.概念及作用 2.基本语法 3.margin的用法 二、padding 1.介绍 2.基本语法及要求 3. 用法 4.内边距和元素宽度 讲这些之前&#xff0c;先看一张图&#xff0c;便于理解 一、margin 1.概念及作用 CSS margin 属性用于在任何定义的边框之外&#xff0c;…

网深科技与中科方德完成兼容性认证

网深科技的产品NetInside可观测性分析平台与国产中科方德主流操作系统完成兼容性适配&#xff0c;系统名称&#xff1a;方德高可信服务器操作系统V4.0&#xff0c;系统运行稳定&#xff0c;性能卓越&#xff0c;完美兼容&#xff0c;能够为广大用户提供灵活、专业、直观可视性&…

docker 安装 Nginx

1、下载 docker pull nginx:latest 2、本地创建管理目录 mkdir -p /var/docker/nginx/conf mkdir -p /var/docker/nginx/log mkdir -p /var/docker/nginx/html 3、将容器中的相应文件复制到管理目录中 /usr/docker/nginx docker run --name nginx -p 80:80 -d nginxdocke…

tensorrtx部署yolov5 6.0

文章目录 一. yolov5 v6.0训练模型二.训练好的yolov5模型转tensorrt引擎 一. yolov5 v6.0训练模型 官网下载yolov5 v6.0代码 下载官方预训练好的模型 安装yolov5所需要的库文件&#xff0c;requirements.txt在下载好的yolov5源代码中有 pip install -r C:\Users\10001540…

C语言每日一练------------Day(7)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;两个数组的交集     双指针 &#x1f493;博主csdn个人主页&#xf…

Java自定义捕获异常

需求分析 ElectricalCustomerVO electricalCustomerVO new ElectricalCustomerVO(); electricalCustomerVO.setElcNumber(chatRecordsLog.getDeviceNumber()); List<ElectricalCustomerVO> electricalCustomerlist electricalCustomerMapper.selectElectricalCustomer…

Hadoop

阅读前请看一下&#xff1a;我是一个热衷于记录的人&#xff0c;每次写博客会反复研读&#xff0c;尽量不断提升博客质量。文章设置为仅粉丝可见&#xff0c;是因为写博客确实花了不少精力。希望互相进步谢谢&#xff01;&#xff01; 文章目录 阅读前请看一下&#xff1a;我是…

【pyqt5界面化工具开发-13】QtDesigner功能择优使用

目录 0x00 前言&#xff1a; 一、完成基本的布局 二、其他功能的使用 三、在代码行开发 0x00 前言&#xff1a; QtDesigner工具的择优使用&#xff1a; 1、他的界面开发&#xff0c;是我们主要需要使用的功能 2、他的其他功能的使用&#xff0c;有需要就可使用&#xff…

Redis持久化——RDF与AOF两种方式怎么做?有什么区别?

目录 1. 什么是RDB 2. save 和 bgsave 命令主动保存数据 2.1 save 2.2 bgsave 3. Redis 内部自动RDB机制 4. RDB 底层是如何实现 bgsave 的&#xff1f; 5. RDB 的缺点 6. 什么是AOF&#xff1f; 7. AOF文件的缺点&#xff1f; 8. AOF 重写文件配置 9. RDB 与 AOF …

docker启动paddlespeech服务,并使用接口调用

一、检查docker容器是否启动 1.输入命令 systemctl status docker 启动 systemctl start docker 守护进程重启 sudo systemctl daemon-reload 重启docker服务 systemctl restart docker 重启docker服务 sudo service docker restart 关闭docker service docker…

cvat 安装部署

官网地址&#xff1a; https://github.com/opencv/cvat/tree/masterhttps://github.com/opencv/cvat/tree/master 1.从官网上下载源码地址。 2.配置环境变量 vim /etc/profile source /etc/profile 或者执行&#xff1a; export CVAT_HOSTyour-ip-address 3.执行命令 …

2023年天府杯——C 题:码头停靠问题

问题背景&#xff1a; 某个港口有多个不同类型的码头&#xff0c;可以停靠不同种类的船只。每 艘船只需要一定的时间来完成装卸货物等任务&#xff0c;并且每个码头有容量 限制和停靠时间限制。港口需要在保证收益的情况下&#xff0c;尽可能地提高 运营效率和降低成本。同…

【大虾送书第七期】深入浅出SSD:固态存储核心技术、原理与实战

目录 ✨写在前面 ✨内容简介 ✨作者简介 ✨名人推荐 ✨文末福利 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&#xff1a;免费送书活动专栏地址 写在前面 近年来国家大力支持半导体行业&#xff0c;鼓励自主创新&#xff0c;中国SSD技术和产业…

C++信息学奥赛1178:成绩排序

#include<bits/stdc.h> using namespace std; int main(){int n;cin>>n; // 输入整数 n&#xff0c;表示数组的大小int arr[n]; // 创建大小为 n 的整型数组 arrstring brr[n]; // 创建大小为 n 的字符串数组 brrfor(int i0;i<n;i) cin>>brr[i]>>ar…

Greenplum-segment镜像分布策略

Greenplum作为一款基于PostgreSQL的OLAP分布式MPP架构&#xff0c;其内部的角色可以通过配置冗余来保证高可用性&#xff0c;无论是管理节点还是计算节点。管理节点可以为Master配置一个Standby来保证高可用&#xff0c;而计算节点则可以为每个Primary segment配置一个对应的Mi…

Linux常用命令(不定期更新)

记录一下自己工作中常用的linux命令 查询类 top 实时查看进程 free -h 查看内存 df -h 查看已挂在的存储 fdisk -l 查看所有存储&#xff0c;包含未挂载 编辑类 passwd 修改密码&#xff0c;要进入到系统

list(介绍与实现)

目录 1. list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.2.5 list modififiers 1.2.6 list的迭代器失效 2. list的模拟实现 2.1 模拟实现list 2.2 list的反向迭代器 1.…

浅析Linux虚拟网络技术

文章目录 概述Tap/tun设备tun/tap的工作机制 Bridge网桥Bridge的工作机制Bridge IP 相关参考 概述 在传统的网络环境中&#xff0c;一台物理主机包含一张或多张网卡&#xff0c;要实现与其它物理主机之间的通信&#xff0c;需要将自身的网卡通过路由器或者交换机连接到外部的物…

vue3 页面显示中文,分页显示中文

vue3 分页默认为英文 &#xff0c;但想要中文显示 那么在App.vue中的代码为三步即可&#xff0c;引入中文&#xff0c;声明中文 &#xff0c;绑定中文&#xff1b; 1. import zhCn from element-plus/es/locale/lang/zh-cn&#xff1b; 2. let locale zhCn; 3. :locale&q…