2

我是 JavaScript 新手。我有一个目录，我想根据用户的窗口大小使用window.onresize.

window.onresize = function () {

    var w = window.innerWidth;
    var nocolumn = Math.floor(w / 252);
    if (nocolumn == 0) {
        nocolumn = 1;
    }

    var table = document.getElementById("MainContent_DataList1");
    var tbody = table.getElementsByTagName("tbody")[0];
    var link = tbody.getElementsByTagName("a");

    var norow = Math.ceil(link.length / nocolumn);
    tbody.innerHTML = "";

    console.log(norow + " " + link.length + " " + nocolumn);
    for (var i = 0; i < norow; i++) {
        var row = document.createElement("tr");
        tbody.appendChild(row);
        for (var j = 0; j < nocolumn; j++) {
            var cell = document.createElement("td");
            row.appendChild(cell);
            if ((i * nocolumn + j) < link.length) {
                cell.appendChild(link[i * nocolumn + j]);
            }
        }
    }
};

我不明白为什么变量“链接”数组在我使用后变空，innerHTML = "";但我在它被清除之前存储了它。是我做错了什么还是有其他方法可以做到这一点？

4

2 回答 2

1

当您删除 innerHTML 时，您会删除 DOM 对象，因此对它们的每个引用都将指向 null。

解决它的方法是克隆这些对象：

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = {};
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

window.onresize = function () {

    var w = window.innerWidth;
    var nocolumn = Math.floor(w / 252);
    if (nocolumn == 0) {
        nocolumn = 1;
    }

    var table = document.getElementById("MainContent_DataList1");
    var tbody = table.getElementsByTagName("tbody")[0];
    var tmp = tbody.getElementsByTagName("a");
    var link = clone(tmp);

    var norow = Math.ceil(link.length / nocolumn);
    tbody.innerHTML = "";

    ...
}

该方法的功劳clone()：https ://stackoverflow.com/a/728694/1057429

于 2013-06-17T02:49:10.350 回答
0

正如其他答案所建议的那样，getElementsByTagName返回一个活动的NodeList。因此，当您从正文中删除所有元素时，NodeList 会更新为不包含任何节点。

作为替代方案，您可以使用返回静态 NodeList 的querySelectorAll，或者使用getElementsByTagName并在从主体中清除节点之前分配对数组的引用，例如

function getNodes() {
  var tbody = document.body || document.getElementsByTagName('body')[0];
  var nodes, link;

  if (tbody.querySelectorAll) {
    link = tbody.querySelectorAll('*');
  } else {
    nodes = tbody.getElementsByTagName("*");
    link = [];

    for (var i=0, iLen=nodes.length; i<iLen; i++) {
      link[i] = nodes[i];
    }
  }
  return link;
}
于 2013-06-17T03:34:28.630 回答