如何生成DOM節點與無價值的屬性

Question

我想產生這樣的節點：

<div layout horizontal></div> 

使用DOM API。

我想是這樣的：

var d = document.createElement("div"); 
d.setAttribute(...); 

但從來沒有真正管理帶來我想要的東西。任何想法如何做到這一點？

謝謝。

Answer 1

您的問題的主題反映了這裏的基本困惑。沒有這種「無價值的屬性」。在HTML中只有一種語法便利性，用於編寫沒有特定值的屬性，只要屬性的存在意味着某種東西，無論其值如何。

所以，你可以寫<input required>或<input required='true'>或<input required='false'>或<input required='notrequired'>，它意味着同樣的事情（這是輸入是需要）。

當您嘗試「打印」，用您的話來說，「無價值」屬性，負責「打印」的人可能會選擇「對您好」，並且表示沒有價值的屬性，而不是顯示空的字符串。但是，這不會改變屬性確實具有空字符串的值，這可以通過簡單地通過elt.getAttribute並直接檢查屬性值來看到。例如，如果我創建了一個新的div，然後將其內部HTML設置爲<input required="">，那麼某些環境（例如Chrome devtools）將顯示該元素爲<input required>而不是<input required="">。換句話說，它只是在進出的路上的語法糖。

一旦我已經創建了一個元素具有「毫無價值」的屬性，這實際上是一個空字符串，也許我就可以使它真正毫無價值通過設置屬性值null？不。 elt.setAttribute('required', null)僅將屬性值設置爲字符串"null"。 undefined也一樣。

請注意，DOM規範在Attr對象上指定了specified的屬性。然而，據我所知，這似乎並沒有被使用，因爲由document.createAttribute創建的屬性總是將specified設置爲true，通過解析HTML創建的屬性如x.innerHTML = '<input required>';始終將specified設置爲true，等specified標記爲只讀，所以無法檢查設置爲false的影響是什麼。

無論如何，你的目標是什麼？你爲什麼認爲你需要這樣做？

Answer 2

您可以使用元素的setAttributeNode方法追加與createAttribute創建屬性節點：

var el = document.createElement('div'), 
    attr = document.createAttribute('layout'); 

el.setAttributeNode(attr); 

Answer 3

您正在尋找createAttribute()和setAttributeNode()方法。

var elelement = document.createElement('div'), 
var attribute = document.createAttribute('layout'); 
var attribute2 = document.createAttribute('horizontal'); 
element.setAttributeNode(attribute); 
element.setAttributeNode(attribute2); 

Answer 4

只需將一個屬性設置爲空字符串即可。

element.setAttribute('hidden', '')