如何访问内部 HTML 中的特定元素？答案

【问题标题】：How do I access a specific element in the inner HTML?如何访问内部 HTML 中的特定元素？
【发布时间】：2019-03-26 11:14:10
【问题描述】：

我正在尝试使用 JS 或 jQuery 来访问一个名为“data-button”的 html 值。我可以访问整个 HTML div 并从按钮中提取类名和文本内容，但我无法获取数据按钮值。

在下面的代码中，我有一个 captureRecipeButtons() 函数，它可以获取“recipe-1-container”div。

function captureRecipeButtons(){
  let theWholeDiv = document.getElementsByClassName("recipe-1-container")[0];
  let buttonValue = ?; 
}

<div class="recipe-1-container">
   <button class="listed-recipe-link" data-button="1">Element</button>
</div>

在我的 captureRecipeButtons() 函数中，我希望 buttonValue 在上面的代码中等于“1”。任何帮助将不胜感激。

【问题讨论】：

你见过developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… 吗？
能把html发一下吗
据我所知，使用 .innerhtml 仅返回一个字符串，您可以使用迭代器来完成所有操作，但使用 .ChildNodes[0] 获取元素的方法更简单您想要编辑或获取或更改，然后在子节点上使用 .innerHTML

标签： javascript jquery html

【解决方案1】：

您可以将CSS selectors 的全部功能与querySelector 一起使用：

function captureRecipeButtons(){
    let button = document.querySelector(".recipe-1-container [data-button]");
}

querySelector 返回第一个匹配元素（如果没有，则返回 null）。

如果您想要该元素上的data-selector 的值，那么getAttribute 或dataset：

function captureRecipeButtons(){
    let buttonValue = document.querySelector(".recipe-1-container [data-button]").getAttribute("data-button");
    // or
    let buttonValue = document.querySelector(".recipe-1-container [data-button]").dataset.button;
}

实时复制：

function captureRecipeButtons(){
    const button = document.querySelector(".recipe-1-container [data-button]");
    console.log(button.getAttribute("data-button"));
    // or
    console.log(button.dataset.button);
}
captureRecipeButtons();

<div class="recipe-1-container">
   <button class="listed-recipe-link" data-button="1">Element</button>
</div>

但请注意，dataset 会进行一些转换。

但是有很多不同的方法可以做到这一点。在the DOM 中探索更多内容。

【讨论】：

【解决方案2】：

因此，您可以像我所做的那样通过类或标签名称获取按钮元素。那么 data-button 是合法的只是一个属性，所以只需使用 getAttribute('data-button');

我在下面写的方法只会得到第一个按钮，它是 theWholeDiv 元素的直接子元素。

function captureRecipeButtons(){
  let theWholeDiv = document.getElementsByClassName("recipe-1-container")[0];
  let buttonValue = theWholeDiv.getElementsByTagName('button')[0].getAttribute('data-button'); 
  console.log(buttonValue);
}

captureRecipeButtons();

<div class="recipe-1-container">
   <button class="listed-recipe-link" data-button="1">Element</button>
</div>

【讨论】：

【解决方案3】：

根据Mozilla Docs，

您可以通过dataset 对象访问数据属性。

function captureRecipeButtons(){
  let theButton = document.querySelector("recipe-1-container > button");
  let buttonValue = theButton.dataset.button; 
}

【讨论】：

【解决方案4】：

另一种使用 DOM 的方式，包括一些避免过度水平滚动的快捷方式。代码精确定位第一个 DIV 元素及其第一个 BUTTON 元素，使用 getAttribute() 方法返回指定属性的值。 JavaScript 的优点在于可以在父元素和子元素之间进行大量的链接。

function captureRecipeButtons() {
  let d = document;
  d.g = d.getElementsByTagName;
  let buttonValue = d.g("div")[0].getElementsByTagName("button")[0].getAttribute("data-button");
  console.log(buttonValue);
};

captureRecipeButtons();

<div class="recipe-1-container">
  <button class="listed-recipe-link" data-button="1">Element</button>
</div>

或者，您可以编写如下代码：

function captureRecipeButtons() {
  let d = document;
  d.g = d.getElementsByTagName;

  let button = d.g("div")[0].childNodes[1];
  button.g = button.getAttribute;

  let buttonValue = button.g("data-button");
  console.log(buttonValue);
}

captureRecipeButtons();

<div class="recipe-1-container">
  <button class="listed-recipe-link" data-button="1">Element</button>
</div>

按照代码格式，DIV元素的第一个子节点不是BUTTON元素，而是一个文本对象。 childNode[1] 包含 BUTTON 元素，因此您可以使用它的 getAttribute() 方法来检索 data-button 属性的值。

【讨论】：