Question

我对Javascript中的HTML元素引用有疑问。

比如说我有一个包含一系列嵌套容器的html文档（如下所示）。我觉得应该有一些层次结构来引用基于它们所在的容器的元素。例如，如果我想更改爸爸段落的名称，我会做类似document.html.body.Family的事情。 .Dad.p.innerHTML =＆＃34;史蒂夫＆＃34 ;;

然而，这根本不正确。因为如果我想改变父亲的名字，我所要做的就是document.getElementById（＆＃34; Dad＆＃34;）。getElementsByTag（＆＃34; p＆＃34;）。innerHTML =＆＃34 ;史蒂夫＆＃34 ;;

所以我想我的问题是：你是否只需要一个与每个容器或元素相关联的id，以便你可以引用它并改变它的属性/值？我正在寻找一种最好的做法＆＃39;回答。谢谢！：）

<div id="Family">
     <div id="Mom">
         <p>Mom's name</p>
     </div>

     <div id="Dad">
         <p>Dad's name</p>
     </div>

     <div id="Child">
         <p>Child's name</p>
     </div>
</div>

Answer 1

如果您想以简单的方式指定元素的路径，可以将document.querySelector与CSS选择器一起使用：

document.querySelector('html > body > #Family > #Dad > p');

但是，以下内容会更快：

document.getElementById('Dad').firstElementChild;

Answer 2

ID无处不在的问题在于它们基本上是全局性的＃39;。正如你所说，你不能分层次地拥有两个独立的家庭。

一种选择是使用数据集属性。

<div id="specific-family">
     <div data-family-member="Mom">
         <p>Mom's name</p>
     </div>

     <div data-family-member="Dad">
         <p>Dad's name</p>
     </div>

     <div data-family-member="Child">
         <p>Child's name</p>
     </div>
</div>

现在（在一个足够现代的浏览器上）你可以做一个querySelector：

document.querySelector('#specific-family [data-family-member="Dad"] p')
    .innerHTML = 'Steve';

数据集属性肯定can be abused，但我认为在这种情况下它们比ID更合适。您还可以使用类，如：

<div class="dad">

和

document.querySelector('#specific-family .dad p').innerHTML = 'Steve';

这更符合引用文章的观点。

Answer 3

你可以通过他的ID来解决标签：

var element = document.getElementById('Dad');

但你只能找到第一击。现在你可以改变内部html。

element.innerHTML = "<p>Steve</p>"

浏览器将在此之后重新呈现页面。

在Javascript中引用HTML元素

3 个答案: