Develop Reference

CSS selector combine with And operation '&&'

I am trying to use querySelectorAll() to get each 'td' element that have align attribute && is child of 'tr'
this works :
document.querySelectorAll('tr>td');
and this works :
document.querySelectorAll('[align]');
but how to combine them ?

Preface: There's no point whatsoever to tr> in front of td: The only valid parent element for a td is a tr. So I've left that off below.
That depends on what you want to do.
If you only want td elements with an align attribute:
document.querySelectorAll("td[align]")
Or only td elements that are children of tr elements that have an align attribute
document.querySelectorAll("tr[align]>td")
Or only elements with an align attribute that are children of td elements:
document.querySelectorAll("td[align]")
Or only elements with an align attribute that are descendants (not necessarily direct children) of td elements:
document.querySelectorAll("td [align]")
...and so on; full details in the spec.
Re your comment below:
It works, but is there a way to not select the first td from each tr ?
There's nothing about that in your question.
You could use td:not(:nth-child(0)) which means "a td that is not the first child of its parent" provided that you never have a script element as the first child of a tr (which is valid, but an odd thing to do). With that proviso, it works, because only td and script are valid children for tr.
Or you could just punt and select all the relevant tds and then:
var list = Array.prototype.slice.call(document.querySelector("whatever"), 1);
...which will give you an array skipping the first entry in the list returned by querySelectorAll.
Re your further comment:
tr[style]>td[align]:not(:nth-child(0)) returned 550 node lists which is the same as tr[style]>td[align]
Right. Again, :nth-child looks to see what child it is, not where it falls in the list chosen by the previous selector.
If you want to skip the first td in each row, and you want to ignore tr that don't have a style attribute, it's more complicated:
var result = Array.prototype.reduce.call(
document.querySelectorAll("tr[style]"),
function(list, row) {
list.push.call(
list,
Array.prototype.slice.call(row.querySelectorAll("tr[align]"), 1)
);
return list;
},
[]
);

You can combine selectors the same way as in CSS, like:
document.querySelectorAll('tr>td[align]');
If you haven't nested tables, it's the as document.querySelectorAll('td[align]');.

Combine them like this:
document.querySelectorAll('tr>td[align]');
More info: CSS Attribute Selectors
Note: <td> is only permitted as a child of <tr> anyway.

Referencing the Closest Table Element Near the Image HTML Element

I am trying to get access to the nearest table element from the Image HTML Element. I used siblings but it returns multiple tables since there are other tables at the same DOM level. I can access it using $(this).next().next() syntax but I do not want to do that.
Here is the screenshot. I am trying to access

This jQuery statement will do the trick:
$("img").nextUntil("table").last().next();

You can just keep iterating nextElementSibling until you find a table element:
// `img` is a reference to the image element
var table = img;
while(
(table = table.nextElementSibling)
&& table.tagName.toLowerCase() != 'table'
);
// Use `table` here. It will be `null` if no table is found

Select node from children by attribute

I have an interface that switches between displaying different div elements. When it switches which element it displays, I need to access a specific child node of that div element, with each div element having their children arranged differently.
The childNodes and children property both return an object that can only select children with item(index) which is annoying to use as the relevant child element's index is different in each div. For Protractor, I used the webmanager.by(selector) which was able to search with other parameters than index. Is there something similar I can use to select the child node with data-relevant="true". I am also unsure if that attribute is the best way to specify in the HTML which child node is relevant.
This is an Angular application if that helps.

If you want to select the child node with data-relevant="true" from some parent element, you could use the selector method
element.querySelector()
That would return the first matching element...
in your specific case it could be something like
parent-element.querySelector( "[data-relevant='true']" );
or if you want to select all paragraphs p with the data-relevant attribute value true within the parent div: parentDiv.querySelectorAll( "p[data-relevant='true']" );
You can find some examples on
http://www.w3.org/TR/selectors-api/#processing-selectors
An alternative would be to use a special class to identify which child node is relevant...
you could get this element/or many elements with getElementsByClassName(someClassName)
Code Sample With .querySelectorAll() method:
<script type="text/javascript">
window.addEventListener("load", init, false);
function init(){
var parentDiv = document.getElementById("divWithChildren");
var relevantChildren = parentDiv.querySelectorAll( "[data-relevant='true']" );
alert (relevantChildren[2].id); // this will give the id of the 3rd child element with data-relevant='true'
}
</script>

Append child in DOM table

I am using clone to add new row to the DOM table dynamically from a button click event like below mentioned. but i want to append the cloned node to a specific row position in the DOM table. i know i can do that by using "insertrow" option but i want to use this using clone.
var newNode = tblBody.rows[1].cloneNode(true);
tblBody.appendChild(newNode);
is there any way to insert or append the "newNode" in a position i dynamically choose rather appending it as last row.

Use .insertBefore() from tblBody, and pass the newNode as teh first argument, and the child of tblBody before which the node should be inserted as the second argument.
// put this node----v before this----v
tblBody.insertBefore(newNode, tblBody.rows[i]);
If tblBody.rows[i] is null or undefined, then .insertBefore() will just behave like .appendChild(), and put it at the end.

node.insertBefore() is what you are looking for: https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore

Parse string for text between divs

I have a string of html text stored in a variable:
var msg = '<div class="title">Alert</div><div class="message">New user just joined</div>'
I would like to know how I can filter out "New user just joined" from the above variable in jQuery/Javascript so that I can set the document title to just the message.

Like this:
document.title = $(msg).filter("div.message").text();
Note that if the message changes to be wrapped in an element, you'll need to replace filter with children.
EDIT: It looks like the div that you want is nested in other element(s).
If so, you can do it like this:
document.title = $("div.message", msg).text();
Explanation: $('<div>a</div><div>b</div>') creates a jQuery object holding two different <div> elements. You can find the one you're looking for by calling the filter function, which finds mathcing elements that are in the jQuery object that you call it on. (Not their children)
$('<p><div>a</div><div>b</div><p>') creates a jQuery object holding a single <p> element, and that <p> element contains two <div> elements as children. Calling $('selector', 'html') will find all descendants of the elements in the HTML that match the selector. (But it won't return the root element(s))

This is a hack and not very clean, but it should work:
add a div node and set its html to your text message,
get the text of the added element and store it in a variable
destroy the node
set the title with the contents of the variable in step 2