Question

我想获取所有具有ID的元素，并希望将该id值存储在数组中，并且我使用以下方法：

var allTheElementsHavingID = document.querySelectorAll('[id]');
var allTheID = [];
for(i=0;i<allTheElementsHavingID.length;i++)
{
  allTheID.push(allTheElementsHavingID[i].id);
}

但问题在于我有大约15000个带ID的元素。当我在控制台中运行代码时，它会冻结浏览器。所以我想在这里使用for循环的替代方法，以便存储所有的ID 还有其他方法吗？会证明效率更高

Answer 1

试试这个。它会将循环更改为异步执行，因此只要需要处理元素就可以使用，并且不会使浏览器崩溃。

＆＃13;

$result = array();

for($day =1 ; $day<31 ; $day++) {

    $day2 = (string)$day;
    $res = mysqli_query($con,$sql);

    while($row = mysqli_fetch_array($res)){
        array_push($result,
        array('day' =>$day2,
              'count' => $row[0]
        ));

    }
}
echo json_encode(array("result"=>$result));

＆＃13;

const els = document.querySelectorAll('[id]')

function asyncLoop(els, callback) {
  let ii = 0
  const ret = []
  const length = els.length
  
  function iter() {
    const id = els[ii].id
    const link = document.querySelector(`a[href*=${id}]`)
    if (!link) {
      ret.push(els[ii].id)
    }
    if (++ii < length) {
      return setTimeout(iter, 0)
    }
    callback(ret)
  }
  iter()
}

asyncLoop(els, function(missingIds){
  console.log(missingIds)
})

＆＃13;

我不确定获取和迭代包含15,000个元素的列表是个好主意。您可以评估<a id="one" href="#one">one</a> <a id="two" href="#two">two</a> <a id="fail" href="#three">three</a>以查看单击链接时是否存在匹配元素。它会让你有机会处理任何错误。

如果没有匹配的元素，

返回'hashchange'将阻止操作

＆＃13;

!!element

＆＃13;

window.addEventListener('hashchange', function(e) {
  var element = document.querySelector(location.hash)
  console.log(element)
  return !!element
})

＆＃13;

Answer 2

基本问题是循环这么多项目总是需要一些时间。但也许使用像.map()这样的内置函数会比你自己的循环更快。

var allTheID = [].map.call(allTheElementsHavingID, e => e.id);

但显然我错了。

JQuery map vs Javascript map vs For-loop

Answer 3

您可以为它们提供相同类的所有元素，然后获取具有相同类的所有元素的ID。这是jsfiddle https://jsfiddle.net/qdk9d55w/4/

 var elementIds = [];
 var elements = document.getElementsByClassName("example");
 for (var i = 0, len = elements.length; i < len; i++) {
    if (elements[i].id != '') {
        elementIds.push(elements[i].id);
    }
 }
 alert(elementIds);

获取数组中所有元素的ID

3 个答案: