Run results for: innerText

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36

Browser: Chrome 80

Operating system: Windows

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
Delete ignored nodes and get innerText	8265.0 Ops/sec
Itarate	50608.5 Ops/sec
Just text concatenation	69800.2 Ops/sec

HTML Preparation code:

<!DOCTYPE html>
<style>
.table-caption {
    visibility: hidden;
}
</style>
<div id="test" class="cart table-wrapper">
    <table class="cart items data table">
        <caption role="heading" aria-level="2" class="table-caption">Shopping Cart Items</caption>
        <thead convizit-ignore="true">
            <tr>
                <th class="col item" scope="col"><span>Product</span></th>
                <th class="col price" scope="col"><span>Price</span></th>
                <th class="col qty" scope="col"><span>Quantity</span></th>
                <th class="col subtotal" scope="col"><span>Subtotal</span></th>
            </tr>
        </thead>
        <tbody class="cart item">
            <tr class="item-info">
                <td data-th="Item" class="col item"> <a href="#"
                        title="Alyssa Boyleg" tabindex="-1" class="product-item-photo"> <span
                            class="product-image-container"><span class="product-image-wrapper"><img
                                    class="product-image-photo img-responsive"
                                    src=""
                                    alt="Alyssa Boyleg"></span></span> </a>
                    <div class="product-item-details"><strong class="product-item-name"> <a
                                href="#">Alyssa Boyleg</a> </strong>
                        <dl class="item-options">
                            <dt>Size</dt>
                            <dd> L </dd>
                            <dt>Color</dt>
                            <dd> Black </dd>
                        </dl>
                    </div>
                </td>
                <td class="col price" data-th="Price"> <span class="price-excluding-tax" data-label="Excl. Tax"> <span
                            class="cart-price"> <span class="price">MYR43.90</span></span> </span> </td>
                <td class="col qty" data-th="Qty">
                    <div class="field qty"><label class="label" for="cart-197870-qty"><span>Qty</span></label>
                        <div class="control qty"><input id="cart-197870-qty" name="cart[197870][qty]"
                                data-cart-item-id="XIP-3107-BLK-L" value="2" type="number" size="4" title="Qty"
                                class="input-text qty"></div>
                    </div>
                </td>
                <td class="col subtotal" data-th="Subtotal"> <address class="price-excluding-tax" data-label="Excl. Tax">
                        <span class="cart-price"> <address class="price">MYR87.80</address></span> </address> </td>
            </tr>
            <tr class="item-actions">
                <td colspan="100">
                    <div class="actions-toolbar">
                        <div id="gift-options-cart-item-197870"
                            class="gift-options-cart-item">
                        </div> <a class="action action-edit"
                            href="#"
                            title="Edit item parameters"><span class="fa fa-pencil"></span></a> <a href="#"
                            title="Remove item" class="action action-delete"><span
                                class="fa fa-trash"></span></a>
                    </div>
                  	<address>
                      Sensitive data
					</address>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Script Preparation code:

var element = document.querySelector("#test");

console.log(element.innerText);
console.log(innerText(element));
console.log(innerTextAdvanced(element));
console.log(innerTextMerge(element));

function innerText(el) {
  el = el.cloneNode(true) // can skip if mutability isn't a concern
  var nodes = el.querySelectorAll('address,*[convizit-ignore="true"]');
  nodes.forEach(s => s.remove())
  return el.innerText
}

function innerTextMerge(el) {
  	el = el.cloneNode(true);
	var nodes = [];
    var treeWalker = document.createTreeWalker(
        el,
        NodeFilter.SHOW_ELEMENT,
      	{ 
            acceptNode: function(node) {
                if(isIgnored(node)) {
                    nodes.push(node);
                    return NodeFilter.FILTER_REJECTACCEPT;
                }
                return NodeFilter.FILTER_SKIP
            }
        }
    );
    treeWalker.nextNode()
	nodes.forEach(s => s.remove())
    return el.innerText;
}

function innerTextAdvanced(el) {
    var treeWalker = document.createTreeWalker(
        el,
        NodeFilter.SHOW_ALL,
        { 
            acceptNode: function(node) {
                if(node.nodeType === Node.ELEMENT_NODE && (!isVisible(node) || isIgnored(node)) ) {
                    return NodeFilter.FILTER_REJECT;
                }
                if(node.nodeName === 'SCRIPT' && node.nodeName === 'STYLE' ) {
                    return NodeFilter.FILTER_REJECT;
                }
                return NodeFilter.FILTER_ACCEPT;
            }
        }
    );
    
    var text = '';
    while(treeWalker.nextNode()){
        var node = treeWalker.currentNode;

        if(node.nodeType === 3){
            var value = node.textContent.trim();
            if(value) {
                text += value + ' ';
            }
        }
    }

    return text.trim();
}

function isVisible(element) {
    const style = window.getComputedStyle(element);

    if (style.display === 'none') return false;

    if (style.visibility !== 'visible') return false;

    if (style.opacity < 0.1) return false;

    if (element.offsetWidth + element.getBoundingClientRect().width === 0) {
        return false;
    }

    if (element.offsetHeight + element.getBoundingClientRect().height === 0) {
        return false;
    }

    return true;
}

function isIgnored(element) {
    const ignoredTags = ['address'];

    if (ignoredTags.indexOf(element.nodeName.toLowerCase()) !== -1) return true;
    if (element.getAttribute('convizit-ignore') === 'true') return true;

    return false;
}

Tests:

Delete ignored nodes and get innerText
var text = innerText(element);
Itarate
var text = innerTextAdvanced(element);
Merge
var text = innerTextMerge(element);
innerText
var text = element.innerText;

Delete ignored nodes and get innerText

Itarate

Merge

innerText