以虛線表示法從父級訪問子DOM對象

-1

有沒有方法通過將子DOM對象視爲其父DOM對象的數據成員來選擇它？想象一下，我有這樣的代碼：以虛線表示法從父級訪問子DOM對象

<div id=div1> 
    <div id=innerdiv1></div> 
    <div id=innerdiv2></div> 
</div> 
<div id=div2> 
    <div id=innerdiv1></div> 
    <div id=innerdiv2></div> 
</div>

這個例子將不會在現實生活中工作，因爲兩對孩子的div具有相同的id（innerdiv1，innerdiv2），而這正是困擾我的「標識」的事。
有沒有什麼方法在JavaScript中訪問子元素作爲數據成員，如document.getElementById('div1.innerdiv1')，這將返回一個不同的對象從document.getElementById('div2.innerdiv1')。
我不能忍受每個ID在整個文檔中必須是唯一的。當你有很多代碼並且你不小心使用了相同的id兩次時，它就成爲一個主要問題。它使真正令人討厭的錯誤很難壓扁。

來源

2012-03-19 J-bob

HTML ID必須是唯一的。期。 – bfavaretto 2012-03-19 19:30:17

「當你有很多代碼，並且你不小心使用了相同的id兩次時，它就成了一個主要問題，它會造成很難被壓制的令人討厭的bug。」你不是在幫你的情況：P – jbabey 2012-03-19 19:31:34

在旁註中，你的屬性值必須被引用。 – jbabey 2012-03-19 19:33:05

您可以在現代瀏覽器中使用document.querySelector。 document.getElementById已經過時了。

document.querySelector('#div1 #innerdiv1')

來源

2012-03-19 19:39:21 user123444555621

神聖的鯖魚！有用！誰說這是不可能的，不知道他們在說什麼。它適用於Firefox和Chrome，你知道它是否適用於現代IE，Safari和Opera？ – 2012-03-19 19:57:34

我99.9％確定所有瀏覽器都可以處理同一個id的多個出現，以及上面的選擇器語法。所以我會說是的，這是可能的。 – user123444555621 2012-03-19 20:48:21

可用性取決於您是否需要支持IE 6或7. http://caniuse.com/queryselector – dlamblin 2012-03-21 15:36:02

document對象有一個getElementById方法，但返回的元素沒有這個方法，它不能接受一個字符串不完全是一個元素的id [如果這就是你想要的一個庫，如document.querySelector]的jQuery或Pumbaa80's suggestion]。

在某些瀏覽器，你可以嘗試：

document.getElementById('div1').getElementsByTagName('div')[0]

作爲一個側面說明，嘗試下探這兩個HTML文件轉換成html5.validator.nu或http://validator.w3.org/#validate_by_input

<!DOCTYPE html><head><title>t</title></head><body> 
<div id=div1><div id=d1>one</div><div id=d2>two</div>three</div> 
<div id=div2><div id=d1>four</div><div id=d2>five</div>six</div> 
</body>

現在，你可以完全避免使用相同的ID兩次通過使用類來代替。

<!DOCTYPE html><head><title>t</title></head><body> 
<div id=div1><div class=d1>one</div><div class=d2>two</div>three</div> 
<div id=div2><div class=d1>four</div><div class=d2>five</div>six</div> 
</body>

對於第一個，你可以使用document.querySelector('#div2 #d1')或$('#div2 #d1') ，但我不認爲結果會跨越由於所有瀏覽器都得到保證，這應該相當於寫document.querySelector('#d1')，你可以請參閱返回匹配的第一個出現的id，或返回數組中的兩個id匹配元素的$('#d1')。

而對於第二個，你可以使用document.querySelector('#div2 .d1')或$('#div2 .d1')或其他語句獲得非常相似的結果，只不過這次你的html是有效的。您甚至不必擁有定義d1和d2的css，並且如果您使用了class="d1 mySubHeading"和class="d2 mySubHeading"這樣的屬性，則可以使用mySubHeading和d1和d2這兩種樣式純粹用於通過這些方法進行選擇。

來源

2012-03-19 19:30:57 dlamblin

您可以使用內部div的類而不是id，它們不需要是唯一的。

來源

2012-03-19 19:32:20 jbabey

以虛線表示法從父級訪問子DOM對象

回答

相關問題