打印getElementsByClassName

Question

我只想打印一些属于特定类的html文件。我成功地创建了完成这项工作的getElementById funciotn，但是我似乎无法为getElementsByClassName创建同样的功能。我需要的是能够只打印有class=“打印”的单个div，而atm我只打印ID。

下面是我的html代码示例：

    <div id="CCC" title"Checklist"> 
        <h2>Checklist</h2>
            <div>Content</div>
</div>

<div id="BBB" title="Chapter 1">
        <h2 class="Chapter">Chapter 1</h2>
            <div><p>Content 2</p></div>

    <div>
        <table id="Ch1_tab" width="100%" border="1" style="border-color:#D2D2D2; border-collapse:collapse;">
        <div id="Q0101" class="print">
        <tr>
            <td width="41" align="left" valign="top"><div class="QNumber">1.1</div></td>
            <td><div class="QText">Name of the vessel:</div></td>
            <td width="300"><div class="Response"><input name="Text" type="text" id="vslName" size="31"></div></td>
        </tr>
        </div>
        <div id="Q0102">
        <tr>
            <td width="41" align="left" valign="top"><div class="QNumber">1.2</div></td>
            <td><div class="QText">Vessel IMO Number:</div></td>
            <td width="300"><div class="Response"><input name="Text" type="number" id="IMONum" size="10"></div></td>
        </tr>
        </div>
        <div id="Q0107" class="print">
        <tr>
            <td width="41" align="left" valign="top"><div class="QNumber">1.7</div></td>
            <td><div class="QText">How many Load Lines certificates available:</div></td>
            <td width="300"><div class="Response"><input name="Text" type="number" id="R0107" size="10"></div></td>
        </tr>
        </div>
        <div id="Q0107" class="print">
        <tr>
            <td width="41" align="left" valign="top"><div class="QNumber">1.9</div></td>
            <td><div class="QText">Date the crew commenced preparation for vetting:</div></td>
            <td width="300"><div class="Response"><input name="GenDate" class="GenDate" type="text" id="R0109"></div></td>
        </tr>
        </div>
        </table>
    </div>


<iframe name=print_frame width=0 height=0 frameborder=0></iframe>
<p>
<input type="button" value="Print Div" onclick="javascript:printDiv()">
</p>

这是我的JS打印ID="BBB“

<script>
printDivCSS = new String ('')
function printDiv() {
    window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById('BBB').innerHTML
    window.frames["print_frame"].window.focus()
    window.frames["print_frame"].window.print()
}
</script>

提前感谢！

Answer 1

getElementsByClassName返回一组元素

在for循环中，必须打印每个div。

var elems = document.getElementsByClassName("print");
for ( var i = 0; i < elems.length; i++ ) {
    window.frames["print_frame"].document.body.innerHTML=printDivCSS+elems[i].innerHTML;
    window.frames["print_frame"].window.focus()
    window.frames["print_frame"].window.print()
}

Answer 2

您可以使用document.getElementsByClassName()或document.querySelectorAll()很小地做到这一点。下面是一个使用document.querySelectorAll()查找带有"print“类的所有div的示例函数：

  var visitAllPrintDivs = function(visitFunction) {
     var divsWithPrintClass = document.querySelectorAll('div.print');
     for (var i = 0; i < divsWithPrintClass.length; i++) {
        var divWithPrintClass = divsWithPrintClass[i];
        visitFunction(divWithPrintClass);
     }
  };

..。您可以简单地使用如下所示：

visitAllPrintDivs(console.log);  // applies "console.log(div)" to the divs.