从没有内部文本内容的元素中获取 html 标签

Question

使用 Javascript 我想获取一个 DOM 元素并只获取它的 tag， class、id等（括号里的东西），忽略实际的文字内容 内。有点像 innerHTML/textContent 的反义词。

所以我希望得到这样的 div:

Ipsum Lorem

变成这样的字符串：

 

Answer 1

将 outerHTML 中的 innerHTML 替换为空，或者像我在这里所做的那样，省略号，“...”：

var txt = elem.outerHTML.replace(elem.innerHTML, '...');

选择元素（getElementById("foo")）后，

Ipsum Lorem

这将return一个string变成var txt

...

Answer 2

使用 .cloneNode 或者如果您不想使用它：

获取节点名并将元素属性缩减为字符串。

'use strict';

const elem = document.getElementById('foobar');
const nodeName = elem.nodeName.toLowerCase();
const attrs = [...el.attributes].map((a) => {
  if (a.value === '')
    return a.name;
  else if (a.value.indexOf('"') > -1)
    return `${a.name}='${a.value}'`;
  else
    return `${a.name}="${a.value}"`;
}).join(' ');
const str = `<${nodeName} ${attrs}></${nodeName}>`;

https://jsfiddle.net/k22tyqbr/3/

从没有内部文本内容的元素中获取 html 标签

Get the html tag from an element without the inner text content

html

javascript

outerhtml