如何使用带索引的document.write输出getElementsByTagName获取的元素内容

问题原因 #

• document.getElementsByTagName() 返回的是实时的HTMLCollection对象，会跟随DOM树的变化自动更新内容
• 当页面完成加载后再调用document.write()，会隐式执行document.open()清空整个现有DOM树，再写入新内容
• 你第一次执行document.write(x[0].innerHTML)时，原有DOM里的两个<p>标签已经被清空，实时集合x的长度立刻变成1，再访问x[1]就会因为不存在而报错，无法输出内容

解决方案 #

方案1：提前缓存所有要输出的内容，再统一写入 #

先把所有要输出的内容存到普通变量里，再调用document.write()，避免DOM清空后取不到后续元素：

<html>
<head>
    
</head>
<body>
    <p>paragraph first</p>
    <p>paragraph second</p>
    
    <script>
        function f1()
        {
           var x =document.getElementsByTagName("p");
           // 先缓存内容
           var content1 = x[0].innerHTML;
           var content2 = x[1].innerHTML;
           // 再统一写入
           document.write(content1);
           document.write(content2);
        }
    </script>
    <button onclick="f1()">Click</button>
</body>
</html>

方案2：避免使用document.write，改用DOM操作输出内容 #

document.write本身是很老旧的API，不推荐在页面加载完成后使用，你可以在页面预留内容容器，把要输出的内容插入到容器里：

<html>
<head>
    
</head>
<body>
    <p>paragraph first</p>
    <p>paragraph second</p>
    <!-- 预留输出容器 -->
    <div id="output"></div>
    
    <script>
        function f1()
        {
           var x =document.getElementsByTagName("p");
           var output = document.getElementById('output');
           output.innerHTML = x[0].innerHTML + x[1].innerHTML;
        }
    </script>
    <button onclick="f1()">Click</button>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sudarshan Patil