Question

我是JavaScript的新手，所以这应该是一个简单的问题，因为我不知道要搜索什么，所以无法找到答案。我想知道是否可以引用元素自己的内部HTML。像这样：

<button onclick="choose(THIS BUTTON'S INNER TEXT)">Apple</button>

我希望此按钮将值“Apple”传递给choose（）函数。我能以某种方式这样做吗？

Answer 1

使用内联onclick处理程序时，this最终会引用元素本身，因此您可以使用任何标准DOM，包括this.innerHTML。

以下示例：

function choose(str) {
  console.log(str);
}

<button onclick="choose(this.innerHTML)">Apple</button>

Answer 2

试试这个：

<html>
<script>
function choose(val){
alert(val);
}
</script>

//HTML
<body>
<button onclick="choose(this.innerHTML)">Apple</button>
<body>
</html>

Answer 3

虽然在函数调用中传递this的信息是好的，但值得注意的是，您可以很好地将JavaScript函数绑定移出HTML，使用不引人注目的JavaScript。

然而，首先我会尝试并证明有很多方法可以从节点本身检索元素的文本：

＆＃13;

<button onclick="choose(this)">Apple</button>

<script>
  function choose(node) {
    node.normalize();
    var properties = {
      'innerHTML': node.innerHTML,
      'textContent': node.textContent,
      // note that node.innerText is non-standard, and
      // was defined by Microsoft, implemented in IE
      // and supplied in many browsers (see the compatibility
      // link in the references), other than Firefox:
      'innerText': node.innerText,
      'firstChildNodeValue': node.firstChild.nodeValue
    };

    Object.keys(properties).forEach(function(property) {
      console.log('node.' + property + ': ' + properties[property]);
    });
  }
</script>

＆＃13;

要离开onclick内联事件处理程序，使用不引人注目的JavaScript，我建议使用JavaScript绑定事件处理程序，使用EventTarget.addEventListener()：

＆＃13;

// here we don't pass a node into the function, we
// take advantage of the behaviour of
// EventTarget.addEventListener() to do so, within
// the function the clicked-element is passed as the
// 'this', though we cache it in a variable for
// simplicity:
function choose() {
  var node = this;

  // normalizes the child text-nodes of the element
  // joining separated adjacent text-nodes together
  node.normalize();

  var properties = {
    'innerHTML': node.innerHTML,
    'textContent': node.textContent,
    'innerText': node.innerText,
    'firstChildNodeValue': node.firstChild.nodeValue
  };

  // retrieving an array of property-keys from the
  // (above) properties Object, using Object.keys();
  // and then using Array.prototype.forEach() to
  // iterate over each of those keys:
  Object.keys(properties).forEach(function(property) {

    // property is the name of each of the Object properties/keys,
    // below we log the string of 'node.', the property itself, a
    // string of ': ' and the property-value of the property of
    // the properties Object itself to the console:
    console.log('node.' + property + ': ' + properties[property]);
  });
}


// finding the first/only (if any) <button> element using a CSS
// selector, and using EventTarget.addEventListener() to bind the
// the choose function (note there are no parentheses, if there were
// to give 'choose()' then the event-handler would be the returned
// value of the choose() function, *not* the choose function itself)
// as the event-handler of the 'click' event:
document.querySelector('button').addEventListener('click', choose);

＆＃13;

<button>Apple</button>

＆＃13;

注意，要使用JavaScript绑定事件处理程序，其事件处理函数的元素必须在发生事件绑定的位置存在于DOM中，这可以通过放置{{1在结束<script>元素之前的文档中，或者使用DOM-ready事件侦听器或</body>事件处理程序。

参考文献：

EventTarget.addEventListener()。
Node.firstChild()。
Node.innerText ^{compatibility}
Node.normalize()。
Node.textContent。
Unobtrusive JavaScript (Wikipedia article)。

Answer 4

这是更精确的，你可以用这个获得父母的元素id和类名蚂蚁标记名。

 <!DOCTYPE html>
 <html>
    <body>
    <!--Click the button to get id of the parent element -->

<button onclick="myFunction()">Try it</button>
<div id="parentDiv">
<p id="demo"></p>
</div>
<script>
function myFunction() {
var x = document.getElementById("demo").parentElement.id;
document.getElementById("demo").innerHTML = x;
 }
 </script>

</body>
</html>

如何指定元素自己的内部HTML？

4 个答案: