原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法
最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能。跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入.
首先,我们写个通用的html标签:
这个html包括了事件,样式,属性,内容.
我们接着用正则把这个html的每一部分匹配出来,我们需要的是:
1、标签名, 因为创建dom节点的时候需要
2、属性和内容都要单独分离出来
为了便于创建dom,我们用一个json保存,比如这个标签,我们要处理成的最终结果是:
{
id:"test
inner:"this is a test string
name:"test"
onclick:"test();"
style:"color:red;background:green;"
tag:"div"
}
如果有了这个结构,只要拿到对应的键和值,组装成一个dom就可以搞定了
var o = document.createElement( obj['tag'] );
o.innerHTML = obj['inner'];
delete obj['inner'];
delete obj['tag'];
for( var key in obj ){
o.setAttribute( key, obj[key] );
}
document.body.appendChild( o );
解释思路已经明确,那么我们首先就要把html标签的每部分用正则表达式匹配出来
var re = /(.*)?/;
var str = '
';
var res = str.match(re);
恩,这就是我们匹配出来的结果,从图中可以看出,
res[1]存储的是标签名称,只需要把两边的空格去掉
res[2]存储的是属性和值,我们用split函数按空格切割一次,再用split函数按'='切割一次,就能分解出来了
res[4]存储的就是字符串的内容
上面3部分,只要用循环和字符串稍加处理就可以得出目标结果了
那么完整的处理代码就是:
var re = /(.*)?/;
var str = '
';
var res = str.match(re);
var tagName = null, attrList = [], arr = [], obj = {};
if( res[1] ) {
tagName = res[1].trim();
obj['tag'] = tagName;
}
if( res[4] ) {
obj['inner'] = res[4];
}
if ( res[2] ) {
attrList = res[2].split( /\s+/ );
for( var i = 0, len = attrList.length; i < len; i++ ){
arr = attrList[i].split("=");
// console.log( arr );
obj[arr[0]] = arr[1].replace( /(^[\'\"]+|[\'\"]$)/g, function(){
return '';
} );
}
}
var o = document.createElement( obj['tag'] );
o.innerHTML = obj['inner'];
delete obj['inner'];
delete obj['tag'];
for( var key in obj ){
o.setAttribute( key, obj[key] );
}
document.body.appendChild( o );
可以自行封装一个函数,我相信你应该轻易就能封装出来吧.
以上这篇[js高手之路]HTML标签解释成DOM节点的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
原生js由html创建节点,[js高手之路]HTML标签解释成DOM节点的实现方法相关推荐
- html dom节点类型,浅谈Javascript中的12种DOM节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- react.js app_如何创建Next.js入门程序以轻松引导新的React App
react.js app Getting started with a new React app is easier than ever with frameworks like Next.js. ...
- myeclipse 生成html文件 调用js,MyEclipse怎么创建一个js文件
优质回答 回答者:牛小凡 点击file -- new -- 输入javascript 然后选择下面的javascript source file 输入名字 ,点击finish 就能新建js文件了,如下 ...
- Dom基础 特殊的节点 获取元素节点的内容 获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 1 window.onload = function () { 2 var c = new Vue({ 3 e ...
- 【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
故事背景:有一天,强哥整了个动态渲染的列表代码如下 app.component.html <div><button (click)="add()">添加一行 ...
- JS学习笔记六:js中的DOM操作
1. JS学习笔记六:js中的DOM操作 文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
- DOM节点创建(jQuery)
1DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况: ...
- js 动态生成html(js根据后台返回数据生成html页面中的table标签)(转义字符)
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
最新文章
- 学习的一周?【8.5进度报告】
- 人脸识别技术大总结——Face Detection Alignment
- 我为什么重新开始学习数学?
- Linux web服务器初始化设置
- Faster R-CNN 英文论文翻译笔记
- 钉钉轻松顶住信息洪流的原因,竟然是它
- myeclipse中的classpath .
- 什么是交换机?交换机的工作原理是什么?
- 保证Web数据库安全 认真把好七道关
- HTML页面在IOS上出现卡顿的解决方案(overflow:scroll)
- flask创建虚拟环境
- Nginx端口映射(外网访问)
- 张宇1000题高等数学 第九章 一元函数积分学的计算
- 谷歌人工智能背后的大脑:没有他就没有今天的谷歌AI
- Mybatis-Plus报错:Invalid bound statement (not found)
- vscode 用户设置与工作区设置
- 计算机应用大赛宣传稿,江苏开放大学计算机应用基础中国名城宣传片
- 使用Termux把Android手机变成SSH服务器
- Windows下Python的安装
- Alist+PotPlayer实现高清影视在线观看
热门文章
- Compensating-Transaction模式
- 如何基于MFC制作简易绘图软件
- 【acadres.dll文件丢失怎么办】acadres.dll文件丢失的解决办法
- 2022年全新数据仓库面试总结大全
- 应广单片机003烧录器自定义封装使用技巧
- 素数筛线性筛详细详解(个人总结思路超长版)
- iOS-音频播放 AVAudioPlayer
- 网络规划设计师上午真题及解析(2019)
- 公司章程如何设计规避股权纠纷
- Caused by: java.lang.NumberFormatException: For input string: “?2130969371“