Question

我正在尝试使用JS或jQuery访问称为“数据按钮”的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”。任何帮助将不胜感激。

Answer 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中有更多值得探索的地方。

Answer 2

所以您可以像我一样按类或标记名获取button元素。那么data-button只是合法的属性，所以只需使用getAttribute（'data-button'）;

我在下面编写的方式将只获取第一个按钮，该按钮是WholeDiv元素的直接子代。

all_public

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

Answer 3

根据Mozilla Docs，

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

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

Answer 4

使用DOM的另一种方式，包括一些避免过度水平滚动的快捷方式。该代码使用getAttribute（）方法返回指定属性的值，从而精确定位第一个DIV元素及其第一个BUTTON元素。 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 属性的值。

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

4 个答案: