Question

有没有办法通过将子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），但这正是困扰我的“id”事物。
在javascript中是否有某种方式可以将子元素作为数据成员访问，例如document.getElementById('div1.innerdiv1')，它会从document.getElementById('div2.innerdiv1')返回不同的对象。
我无法忍受每个id在整个文档中都必须是唯一的。当您拥有大量代码并且意外地使用相同的ID两次时，它将成为一个主要问题。它使得真正令人讨厌的错误很难被压制。

Answer 1

document对象有一个getElementById方法，但返回的元素没有这个方法，并且它不能接受一个不完全是元素id的字符串[如果那是你想要的是尝试一个库，比如jQuery的Pumbaa80's suggestion或document.querySelector。

在某些浏览器中，您可以尝试：

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，或者$('#d1')返回数组中的两个id匹配元素。

对于第二个，你可以使用document.querySelector('#div2 .d1')或$('#div2 .d1')或其他语句获得非常相似的结果，除了你的html这次有效。您甚至不必拥有定义d1和d2的CSS，如果您使用class="d1 mySubHeading"和class="d2 mySubHeading"这样的属性，则可以使用mySubHeading进行设置并将d1和d2纯粹留给这些方法进行选择。

Answer 2

您可以使用内部div而不是id的类，它们不需要是唯一的。

Answer 3

您可以在现代浏览器中使用document.querySelector。 document.getElementById已经过时了。

document.querySelector('#div1 #innerdiv1')

以点分表示法从父级访问子DOM对象

3 个答案: