Can't understand this line of JavaScript - javascript

Thanks for your attention and time.
I'm modifying an existing JavaScript but can't understand a line of code. Please help me understanding this line:
rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;
I am clear till .getElementsByTagName('td'), sortOn is being passed in this function as a parameter. But I couldn't understand [sortOn].firstChild.nodeValue;
Please guide me,
thanks

.getElementsByTagName('td') - returns a list of TD elements.
.getElementsByTagName('td')[sortOn] - fetches a single element from that list
.firstChild - returns the first element that is positioned inside this TD.
.nodeValue: see here - https://developer.mozilla.org/En/DOM/Node.nodeValue

[sortOn]
is array notation. It works in exactly the same way as rows[i]. Let's say sortOn is equal to 5, and that there are seven elements in rows[i].getElementsByTagName('td'), which is an array of <td> elements. Then you will get the sixth one (JavaScript arrays are 0 based), and this will be a <td> element.
firstChild means the first element beneath that td, so in this case
<td><em>emphasis</em><strong>some text</strong></td>
the <em> element is the first child
nodeValue is in this case the contents of that element, so "emphasis" will be returned.
You may well find the gecko DOM reference useful

rows[i].getElementsByTagName('td') will get all td elements that are children of rows[i]. The [sortOn] part selects the td whose index is specified by the sortOn parameter. The .firstChild.nodeValue gets the text contained in the first element within that td.
Update: In the DOM, elements such as <td> can only contain other child elements, but they don't have any text property. The text itself is contained in a special "text node" that is a child of the <td> node. This is why you use .firstChild to obtain the text node, then use .nodeValue to get the text contained in that node.

getelementsByTagName returns you an array of element with same tag, then by using sortOn variable you select specified one form collection and take his first child and look on it.

Related

In mdn web docs Element.querySelector method says that it should be descendant but example shows otherwise

I am learning JavaScript from the MDN web docs. I was studying Element.querySelector() method.
It is written that it returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
But there is an example given, which contradicts this fact.
var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
(baseElement.querySelector("div span").innerHTML);
<div>
<h5>Original content</h5>
<p>
inside paragraph
<span>inside span</span>
inside paragraph
</p>
</div>
<div>
<h5>Output</h5>
<div id="output"></div>
</div>
Here, div tag is not a descendant of p tag, still this code works.
Can you point where I am going wrong ?
Element.querySelector() first applies the CSS Selectors passed to .querySelector() method, on the whole document and not the base element on which .querySelector() was invoked. This is done to generate initial set of potential elements.
After generating initial set of potential elements, list of potential elements is then filtered to retain only those elements which are descendants of the base element. Finally, the first element from this filtered list is returned.
In your code example, entire document is first searched for elements that match div span. As there is only one element in the entire document that matches div span selector, initial set of potential elements contains only one span element. After that, this span element is checked to see if it is the descendant of baseElement. Since, in this case, it is a descendant of
the baseElement, it is returned.
What i explained above is written under "Return Value" heading in MDN - Element.querySelector()
The entire hierarchy of elements is
considered when matching, including those outside the set of elements
including baseElement and its descendants; in other words, selectors
is first applied to the whole document, not the baseElement, to
generate an initial list of potential elements. The resulting elements
are then examined to see if they are descendants of baseElement. The
first match of those remaining elements is returned by the
querySelector() method.

When and how does firstChild select #text nodes?

Bit new to JS here, so I apologize if this is something obvious. I've read through the relevant documentation, and I'm a bit perplexed about how and when exactly firstChild selects text nodes.
I have a span and an input like so:
<span class="checkbox">
<input class="inputs" value="1">
</span>
On page load, if I call:
$(".checkbox").firstChild
I'll get back that input html element. Now, if I make an ajax call that replaces the entire span and its input with identical code, and then call:
$(".checkbox").firstChild
I get a #text node element back. Why? It may be that a more pertinent question is when are #text nodes inserted into whitespaces?
Please let me know if you need some more context and I appreciate you taking the time to help a beginner out.
Whitespace between nodes creates text nodes, so depending on whether there's any space/newline/tab between the closing > of the parent and the opening < of the child you may or may not get text nodes.
Use firstElementChild instead. Similar equivalents exist for sibling traversal.
Other options are to adjust your CSS selector to get the first child or use jquery's traversal methods.

jquery dom number

I have two duplicate pieces of code that I want to work independently. I am therefore using the unique dom number to manipulate each.
I know I can use $("*").index(this) to get the DOM number of the current element, but how would I go about getting the DOM number of a parent (with class called 'test') of the current element?
Thanks for any help.
You can use $(this).parent() to obtain the parent of the current element, so you could replace "this" with the value of this query and would result something like: $("*").index($(this).parent()[0])

How to change attribute of surrounding div/parent effectively?

I have a table with some radiobuttons in it. When i click on a radiobutton, i want to update two of the sorrounding containers ID attribute (a div and a table). The problem is, i need to go 4 and 6 levels up, and the only way i know how to do this is parent().parent().parent().parent() etc.
I am looking for a better solution, and was hoping someone could point me in the right direction. You can see an image of how the "parent-child" tree is here:
http://imageshack.us/photo/my-images/834/imgkz.png/
I already have a clickhandler etc set up.
Basicly i need to check if the table's id attribute is "answeredTable", if not i need to change it. Also i need to check if the div two levels up from the table is "answered", if not, i need to change that too.
Thanks
You can use .closest('#answeredTable') or .parents('#answeredTable').
Using .parent() only selects the first parent element upon the DOM tree, selecting .closest() will allow you to walk up to DOM tree and match until it finds the element, while .parents() will return the whole parentset of the DOM and match the element in the whole parentset.
You need to use .parents() that go through multiple level of the DOM
For instance, in your example, you could get the surrounding div with this code:
$("#Q_18_2015").parents("div#answered")
By the way, id should be unique, or else, your code might probably not work. You should use classes instead.
<div class="answered">
Thus, the code would become:
$("#Q_18_2015").parents("div.answered")
provided that Q_18_2015 is really a unique id
I think what you want to use is closest http://api.jquery.com/closest/
you can use .parents
$("element").parent(".parentClass")
parents will go up the DOM until finds the parent with class parentClass

Element.insert at bottom-1 with prototype

I want to insert an Element at the position bottom -1 of his parent.
The following code insert at the bottom
el.insert({bottom: content})
thanks
You can insert it "before the last child element" like this:
el.select('*').last().insert({before:content});
el.select('*') gives the child elements in a nice prototype-extended collection.
last() of course retrieves the last element of that collection. You might want to retrieve it separately and make sure it is not undefined (which is what will be returned if there are no children) before attempting to "insert before it".
Also, IMO it feels better to pass in a non-wildcard selector if possible. For example, when the containing element is an <ul>, pass in 'li'.
Links:
Prototype Element#insert
Prototype Array#last

Categories

Resources