我们能否识别 HTML 中的当前元素内容？答案

【问题标题】：Can we identify the current element content in HTML?我们能否识别 HTML 中的当前元素内容？
【发布时间】：2022-06-28 22:01:50
【问题描述】：

有没有什么方法可以获取 HTML 元素的内容（函数被调用的地方），而不必通过 ID 或类名来识别它？

示例而不是使用：

<button class="colm" type="button" onclick="show('1')">1</button>

我们使用类似的东西：

<button class="colm" type="button" onclick="show(getThisElementContent())">1</button>

我的意思是问是否可以根据我们称之为getThisElementContent() 的说法制作这个函数，它能够从元素中提取innerHTML，在我们的例子中，元素innerHTML 是1。

【问题讨论】：

onclick="show(this);"（或者如果你喜欢：show(this.innerText)）会将触发事件的元素传递给事件处理程序.. 但最好以window.event.target 获取

标签： javascript

【解决方案1】：

当然，定义一个名为 logElem 的函数：

const logElem = (elem) => console.log({elem});

然后在 HTML 中：

<div onclick="logElem(this)">CLICK ME</div>

干杯

【讨论】：

【解决方案2】：

有几种方法，最简单的包括：

将this 传递给内联事件处理程序：

function showContent(element) {
  console.log(element.textContent);
}

&lt;button class="colm" type="button" onclick="showContent(this)"&gt;1&lt;/button&gt;

通过JS添加事件并访问事件target：

document.querySelector('.colm').addEventListener('click', showContent);

function showContent(event) {
  console.log(event.target.textContent);
}

&lt;button class="colm" type="button"&gt;1&lt;/button&gt;

【讨论】：

【解决方案3】：

使用目标元素的innerText 属性可以解决问题。

   let b = document.querySelector('button.colm')
 ;

   b.addEventListener('click', (e) => { console.log(e.target.innerText); });

 &lt;button class="colm" type="button"&gt;whatever&lt;/button&gt;

【讨论】：

【解决方案4】：

是的，有。您需要在 JavaScript 中添加一个事件侦听器，以便在鼠标单击事件发生时对其进行处理。

<html>
    <body>
        <button id="myButton">
            Click Me 
        </button>
    </body>
    <script>
        const button = document.getElementById("myButton")
        button.addEventListener('click', e => {
            console.log(e.target.innerHTML);
        });
    </script>
</html>

addEventListener 的第二个参数是一个回调函数，当按钮上发生click 事件时将执行该函数。这个函数将接收一个参数，在这种情况下我称之为e，它的类型是Event，你可以在这里阅读-https://developer.mozilla.org/en-US/docs/Web/API/Event

此 Event 对象有一个 target 属性，该属性是对最初将事件调度到的对象（按钮）的引用。

【讨论】：