dom转换成jquery(把dom节点输出json格式)

[JavaScript]JS实战案例分享：将DOM节点转换为JSON数据|标签输入框NodeJS专栏：Node.js从初学者到精通

博主的前端之路：前端之路任重而道远

TypeScript知识总结：TypeScript从入门到熟练

个人简介：一名大三学生，一个拒绝平庸的普通人。

您的一键三连是我更新的最大动力！

分享博主自己使用牛客网：面试题非常全面的求职网站，点击跳转

文章目录

前言1.DOM节点转换为JSON数据效果演示案例需要JavaScript实现2.标签输入框效果演示案例需要JavaScript实现结论前言

最近博主们在牛客网上写题，巩固基础知识。牛客网不仅拥有公司真题、专题练习、面试题库、在线编程等功能，还有非常强大的AI模拟面试功能，这对于求职者来说简直是福音！

牛客网的题库非常全面。无论你是前端还是后端人，想要准备考试或者面试，或者想要提升自己，你都可以在牛客网找到适合你的问题。点击链接前往注册并登录：点此进入牛客网

牛客网Niuke.com本文所有示例均来自牛客网题库/在线编程/JS。这些都是前端开发中常用的功能。以此记录答题过程，夯实基础！

1、DOM节点转JSON数据

效果演示

有以下HTML和CSS：

HTML结构

divid='jsContainer'ulclass='js-test'id='jsParent'lidata-index='0'1/lilidata-index='1'2/li/ulspanstyle='font-weight:粗体；'3/span4/div

案例需求

页面存在id=jsContainer的节点A。根据以下需求实现dom2json功能

dom2json需要分析整个节点A的dom结构，并将其结构转换为对应的json对象。需要获取dom结构的标签名称、所有属性以及子节点。文档片段中的属性格式为name='value'，解析后的格式为{name:value}。属性值是String类型，不需要解析。随机生成的文档片段仅包含nodeType为1和3的节点，其他节点类型不需要考虑。纯文本也被视为一个节点。json格式为{tag:'文本',content:'文本内容'}。内容是对文本内容进行修剪的结果。如果结果为空，则忽略当前节点。返回结果中的标签名称不区分大小写。如果节点不包含属性值或子节点，则对应的结果中需要保留属性和子字段，如{tag:'div',attributes:{},children:[]}。对上述HTML结构执行dom2json后的结果如上所示。

JavaScript实现

functiondom2json(){constroot=document.getElementById('jsContainer')returnJSON.stringify(getDomJson(root))}functiongetDomJson(dom){letdomObj;}if(dom.nodeType===1){//如果是元素节点domObj={tag:dom.localName,attribute:{},kids:[]}//属性列表letattlist=dom.attributes;for(leti=0,l=attlist.length;il;i++){//.name获取属性名称，value获取属性值domObj.attributes[attlist[i].name]=attlist[i].value}//子元素列表letchildList=dom.childNodesfor(leti=0,l=childList.length;il;i++){//递归constchildJson=getDomJson(childList[i])if(childJson){domObj.children.push(childJson)}}}elseif(dom.nodeType===3){//如果是文本节点constctn=dom.textContent.trim()if(ctn){domObj={tag:'text',content:ctn}}}returndomObj}console.log('test',dom2json());

本案例主要关注DOM操作和递归算法的应用。

知识点：

Node.nodeType表示节点的类型。

Element.localName、Node.nodeName、Element.tagName都可以获取节点的标签名。

元素节点有tagName、nodeName、localName属性；tagName和nodeName相同，都是大写，localName是小写。其他节点只有nodeName和localName属性，没有tagName属性，其中：

属性节点localName和nodeName是相同的。文本节点localName为null，nodeName为#text。从DOM层面来看，nodeName是节点接口上的属性，tagName是元素接口上的属性。所有节点都继承节点接口，只有元素节点继承元素节点，所以nodeName比tagName有更大的使用范围。

Element.attributes属性返回元素的所有属性节点的实时集合。

Node.childNodes返回包含指定节点的子节点的集合，该集合是立即更新的集合。

Node.textContent属性表示节点及其后代的文本内容。

Trim()方法删除字符串两端的空白字符。

2、标签输入框

效果演示

有以下HTML和CSS：

HTML结构

divclass='tag-input'spanclass='tag'前端/spanspanclass='tag'编程题/spanspanclass='tag'示例/spanspanclass='tag'label/spaninputtype='text'class='js-input'maxlength='6'placeholder='请输入标签'/div

CSS样式

.tag-input{position:相对；border:1px实心#cccccc；填充：05px；显示：柔性；flex-flow:换行；}.js-input{width:450px;高度：22px；行高：22px；字体大小：16px；填充：0；边距：5px0;大纲：无；border:无；宽度：6.5em；高度：24px；行高：24px;}.tag{padding:010px;边距：5px5px5px0;颜色：#ffffff;高度：24px；行-高：24px；边框半径：12px；字体大小：13px;}

案例需求

上图展示了简化版的标签输入框，功能如下：

当用户输入内容并按下回车键时，输入框的内容会以标签的形式显示在输入框的前面，并且输入框的内容会被清除。当用户按下删除键时，如果输入框当前没有内容，则之前的标签将被删除。标签需要删除字符串两端多余的空格。标签不能为空字符串。标签不能重复。如果输入相同内容的现有标签，则不会添加该标签，并且输入框将被清除。相关键值，输入key=13，删除key=8。

JavaScript实现

vartagInput={//isInited表示是否已初始化isInited:false,//初始化方法init:init,//绑定事件处理函数的方法bindEvent:bindEvent,//添加标签的方法addTag:addTag,//删除标签的方法removeTag:removeTag};//初始化tagInput.init();//初始化函数functioninit(){varthat=this;if(that.isInited)返回；that.isInited=true;//保存class为js-input输入框的dom元素引用that.input=document.getElementsByClassName('js-input')[0];that.bindEvent();}//注册事件函数bindEvent(){varthat=this;var输入=that.input;如果返回；//为输入绑定按键事件input.addEventListener('keydown',function(event){//判断用户是否按下了Enter键varisEnter=(event.keyCode===13);//判断是否用户按下了删除键varisDelete=(event.keyCode===8);//防止默认行为(isEnter||isDelete)event.pventDefault();isEnterthat.addTag();isDeletethat.removeTag();});//给input的父元素绑定click事件input[xss_clean].addEventListener('click',function(){//使用input获取焦点input.focus();});}//添加标签功能functionaddTag(){varthat=this,input=that.input,val=input.value.trim(),tagList=document.getElementsByClassName('tag'),isAdd=true;//遍历已有标签，当输入内容已存在于标签中时，不添加span元素for(vari=0,l=tagList.length;il;i++){if(tagList[i][xss_clean]===val){isAdd=falsebreak}}//如果val不为空且isAdd为true，则添加新的span元素if(isAddval){varnewSpan=document.createElement('span')newSpan.className='tag'newSpan[xss_clean]=val//在input的父节点中的input节点之前插入newSpan节点input[xss_clean].insertBefore(newSpan,input)}input.value=''}//删除标签函数removeTag(){varthat=this,input=that.input,val=input.value,tagList=document.getElementsByClassName('tag');if(val){//如果val不为空，则应该删除该值的最后一位input.value=val.slice(0,-1)}elseif(tagList.length0){//如果val为空且tagList中有span标签，删除最后一个标签tagList[tagList.length-1].remove()}}

本案例的实施并不困难，主要是其逻辑思维。只要动动脑筋去思考、去写，一般都能实现。

知识点：

Node.insertBefore()方法在引用节点之前插入一个具有指定父节点的子节点。slice(begin,end)提取字符串的一部分并返回一个新字符串，而不修改原始字符串。从下标begin到end提取。如果end0表示从末尾开始计数，例如end为-3，则end相当于strLength-3结语

本文文章所有内容均来自JS题库牛客网：

牛客网的JS题库非常实用。我在写作过程中检查并填补了空白，收获很多。我向大家强烈推荐牛客网！

如果这篇文章对您有帮助，请给我四分吧！

根基不牢，地动山摇！快来和牛客博主一起复习题、巩固基础知识吧！