獲取從元素的HTML標籤沒有內部文本內容

使用的Javascript我希望利用DOM元素，並採取只是它的標籤，類，ID等（括號內的東西），但忽略實際的文本內容之內。有點像innerHTML/textContent的反義詞。獲取從元素的HTML標籤沒有內部文本內容

所以我希望能得到這樣一個div：

Ipsum Lorem

成字符串這樣的：

 

來源

2016-09-29 Nevermore

採取節點名和CONCAT屬性爲字符串 –

你說的「取」出來呢？你真的需要HTML標籤格式的結果嗎？ – 2016-09-29 13:02:53

通過我的意思是得到括號內的html的字符串 – Nevermore

使用.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/

來源

2016-09-29 13:09:55

您剛剛重新實現了'elem.cloneNode（）。outerHTML'。注意包含雙引號字符的屬性值。 – 2016-09-29 13:12:56

不知道'.cloneNode' ...但屬性可以包含雙引號？從來不知道。 –

是的，如果它使用單引號作爲值分隔符'

'您的代碼仍然可以使用，但結果中的屬性值會格式錯誤。 – 2016-09-29 13:15:42

-2

與任何沒有更換innerHTML的outerHTML內，或正如我在這裏所做的那樣，省略號「...」：

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

選擇元件（getElementById("foo")）後，

Ipsum Lorem

這將返回一個string爲var txt

...

來源

2016-09-29 12:57:58 Nevermore

@Jamesonthedog：沒有什麼不對，但作爲一般解決方案的答案是痛苦的。 – 2016-09-29 13:01:10

我想這就是爲什麼當提問時存在這個選項。這是我有一個問題，在stackoverflow找不到，和一個朋友幫助我。我想我會分享它。 @squint，你爲什麼覺得這個答案很痛苦？ – Nevermore

DOM元素的過多不必要的序列化會導致不必要的搜索。當然，那裏只有兩個節點，但在一般情況下，這將是相當巨大的矯枉過正。你可以通過'elem.cloneNode（）'來克隆沒有內容的節點。那麼你需要的只是'.outerHTML'。我不知道你是否真的想要新的內容。 – 2016-09-29 13:08:50

獲取從元素的HTML標籤沒有內部文本內容

回答

相關問題