美文网首页
原生 js 将 dom 元素转换为字符串

原生 js 将 dom 元素转换为字符串

作者: Moorez | 来源:发表于2017-11-16 15:47 被阅读0次

最近在写一个小项目,需要把获取的 dom 元素转换为字符串,其实用 jquery 比较容易实现:$(".xxx").html(),但是我的项目打算用原生来写,仔细想了想,可以这么写⤵️:

思路

① 我们可以创建一个 div 元素
② 然后将获取的 dom 节点放到 div 里面
③ 利用innerHTML就可以获取到dom 节点的字符串

代码

function domToString (node) {  
     let tmpNode = document.createElement('div')
     tmpNode.appendChild(node) 
     let str = tmpNode.innerHTML
     tmpNode = node = null; // 解除引用,以便于垃圾回收  
     return str;  
}  

相关文章

  • 原生 js 将 dom 元素转换为字符串

    最近在写一个小项目,需要把获取的 dom 元素转换为字符串,其实用 jquery 比较容易实现:$(".xxx")...

  • 原生 js 将 dom 元素转换为字符串

    思路: ① 我们可以创建一个 div 元素 ② 然后将获取的 dom 节点放到 div 里面 ③ 利用innerH...

  • react基础入门:(二)原生JS操作DOM元素

    原文链接:react基础入门:(二)原生JS操作DOM元素 一 初始化项目 二 操作 DOM 获取 dom 元素 ...

  • DOM映射+ajax

    原生JS和jQuery在DOM映射中的区别 在原生JS中,有DOM映射,改变页面内容,JS 中获取的元素集合同时改...

  • JQuery

    3. jquery 对象和 DOM 原生对象有什么区别?如何转化? 区别:dom元素: 通过原生js获取的dom节...

  • 01-JQuery入口函数

    JQuery入口函数 JS原生入口函数特点原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行原生的JS如...

  • 2 Vue数据绑定、实例化多个Vue对象、基础指令

    1、Vue框架的优点: (1).相比于原生操作DOM元素,其更节省性能;原因:[1].原生DOM节点使用js操作,...

  • jquery与js加载顺序区别

    1.通过原生的JS入口函数可以拿到DOM元素,也可以拿到DOM元素的宽高。通过JQuery入口函数可以拿到DOM元...

  • 使用ref获取DOM元素和组件

    一、获取DOM元素虽然可以通过原生js操作获取到DOM元素,但是Vue等框架已经不推荐自己操作DOM了,都扔给框架...

  • insertAfter实现

    用原生JS实现在一个dom元素后插入新的节点? 在js的dom api中有insertBefore()方法 在已知...

网友评论

      本文标题:原生 js 将 dom 元素转换为字符串

      本文链接:https://www.haomeiwen.com/subject/qhglvxtx.html