如何獲得對JS中的:: before或:: after節點的引用？

Question

據我所知，標準JavaScript無法獲得::before或::after僞元素。 Element.children不會讓你接近它。

我知道必須有一種方式，至少在Chrome特權Firefox插件代碼，因爲它會列出每個::before元素在頁面（以及它顯然getComputedStyle()作品也一樣，你可以列出所有款式它在inspector，這是用JavaScript編寫的）。

這個API在哪裏被記錄，它是不同的和特權的東西 - 只有在說Firefox和Chrome瀏覽器，或者有些事情很快成爲標準？

Answer 1

您可以使用iniDOMUtils - selectorMatchesElement()功能。

你可以閱讀更多關於它在這裏 - https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/inIDOMUtils#selectorMatchesElement%28%29

Answer 2

的CSS生成的內容不是DOM的一部分，你將不能夠做很多與::before/::after僞元素，即使你得到他們。唯一的使用情況，我能想到的是：在僞元素

• 訪問CSS的計算值。window.getComputedStyle()通過可選的第二個參數支持此功能。

• 枚舉生成的內容。你可以做到這一點：

  • 通過使用瀏覽器特定的API。在Firefox中，DevTools檢查員uses有一個特殊的界面 - inIDeepTreeWalker。

  • 或者通過步行DOM並檢查（對於每個元素）其是否具有content，其計算式爲:before/:after。例如：

    window.getComputedStyle(elt, ':before').content 
    

• 獲取How to access CSS generated content with JavaScript在CSS定義，就像一個計數器的 「活」 的價值 - 詳見這個問題。

Answer 3

至少對我來說，你的問題是不清楚的準確您正在嘗試做的，或者得到什麼。

最直接等同於::before和::after：

如果你想真正插入內容，這是什麼::before和::after CSS選擇這樣做，那麼最直接的等價物是Element.insertAdjacentHTML(position, text)。在這種情況下：

的::before等效是：

Element.insertAdjacentHTML("beforebegin", "<p>Additional HTML content before element.</p>"); 

的::after等效是：

Element.insertAdjacentHTML("afterend", "<p>Additional HTML content after element.</p>"); 

Element.insertAdjacentHTML()也有剛剛插入HTML文本的afterbegin和beforeend選項在引用的Element的開始之後或僅在結束之前。

交替：

你可以使用Node.insertBefore(newNode, referenceNode)插入節點。
對於::before這將是（MYNODE前插入newNode）：

myNode.parentNode.insertBefore(newNode, myNode); 

對於::after這將是（MYNODE後插入newNode）：

myNode.parentNode.insertBefore(newNode, myNode.nextSibling); 

獲取引用：

如果你是嘗試獲取DOM中較早的元素的引用，那麼這聽起來像您正在尋找Node.previousSibling。如果您正在尋找DOM後面的元素的引用，那麼您正在尋找Node.nextSibling。

在DOM走順序：

它也有可能是你正在尋找的，只是之前和剛剛在DOM walk order參考Node後的元素。然而，這是而不是真的是CSS選擇器::before和::after做什麼。但是，從您提到的Page Inspector，這聽起來像這是你想要的。如果是這樣，那麼您可以使用TreeWalker來漫遊DOM樹。

以下應該做你想要的東西（注：目前未經測試，因此可能失去了一些東西。）：

//referenceNode is the node for which we want to find the elements 
// before and after in DOM walk order. 

//Create the TreeWalker 
let treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, 
              {acceptNode: function(node) { 
                  return NodeFilter.FILTER_ACCEPT; 
                 } 
              }, 
              false); 
//Point the TreeWalker at the referenceNode. 
treeWalker.currentNode = referenceNode; 
//Get the node immediately prior to the referenceNode in DOM walk order 
let thePreviousNode = treeWalker.previousNode(); 

//Point the TreeWalker back at the referenceNode. 
treeWalker.currentNode = referenceNode; 
//Get the node immediately after to the referenceNode in DOM walk order 
let theNextNode = treeWalker.nextNode(); 

正如Nickolay提到的，如果你想充分細節頁面檢查，或DOM Inspector （documentation），然後您需要使用inIDeepTreeWalker。但是，您不希望或需要使用Firefox特定非標準接口提供的詳細信息。如果你想要了解XUL <toolbarbutton>是如何構建的（不是屬性/屬性，而是構成像<toolbarbutton>這樣的XUL元素的XBL），您只需要它。對於絕大多數您可能想到的內容，標準的TreeWalker應該沒問題。

除inIDeepTreeWalker以外，以上所有內容都是JavaScript的標準部分，不需要提升特權（即不需要使用附加組件）。