Javascript查找元素并单击没有css类

Question

我有一些像

这样的HTML

<ul class="sortword"> 
    <li>
        <div>ABC</div>
    </li>
    <li>
        <div>DEF</div>
    </li>
</ul>

如何使用Javascript查找并点击<div>DEF</div>代码

Answer 1

Array.from(document.querySelectorAll('div')).forEach((div) => {
    if (div.textContent.trim() === "DEF") {
        let evt = new Event('click');
        div.dispatchEvent(evt);
    }
});

Answer 2

JQuery的

使用:contains selector：

$("div:contains('DEF')").click()

Answer 3

你可以在没有jQuery的情况下通过选择多个元素并循环遍历它们来做到这一点，但是使用它会使这个代码片段非常简短易读。一定要使用像

这样的链接在页面上包含JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

$( '.sortword li div' ).on( 'click', function() {
  console.log( $( this ).text() );
});

$( '.sortword li div' ).each( function() {
  $( this ).click();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sortword"> 
<li>
    <div>ABC</div>
    <div>DEF</div>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

var myList = document.getElementsByClassName("sortword")[0].getElementsByTagName("li")[0];

<ul class="sortword"> 
    <li>
        <div>ABC</div>
        <div>DEF</div>
    </li>
</ul>

Answer 5

您可以使用textContent，如以下代码所示：

var el = document.querySelectorAll(‘ul li div’), desire;
for (var i = 0; i < el.length; i ++) {
   if (el[i].textContent === 'DEF') { desire = el[i]; } 
   break;
}

然后使用可以稍后使用desire变量。