Javascript 在可能尚不存在的 html 上运行

Question

我找到了一些我想使用的代码on fiddle

var tags = [].slice.call(document.querySelector('.tagcloud')
.getElementsByTagName('a'));

tags.forEach(function(el) {
  el.style.backgroundColor = randomColor();
}); 

function randomColor() {
    return  '#' + (0x1000000 + (Math.random()) *     0xffffff).toString(16).substr(1, 6);
});

但我将它插入我的购物车平台（在他们给我 fr JS 的区域）并且我得到一个错误：

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

代码相当简单明了，显然适用于 fiddle，所以我怀疑可能是因为相关的 html 尚未生成？我认为这与 "delegating" 有关，但我不清楚如何实施。

这里是生成的HTML:

<div class="footer_block_content tagcloud">
    <a class="tag_level2 first_item"> asd </a>
    <a class="tag_level1 item"> rfds </a>
    <a class="tag_level1 item"> ewsf </a>
    <a class="tag_level3 item"> sdfa</a>
    <a class="tag_level1 item"> earf </a>
    <a class="tag_level1 item"> sdfae </a>
    <a class="tag_level1 last_item"> adfa </a>
</div>

Answer 1

你好，看看这是不是你想做的：

    <div class="tagcloud">
    <a href="#" class="tag-link-79">tag1</a> 
    <a href="#" class="tag-link-78">tag2</a> 
    <a href="#" class="tag-link-35">tag3</a> 
    <a href="#" class="tag-link-32">tag4</a> 
    <a href="#" class="tag-link-29">tag5</a> 
    <a href="#" class="tag-link-30">tag6</a> 
    <a href="#" class="tag-link-34">tag7</a> 
    <a href="#" class="tag-link-31">tag8</a> 
    <a href="#" class="tag-link-33">tag9</a> 
    </div>

<script>
    function addColors(){
        var tags = document.getElementsByTagName("a");

        for(var i=0;i<tags.length;i++){
            tags[i].style.backgroundColor = randomColor();
        }
    }

    function randomColor() {
        return  '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);
    }

    document.load = addColors();
</script>

https://jsfiddle.net/dL0hb3ar/8/

Answer 2

看来你把这些代码放在中，因为浏览器按顺序渲染，并立即执行它看到的代码，<a> 可能当时没有渲染。您可以将脚本包装到一个函数中，并将该函数分配给 window.onload，如 jsfiddle 所做的那样：

window.onload = function() {
    var tags = [].slice.call(document.querySelector('.tagcloud')
    .getElementsByTagName('a'));

    tags.forEach(function(el) {
      el.style.backgroundColor = randomColor();
    }); 

    function randomColor() {
        return  '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);
    };
};

补充注意，你在randomColor的末尾放了一个')'，如果不是打字错误，会导致语法错误。

a {
    display: inline-block;
    color: #fff;
    padding: 5px 10px;
}

<script>
  window.onload = function() {
  var tags = [].slice.call(document.querySelector('.tagcloud')
    .getElementsByTagName('a'));

  tags.forEach(function(el) {
    el.style.backgroundColor = randomColor();
  }); 

  function randomColor() {
      return  '#' + (0x1000000 + (Math.random()) *     0xffffff).toString(16).substr(1, 6);
  };
}
</script>

<div class="tagcloud">
<a href="#" class="tag-link-79">tag1</a> 
<a href="#" class="tag-link-78">tag2</a> 
<a href="#" class="tag-link-35">tag3</a> 
<a href="#" class="tag-link-32">tag4</a> 
<a href="#" class="tag-link-29">tag5</a> 
<a href="#" class="tag-link-30">tag6</a> 
<a href="#" class="tag-link-34">tag7</a> 
<a href="#" class="tag-link-31">tag8</a> 
<a href="#" class="tag-link-33">tag9</a> 
</div>

Javascript 在可能尚不存在的 html 上运行

Javascript operating on html that might not exist yet

javascript

delegates