更改特定的，例如使用 DOM

Question

我对JavaScript和DOM比较陌生，但有C++的经验。我正在做几个严重依赖DOM的JavaScript实验，包括一个响应命令的控制台。整个事情工作正常，除非元素比页面长。控制台的工作方式是使用 DOM，它接受一个元素并向内容添加一行。这是一个问题，因为在清除它时，我无法针对特定行（即顶部行）来仅清除/修改该行。我已经尝试了我所知道的一切，例如循环、数组、嵌套 if 等，但没有运气。我只是希望控制台停止无休止地扩展，要么有一个滚动条，要么开始清除旧行。这是当前的清算机制（毫无用处）：

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

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

Answer 1

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

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

控制台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>