位置: IT常识 - 正文

【JavaScript】JS实用案例分享:DOM节点转JSON数据 | 标签输入框(js javascript)

编辑:rootadmin
【JavaScript】JS实用案例分享:DOM节点转JSON数据 | 标签输入框

推荐整理分享【JavaScript】JS实用案例分享:DOM节点转JSON数据 | 标签输入框(js javascript),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,,:javascript,javascript js,js实验,js类的实现,javascript js,js实验,内容如对您有帮助,希望把文章链接给更多的朋友!

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结:TypeScript从入门到精通(十万字超详细知识点总结) 🧑‍💼个人简介:大三学生,一个不甘平庸的平凡人🍬 👉 你的一键三连是我更新的最大动力❤️! 🏆分享博主自用牛客网🏆:一个非常全面的面试刷题求职网站,点击跳转🍬

文章目录前言1、DOM节点转JSON数据效果演示案例需求JavaScript实现2、标签输入框效果演示案例需求JavaScript实现结语前言

最近博主一直在牛客网刷题巩固基础知识,牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!

牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点我进入牛客网

牛客网牛客网

本篇文章所有示例来自于牛客网题库/在线编程/JS篇,这些都是前端开发中常用的功能,借此记录一下刷题过程,巩固基础!

1、DOM节点转JSON数据效果演示

有以下HTML和CSS:

HTML结构

<div id="jsContainer"> <ul class="js-test" id="jsParent"> <li data-index="0">1</li> <li data-index="1">2</li> </ul> <span style="font-weight: bold;">3</span> 4</div>案例需求

页面上存在id=jsContainer的节点A,按照如下需求实现 dom2json 函数

dom2json需要分析整个节点A的dom结构,并将其结构转换为对应的json对象。需要获取dom结构的标签名称(tag),所有属性(attributes),子节点(children)。文档片段中的属性形式均为 name="value",解析之后的格式为{name: value}, 属性值为String类型,不需要做解析。随机生成的文档片段中,只包含 nodeType 为1(element)和3(text)的节点,不需要考虑其他节点类型。纯文本也视为一个节点, json格式为 {tag: 'text', content: '文本内容'},content为文本内容执行trim后的结果,如果该结果为空,则忽略当前节点。返回结果中的标签名称不区分大小写。如果节点不包含属性值或者子节点,其对应的结果中需要保留attributes以及children字段,例如 {tag: 'div', attributes: {}, children: []}。上面的HTML结构执行dom2json之后的结果如上面的效果演示。JavaScript实现function dom2json() { const root = document.getElementById('jsContainer') return JSON.stringify(getDomJson(root))}function getDomJson(dom) { let domObj; if (dom.nodeType === 1) { // 如果是element节点 domObj = { tag: dom.localName, attributes: {}, children: [] } // 属性列表 let attlist = dom.attributes; for (let i = 0, l = attlist.length; i < l; i++) { // .name获取属性名,.value获取属性值 domObj.attributes[attlist[i].name] = attlist[i].value } // 子元素列表 let childList = dom.childNodes for (let i = 0, l = childList.length; i < l; i++) { // 递归 const childJson = getDomJson(childList[i]) if (childJson) { domObj.children.push(childJson) } } } else if (dom.nodeType === 3) { // 如果是text节点 const ctn = dom.textContent.trim() if (ctn) { domObj = { tag: 'text', content: ctn } } } return domObj}console.log('测试', dom2json());

这个案例中主要就是对DOM操作以及递归算法的应用。

知识点:

Node.nodeType 表示的是该节点的类型。

【JavaScript】JS实用案例分享:DOM节点转JSON数据 | 标签输入框(js javascript)

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

元素节点有tagName 、nodeName 、localName属性;其中tagName 、nodeName相同,都是大写,localName是小写。其他节点只有nodeName 、localName属性,无tagName属性,其中:

属性节点localName和nodeName相同。文本节点localName为null,nodeName为#text(带有#)。

从DOM层次来看,nodeName是node接口上的property,而tagName是element接口上的property,所有的节点(元素节点,属性节点,文本节点等12种)都继承了node接口,而只有元素节点才继承了element节点,因此nodeName比tagName具有更大的使用范围。

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

Node.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合。

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

trim() 方法会从一个字符串的两端删除空白字符。

2、标签输入框效果演示

有以下HTML和CSS:

HTML结构

<div class="tag-input"> <span class="tag">前端</span> <span class="tag">编程题</span> <span class="tag">示例</span> <span class="tag">标签</span> <input type="text" class="js-input" maxlength="6" placeholder="请输入标签"></div>

CSS样式

.tag-input{ position: relative; border: 1px solid #cccccc; padding: 0 5px; display: flex; flex-flow: row wrap;}.js-input{ width: 450px; height: 22px; line-height: 22px; font-size: 16px; padding: 0; margin: 5px 0; outline: none; border: none; width: 6.5em; height: 24px; line-height: 24px;}.tag{ padding: 0 10px; margin: 5px 5px 5px 0; background: #25bb9b; color: #ffffff; height: 24px; line-height: 24px; border-radius: 12px; font-size: 13px;}案例需求

上面展示了一个简化版的标签输入框,功能如下:

当用户输入内容并敲回车键时,将输入框的内容在输入框前显示成标签,并清空输入框内容。当用户敲删除键时,如果输入框当前没有内容,则删除前一个标签。标签需要去掉字符串两端的多余的空格。标签不能为空字符串。标签不能重复,如果输入已存在的内容相同的标签,则不添加,并清空输入框。相关键码值,回车键=13,删除键=8。JavaScript实现var tagInput = {// isInited表示是否已初始化 isInited: false, // 初始化方法 init: init, // 绑定事件处理函数的方法 bindEvent: bindEvent, // 添加标签的方法 addTag: addTag, // 移除标签的方法 removeTag: removeTag};// 初始化tagInput.init();// 初始化函数function init() { var that = this; if (that.isInited) return; that.isInited = true; // 保存class为js-input的输入框的dom元素引用 that.input = document.getElementsByClassName("js-input")[0]; that.bindEvent();}// 注册事件function bindEvent() { var that = this; var input = that.input; if (!input) return; // 给input绑定按键按下事件 input.addEventListener('keydown', function (event) { // 判断用户是否按了回车键 var isEnter = (event.keyCode === 13); // 判断用户是否按了删除键 var isDelete = (event.keyCode === 8); // 阻止默认行为 (isEnter || isDelete) && event.preventDefault(); isEnter && that.addTag(); isDelete && that.removeTag(); }); // 给input的父元素绑定点击事件 input.parentNode.addEventListener('click', function () { // 使用input获得焦点 input.focus(); });}// 添加标签的函数function addTag() { var that = this, input = that.input, val = input.value.trim(), tagList = document.getElementsByClassName('tag'), isAdd = true; // 遍历存在的tag,输入的内容在tag中已经存在时不进行添加span元素操作(isAdd=false) for (var i = 0, l = tagList.length; i < l; i++) { if (tagList[i].innerHTML === val) { isAdd = false break } } // 如果val不为空,isAdd为true则添加新的span元素 if (isAdd && val) { var newSpan = document.createElement('span') newSpan.className = 'tag' newSpan.innerHTML = val // 在input的父节点中的input节点之前插入newSpan节点 input.parentNode.insertBefore(newSpan, input) } input.value = ''}// 删除标签的函数function removeTag() { var that = this, input = that.input, val = input.value, tagList = document.getElementsByClassName('tag'); if (val) { // 如果val不为空时,应该删除值的最后一位 input.value = val.slice(0, -1) } else if (tagList.length > 0) { // 如果val为空时,tagList中存在span标签,则删除最后一个标签 tagList[tagList.length - 1].remove() }}

这个案例的实现并不难,主要就是在于它的逻辑思想,只要动脑去想,动手去写,一般都能实现它。

知识点:

Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。slice(begin, end) 提取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串。从下标begin提取到end(包含begin,不包含end),如果end<0,表示从末尾开始算,例如end是 -3,则end相当于是strLength - 3(strLength 表示字符串长度)结语

这篇文章的所有内容都出自于牛客网的JS篇题库:

牛客网的JS题库非常贴合实际的,在写的过程中自己查漏补缺,收获了很多,强烈将牛客网推荐给大家!

如果本篇文章对你有所帮助,还请客官一件四连!❤️

基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!

本文链接地址:https://www.jiuchutong.com/zhishi/298933.html 转载请保留说明!

上一篇:Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(搭建开发环境)(vue做项目的流程)

下一篇:A Loepa oberthuri moth (© Robert Thompson/Minden Pictures)

  • qq怎么加入黑名单(qq怎么加入黑名单 但不删除)

    qq怎么加入黑名单(qq怎么加入黑名单 但不删除)

  • 抖音发现好友是不是经常看你的(抖音发现好友是谁怎么看)

    抖音发现好友是不是经常看你的(抖音发现好友是谁怎么看)

  • xr怎么放两张卡(xr怎么放两张电话卡)

    xr怎么放两张卡(xr怎么放两张电话卡)

  • 电脑哪个键是复制粘贴(电脑键盘哪个是重启键)

    电脑哪个键是复制粘贴(电脑键盘哪个是重启键)

  • sarm是什么(sarm是什么车)

    sarm是什么(sarm是什么车)

  • 微信健康码怎样添加家人(微信健康码怎样解绑)

    微信健康码怎样添加家人(微信健康码怎样解绑)

  • word空白页删除不掉(word空白页删除快捷键)

    word空白页删除不掉(word空白页删除快捷键)

  • 华为手机开机出现绿色机器人(查找我的华为手机)

    华为手机开机出现绿色机器人(查找我的华为手机)

  • 动态ip流量卡是什么意思

    动态ip流量卡是什么意思

  • 微信语音转文字失败怎么解决(微信语音转文字识别不出来怎么办)

    微信语音转文字失败怎么解决(微信语音转文字识别不出来怎么办)

  • 微信有人投诉可以查到是谁投诉的吗(别人微信投诉我,我会收到提示吗)

    微信有人投诉可以查到是谁投诉的吗(别人微信投诉我,我会收到提示吗)

  • 京东配送丢件怎么处理(京东配送丢件怎么办)

    京东配送丢件怎么处理(京东配送丢件怎么办)

  • 键盘上复制粘贴按哪两个键(如何在键盘上复制粘贴)

    键盘上复制粘贴按哪两个键(如何在键盘上复制粘贴)

  • 删掉好友还能恢复聊天记录吗(删除好友后能恢复吗)

    删掉好友还能恢复聊天记录吗(删除好友后能恢复吗)

  • ie浏览器怎样全页截图(ie浏览器选项在哪)

    ie浏览器怎样全页截图(ie浏览器选项在哪)

  • id电子邮件是什么(id电子邮件怎么写)

    id电子邮件是什么(id电子邮件怎么写)

  • 华为手表gt2 42mm和46mm区别(华为手表gt2 46mm)

    华为手表gt2 42mm和46mm区别(华为手表gt2 46mm)

  • 华为手机怎么召唤小艺(华为手机怎么召唤小冰)

    华为手机怎么召唤小艺(华为手机怎么召唤小冰)

  • 台式电脑怎样安装手写板(台式电脑怎样安装无线网卡驱动)

    台式电脑怎样安装手写板(台式电脑怎样安装无线网卡驱动)

  • 拼多多旺旺号在哪儿查(拼多多里的旺旺号是什么)

    拼多多旺旺号在哪儿查(拼多多里的旺旺号是什么)

  • 抖音点赞有数量限制吗(抖音点赞有数量,但点开显示无点赞怎么回事)

    抖音点赞有数量限制吗(抖音点赞有数量,但点开显示无点赞怎么回事)

  • 荣耀9xpro有nfc吗

    荣耀9xpro有nfc吗

  • 云闪付能用指纹支付吗(云闪付指纹解锁有什么用)

    云闪付能用指纹支付吗(云闪付指纹解锁有什么用)

  • 微型计算机硬件系统的性能主要取决于(微型计算机硬件系统由哪两大部分)

    微型计算机硬件系统的性能主要取决于(微型计算机硬件系统由哪两大部分)

  • 苹果xs烫手怎么回事(苹果xs烫手怎么解决)

    苹果xs烫手怎么回事(苹果xs烫手怎么解决)

  • qq语音对方暂时无法接听(qq语音对方暂时无法接听显示拒绝)

    qq语音对方暂时无法接听(qq语音对方暂时无法接听显示拒绝)

  • 综合收入扣税
  • 公司把股权转让给个人
  • 盈余公积的作用与意义
  • 发票用完了领发票需要带什么东西
  • 房地产公司转让土地
  • 免费提供客户试用卷的账务处理?
  • 服务业发票丢失怎么处理
  • 高新技术企业进项加计扣除
  • 出售旧固定资产的税率是多少
  • 冲销无形资产如何会计分录?
  • 公司向员工借款合法吗
  • 租赁合同印花税双方都要交吗
  • 租赁合同印花税双方都要交吗
  • 外购烟丝消费税是多少
  • 安装固定资产领用原材料
  • 异地预缴的税款是抵减全部的税款吗
  • 销售不动产差额征收增值税
  • 流动资产包括哪些形式
  • 天然气税费
  • 餐饮业代金券怎么用
  • 国际代理运费和港杂费一样吗
  • 新版edge浏览器兼容性视图怎么设置
  • WIN10专业版永久激活
  • 事业单位会计凭证收入怎么记账
  • 抵债资产会计核算
  • 比较常见的病有哪些
  • 融资性售后回租承租方为什么不交税
  • 研发机构采购国产设备退税管理办法
  • 挪威最北部
  • 工资储备金制度
  • 外经证预缴
  • 将时间序列转化为图像
  • Vue3中的pinia使用(收藏版)
  • 超参数及其作用
  • phpcms v9官网
  • 应纳所得税额等于利润总额减去差异
  • 个人终止投资经营的情形
  • 债转股需要哪些资料
  • 暂估价与发票价的区别
  • 帝国cms8.0
  • 旅游门票费用可以用来报销吗?
  • mysql中如何设置默认值
  • 无形资产摊销是按原值吗
  • 小型微利企业认定标准最新
  • 汽车抵押贷款会计分录
  • 公司班车运费如何入账的
  • 流动比率好说明什么
  • 哪些费用计入管理费用开办费
  • 个人贷款打到公司账户存在什么风险
  • 暂估入库一直没有发票
  • 塑料行业税负率是多少
  • 库存数据不准确
  • 城建税教育费附加会计分录
  • 明细账的登记方向与总账的登记方向是一致的
  • 会计当期损益指什么
  • sqlserver存储过程在哪里
  • Linux/Mac MySQL忘记密码命令行修改密码的方法
  • mysql免安装版怎么启动
  • Linux安装MySQL教程(二进制分发版)
  • win7 32位装ie11
  • 盘古pg插件
  • windows8怎么设置
  • aeadisrv.exe
  • centos6 dhcp
  • linux r安装
  • win10电脑cmd命令大全
  • cocos2dx 3.17
  • android真机调试解析包错误
  • python基本入门
  • js 文件缓存
  • windows下为啥没有观看电视的软件
  • js实现回文
  • 国家税务总局公告2022年第9号
  • 江苏国税电子税务局网上申报流程
  • 一般纳税人收到普通发票怎么做分录
  • 广东税务局查验
  • 东莞各税务分局电话
  • 地税和国税是什么关系
  • 基层税收工作的建议意见
  • 西安市人力资源和社会保障局关于2020年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设