JS 循环和赋值

Question

有如下两个DIV
<div class="DivUsual"><span class="attent" name="updateAllMessage"></span></div>
<div class="DivUsual"><span class="attent" name="updateAllMessage"></span></div>
我想给DIV里面的span赋值
JS代码如下：

    var msgElements = document.getElementsByName("updateAllMessage");
    
    for(var i=0;i<msgElements.length;i++){
        if(msgElements){
            msgElements.innerHTML = "AAAA";
        }
    }

但是如何也附不上值，求解答。

Answer 1

    for (var i = 0; i < msgElements.length; i++) {
      if (msgElements[i]) {
        msgElements[i].innerHTML = "AAAA";
      }
    }

Answer 2

msgElements是个DOM集合.而不是要操作的DOM.

var msgElements = document.getElementsByName("updateAllMessage");

for (var i = 0; i < msgElements.length; i++) {
  if (msgElements.length) {
    msgElements[i].innerHTML = "AAAA";
  }
}

这样改动就可以了.

Answer 3

如上所述，你的判断条件永远是ｔｒｕｅ，但处理逻辑不对。你是考虑兼容ＩＥ吗此处？推荐使用class选择器，byName规范不推荐的

Answer 4

把该js块放在body的下面，并改JS成：

var msgElements = document.getElementsByName("updateAllMessage");
for(var i=0;i<msgElements.length;i++){
    if(msgElements[i]){
        msgElements[i].innerHTML = "AAAA";
    }
}

Answer 5

for (var i = 0, len = msgElements.length; i < len; i++) {
  var elem = msgElements[i];
  if (elem) {
    elem.innerHTML = "AAAA";
  }
}

因为通过 document.getElementsByName 获取的DOM集合是实时映射的，所以可以对需要多次使用的dom元素进行缓存，以提高性能。问题@supreme 已回答。

Answer 6

let elements = document.getElementsByTagName('updateAllMessage')
let elements_list = [...elements]

elements_list.forEach(function(ele){
    ele.innerHTML='AAAA'
})

Answer 7

不要再用这种DOM操作方法了，用VUE，或者react-js