Question

我对JavaScript和DOM比较陌生，但有C ++经验。我正在研究几个严重依赖DOM的JavaScript实验，包括响应命令的控制台。整个过程工作正常，除非元素比页面长。控制台的工作方式是使用DOM，它需要一个元素并为内容添加一行。这是一个问题，因为在清除它时，我无法定位特定的行，即顶部的行，只能清除/修改那一行。我已经尝试了我所知道的所有内容，包括循环，数组，嵌套ifs等，但没有运气。我只是希望控制台无休止地延伸，要么有滚动条，要么只是开始清除旧线。这是当前的清算机制（相当无用）：

if (extended > 24)
{
    alert("Message Stream full, resetting.");
    document.getElementById("boxRightSpace").innerHTML = "";
    extended = 0;
}

任何帮助将不胜感激。感谢。

Answer 1

每次插入新行时，都可以将控制台滚动到底部：

document.getElementById("boxRightSpace").scrollTop = document.getElementById("boxRightSpace").scrollHeight;

console-div本身必须有一个固定的高度，overflow:auto就像这样

#boxRightSpace {
   overflow: auto;
   height: 300px;
   width: 400px;
}

或者，您可以通过此方法删除行：

<div id="boxRightSpace">
    <div>line1</div>
    <div>line2</div>
    <div>line3</div>
    <div>line4</div>
    <div>line5</div>
    <div>line6</div>
    <div>line7</div>
    <div>line8</div>
</div>

<script>

    var max_console_items = 5,
        cons= document.getElementById("boxRightSpace"),
        console_items = cons.getElementsByTagName("div");

    while (console_items.length > max_console_items)
    {
        cons.removeChild(console_items[0]);
    }
</script>

像使用DOM一样更改特定内容

1 个答案: