javascript - not - obtener el primer hijo de un elemento jquery

JQuery encuentra que los nodos de texto con no selector en los elementos anidados funcionan solo con.contents() y filter()

Question

Por favor, ayúdame a entender por qué está sucediendo esto.

(ACTUALIZACIÓN) TL; DR: el texto de los elementos anidados se incluirá cuando se use el selector de búsqueda con no NESTED_ELEMENT, pero se excluirá al usar find with not (NESTEDT_ELEMENT) + contents + filter (TEXT_NODE).

Quiero obtener el texto de una página pero excluir algunos elementos. Por simplicidad, he excluido el elemento <p> solamente (y descendientes), pero cuando uso el text() , también obtengo el texto en el elemento excluido. Cuando filtre los resultados con los contents() para incluir solo los nodos de texto, solo entonces el selector no está "funcionando" al no devolver el texto de los elementos excluidos. Por favor, vea la imagen a continuación con el código utilizado:

¿Por qué no funciona sin usar contents() ?

Gracias.

Por su conveniencia:

La URL que probé es esta .

El código que me da el texto del elemento excluido:

$(''body'').find('':not(p, p *)'').text()

El código que me da el texto deseado (el texto del elemento excluido no está presente):

$(''body'').find('':not(p, p *)'').contents().filter(function(){return this.nodeType == 3}).text()

Y aquí está la parte HTML de la URL. Como puede ver, hay un elemento <p> allí y Como se describió, quiero obtener el texto de este HTML pero para excluir algunos elementos (se seleccionó p por simplicidad, habrá muchas más reglas en producción).

<div class="col-lg-12">
                    <header id="header" role="banner" class="jumbotron">
                        <h1>
                            <img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
                            <i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
                            <span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
                        </h1>
                        <p class="lead" id="lead_content">The more you understand the specification, the more you''ll realize there are more right 
                        ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
                    </header>
                </div>

Answer 1

Intenta usar .clone() , .remove() , .text()

var filtered = $(".col-lg-12").clone();
filtered.find("p").remove();

console.log(filtered.text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="col-lg-12">
  <header id="header" role="banner" class="jumbotron">
    <h1>
                            <img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
                            <i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
                            <span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
                        </h1>
    <p class="lead" id="lead_content">The more you understand the specification, the more you''ll realize there are more right ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
  </header>
</div>