爲什麼getElementsByClassName（）訪問影子DOM中的元素？

我正在使用Polymer框架來構建Web應用程序。我有一個使用其他基本Polymer元素作爲構建塊的自定義表格元素。表格元素有一列和幾行信息。我正在研究突出表中信息的行爲。突出顯示行爲將突出顯示錶中的整個行，或者只突出顯示行中相關信息的特定位。爲什麼getElementsByClassName（）訪問影子DOM中的元素？

我創建了一個新的自定義元素，其中表格和突出顯示行爲將起作用。具有突出顯示的行的表格將獲得一組突出顯示。

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="../highlight-behavior/highlight-behavior.html"> 
<link rel="import" href="../custom-table/custom-table.html"> 

<dom-module id="test-sync"> 
<template> 
    <style> 
    :host { 
     display: block; 
     box-sizing: border-box; 
    } 
    </style> 

    <custom-table class="highlight"></custom-table> 
    <custom-table class="highlight"></custom-table> 
    <custom-table class="highlight"></custom-table> 
    <custom-table class="highlight"></custom-table> 

</template>

在試圖做出處理亮點功能我也分配了相同的類到安排表中的行自定義元素一個統一的方法。我完全期望不得不將他們的屬性泡沫到父母（表格），以便突出顯示的行爲可以與他們互動。

在亮點行爲我寫道：

<script> 
/** @polymerBehavior HighlightBehavior*/ 
HighlightBehavior = { 

    attached: function() { 
    console.log(this.getElementsByClassName('highlight')); 
    } 
} 
</script>

在我的日誌，我預計只有返回四個自定義表元素。最終情況並非如此，我還獲得了自定義表格影子DOM中的一些高亮元素。現在這非常方便，但對於我對聚合物的理解，這對我沒有意義。我想我必須直接查詢陰影根目錄才能獲取其中包含的元素。我想知道爲什麼城堡圍牆似乎在這種情況下被違反？

來源

2016-11-04 Matthew Hardin

您使用的是什麼瀏覽器？聚合物不能使影子DOM在本身不支持它的瀏覽器中工作。（或者也許它可以和我不知情。） – Pointy

默認爲shady DOM，陰影DOM不會阻止您訪問元素的內容。

可以啓用陰影DOM https://www.polymer-project.org/1.0/docs/devguide/settings

或使用聚合物DOM API https://www.polymer-project.org/1.0/docs/devguide/local-dom

Polymer.dom(this.root).getElementsByClassName('highlight');

來源

2016-11-04 13:58:00

謝謝！對於這種行爲，我可以方便地訪問這些元素。雖然這樣做是不好的做法嗎？ –

我認爲這是不好的做法。如果始終使用'Polymer.dom（）'，那麼當所有目標瀏覽器都支持它時，您可以啓用shadow DOM，並且您可以從本機性能中受益。如果你不使用它，啓用陰影DOM會破壞你的代碼。如果這不影響你，你可以忽略'Polymer.dom（）'。 –

爲什麼getElementsByClassName（）訪問影子DOM中的元素？

回答

相關問題