javascript - Javascript 获取 LI 标签中的元素

Question

我有一个li看起来像：

<li temp="true">HELLO</li>

我将如何获得“temp”以便我可以在 JS 中操作“HELLO”...我知道如何通过 id 甚至 className

Answer 1

在支持浏览器（即除古代 IE 之外的任何浏览器）中：

var li = document.querySelector("li[temp=true]");

如果需要对旧版 IE 的支持，请尝试以下操作：

var li = document.querySelector ? document.querySelector("li[temp=true]")
  : (function() {
      var lis = document.getElementsByTagName('li'), l = lis.length, i;
      for( i=0; i<l; i++) {
          if( lis[i].getAttribute("temp") == "true") return lis[i];
      }
      return false;
  })();

Answer 2

在 jQuery 中，您可以使用属性选择器：

$('li[temp="true"]');

或者，您可以将该document.querySelectorAll()方法用于本机 JS 解决方案。但是，您应该意识到这对跨浏览器的影响：

var ele = document.querySelectorAll('li[temp="true"]');

你可以看到上面的一个jsFiddle Demo。

顺便说一句，您应该使用data-属性来存储带有 HTML 元素的自定义属性，例如正确的语法应该是：

<li data-temp="true">HELLO</li>

Answer 3

遍历所有 li。

var li = document.getElementsByTagName("li");
var found;
for(var i=0; i< li.length;i++){

    if(li[i].getAttribute("temp") == "true"){
       found = li[i]; break;
   }
}

console.log(found);

或者您可以使用本机查询

var found= document.querySelectorAll('li[temp="true"]');

JSFiddle