I have been programming with JavaScript for a while now but today I just knew that element.childNodes returns an array of nodes including the text!!!
I probably have never run with trouble because I used to create the element and append text in paragraphs; but now that I think about it, things could get really messy with text as nodes!
my question is: how can I get only the child nodes that are tags not text nodes.
For example:
<div id="e">
I don't want to include this text right here.
<p>I want to get this paragraph child</p>
I also want to <em>exclude</em> this text...
<img src="image.jpg" alt=" " />
Google
Exclude this text too..
</div>
Therefore, I want to get the p, img, a and maybe em objects only..
Here is a simple example of using .children to target only the elements. childNodes returns textNodes by default and at times that is very useful, but not appropriate for your example usage.
[].forEach.call(document.querySelector('#e').children,function(el){ el.style.color = 'red'; });
<div id="e">
I don't want to include this text right here.
<p>I want to get this paragraph child</p>
I also want to <em>exclude</em> this text...
<img src="image.jpg" alt=" " />
Google
Exclude this text too..
</div>
Related
Please help me understand why this is happening.
(UPDATE) TL;DR:
nested elements' text will be included when using find with not(NESTED_ELEMENT) selector but will be excluded when using find with not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE).
I want to get the text from a page but to exclude some elements.
For the simplicity, I have excluded <p> element only (and descendants) but when I use the text(), I'm also getting the text in the excluded element.
When I filter the results with contents() to include only text nodes, only then the not selector is "working" by not returning the text from the excluded elements. Please see image below with the code used:
Why isn't it working without using contents()?
Thanks.
For your convenience:
The URL that I tested on is this one.
The code that gives me the excluded element's text:
$('body').find(':not(p, p *)').text()
The code that gives me the desired text (excluded element's text not present):
$('body').find(':not(p, p *)').contents().filter(function(){return this.nodeType == 3}).text()
And here's the HTML part from the URL. As you can see, there's a <p> element there and As described, I want to get the text from this HTML but to exclude some elements (p was selected for simplicity, there will be lots more rules in production).
<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>
Try using .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>
<div>
some text
<img />
<br>
text I want to select
<br>
<img />
some text
</div>
The HTML is like above, I want to select the text between the two images, is there anyway to do this?
Some background: I am trying to format some poorly written HTML so it can be further stylized. There are too many pages of them to hardcode it one by one, they have some certain pattern though, so I am trying to write a javascript function to make the whole procedure easier. The text between <br> is actually the description of the first image, I want to wrap it with <div> so I can add class to it and stylize it. But first I need to select it, right?
Simplest solution using core jQuery functions:
$('img').nextUntil('img').doSomething();
Jonathan Snook pointed me to the jQuery 1.4 function that solves this:
nextUntil()
Check out it's sibling functions:
prevUntil
parentsUntil
Inspired by:
nextAll
prevAll
For other reference check this one :How to select all content between two tags in jQuery
<div>
some text
<img />
<br>
<span>text I want to select <span>
<br>
<img />
some text
</div>
add tag for this and get "div span" . If have more span in "div" . add id or class for them.
If i have html like this.Is there a way get a text apple between < div class="a" > and send it trought ajax to gwt application ?
<div class="A">
<div class="B">
<img class="icon" src="/images/ico.png" alt="" />
<div class="a">apple</div>
<div class="b">bannana</div>
</div>
</div>
and i have JavaScript like this :
$function(){
$('.B .icon').click(function(){
$(this).closest('.B').addClass('marked');
});
}
I would add this as a comment if I had enough reputation as I'm confused about your structure and question in general. Apologies if I don't understand correctly, but if you're typically traversing back up the DOM structure to the parent in your case could you use find to grab the element? .html() will grab the current content of said element.
$(function() {
$('.icon').click(function(){
var html = $(this).closest('.B').find('div.a').html();
// Do what you want with the contents. Simple alert as example.
alert(html);
});
});
This should get you what you're looking for. Please mark it as the answer if you find it matches what you need.
I'd suggest using .parent() rather than .closest('.B') if your elements will always be in the order you've posted and if further searching of the ancestor elements isn't needed.
I have HTML that looks like this
<div id="1053906-cdm-contract-with-city-of-new-orleans-2013-fema" class="contract-container">
<p class="contract-title contract">CDM- Contract with City of New Orleans: 2013-FEMA-3BCD COOPER GT TOWN DIXON CDM SMITH</p>
<p class="contract-description contract">2013-FEMA-3BCD COOPER GT TOWN DIXON CDM SMITH</p>
<div class="mention-text contract"><div class="page">Page 1</div> sometext </div> <br><br>
<div class="mention-text contract"><div class="page">Page 16</div> some text</div> <br><br>
</div>
When a user clicks anywhere in the outer-most div, I want to find the closest "page". I use this jquery
firsthtml = $(this).closest(".page").html();
This returns "undefined" for firsthtml
If I get rid of the .html() and hover over the firsthtml var -- I see that it returns the HTML for the entire div. In other words it returns multiple divs with class="page".
Why isn't it pulling only the first class with "page"?
So there's a difference between .closest() and .find() and what you're trying to do.
http://api.jquery.com/closest/
closest and find navigate up and down the DOM tree. If you wanted to get the HTML of .page you would have to say something like
$(this).find('.page').html();
Since `.page' is almost the last element in your div structure.
If you're looking to get the HTML of the FIRST .page element, that is different. You'd have to say something like:
$('.page').eq(0).html()
.eq() is another way of saying .index() but it will select whichever element you want. If you want to select that page inside that specific div, you could possibly do
$(this).find('.page').eq(0).html();
I have this script:
<script>
var prop = document.getElementById('div1').firstChild.getAttribute("id");
function aler()
{
alert(prop);
}
</script>
and out of the script tag:
<div id="div1">some content</div>
<button onclick="aler()"></button>
Can someone explain to me why when I click the button it says: "undefined"
Correction:
in the div i drag a picture:
<img id="C" src="C.png" draggable="true" ondragstart="drag(event)" width="91px" height="91px">
for example.
The first child of div1 is a text node. It has no id.
EDIT
As to your correction, if the resulting HTML looks anything like this, then the first child is still a text node:
<div id="div1">
<img id="C" etc.>
</div>
because text includes tabs, spaces, and returns. I'm not sure how drag/drop affects that.
In the DOM, there are various kinds of "nodes." Your <div id="div1">some content</div> markup defines two nodes: An Element that's a div, and its first (and only) child, a Text node containing the text you have within the div. The Text node has no id. The div element has an id, but the text node does not.
document.getElementById('div1').firstChild is the text some content. When you call getAttribute("id") on that, since plain text had no id, you're going to get undefined.