From what I've read, everything in the DOM is a node. Basically there are three types of nodes: text, element and attribute (there are more node types but these are the most common).
Let's say I have the following html:
<html>
<form>
<p></p>
</form
</html>
Then this javascript:
var forms = document.getElementsByTagName("form")
var form = forms[0];
alert(form.childNodes.length); /* output is 3 */
I would think that the output should be 2 as I only see 2 childNodes for the form object: the <p> element is an element node and the <p> element has a text node, so that's a total of 2 nodes. Where is the 3rd one comming from.
The above javascript still outputs 3. I would think that the output is 4:
- 1st node is the <p> element
- 2nd node is the <p> element's attribute node "title"
- 3rd node is the <p> element's attribute node "id"
- 4th node is the <p> element's text node
Obviously I'm not correctly comprehending how childNodes are determined.
This is a clarification of a previous message, which was not expressed very well. I have a set of checkboxes near the bottom of the page and a function that checks or unchecks all of them. But when the function runs, the window scrolls to the top of the page.
How can I set my checkboxes but leave the window's scroll position exactly where it is? Or at least have it scroll to the bottom (where the checkboxes are).
I've tried using window.scrollTo(), but the window always scrolls to the top no matter what. It's the same in Navigator and IE.
I'm working on hiding all of a page's content immediately via Javascript. I want to avoid using CSS to display none just incase I run into users who don't have JS enabled.
I wanted to get advice from others and see what the difference is between using jQuery actions within $(window) or $(document).ready. From what I understand, $(window).bind("load, function(){ etc. will only use the script once all contents on the page are loaded, including images?
And $(document).ready(function(), etc just requires the DOM to be ready but will still execute code even if images, etc. aren't loaded.
this should be simple but I cannot figure it out. This is the HTML:
HTML Code: <div id="box"> <p>one</p> <p>two <strong>three</strong></p> ... </div> The JavaScript function has to take everything inside <div id="box"> and put it into another div. It should become:
HTML Code: <div id="box"> <div class="content"> <p>one</p> <p>two <strong>three</strong></p> ... </div> </div> So how can I get all childNodes recursively to enclose them with another element?
If I use the following to get te amount of childs for xmlnames I get an amount of 11: xmlObj.responseXML.getElementsByTagName('xmlnames' )[0].childNodes.length
Is this wrong or maybe there is a better / other way of counting the child amount?
In my javascript I tried to list all the child nodes from <div>, Firefox and Opera gave me 3 -- 1)text node with a null value, 2)span, 3)text node with a null value.
It look to me that the browsers treated the line break as a text node with no value!!
If I modified the html code to : <div id="pagetitle"><span>My Text</span></div>
Then the browsers gave me the right answer: 1
They still gave me a wrong answer of 3 if I put a space around the <spanelement like this: <div id="pagetitle"<span>My Text</span</div>
What did I do wrong? I would still want the elements to be on their own lines.
i wrote a very simple HTML page to test some DOM features between Mozilla and IE. Mozilla is perfect everything went fine and i got the childNodes from my custom tag ( this tag i named <blah> ), inside this tag there is two <span>, that i retrieved. But with IE i really could figure out how its done! Code:
I wanna get all the text nodes of the children of an element. The goal is to get an array with all the textNodes in each cell of a table, without any other nodes that might ocure whithin that cell (<p>, <br> etc...)
I mean if: <td>12</td> <td>1<p>23<b>34</b>5</p>6</td> I need: var txt = new Array() txt[0] = ཈' txt[1] = ?'
Now I had to circle through all the childNodes to extract all the text nodes. I have build a function, but something is wrong in the code, and I don't sense what. I need soime fresh eyes, any ideeas? Where's the mistake?:
<script type="text/javascript"> function checkCell(){ var allC = document.getElementById('tab').getElementsByTagName('td');//cells' collection var txt = new Array() for(var i=0;i<allC.length;i++){ txt[i]='' while(allC[i].hasChildNodes()){ var chC = allC[i].childNodes; for(var j=0;j<chC.length;j++){ if(chC[j].nodeType==3){ txt[i]+=chC[j].data; } } allC[i]=allC[i].childNodes; } } alert(txt[1]) } onload=checkCell; </script>
I have a script that automatically makes the class change for an input field onFocus. Everything works in both IE and Firefox with the inputs, but I am having trouble with an image inside of a link in Firefox. I am using a link instead of a input type="submit" for IE reasons. Code:
is there a way for me to check the child nodes of the <form> element for a specific id. in other words, can I check if form1 contains an element with id 'one' for example?
I have a javascript for a tree view but i need to change it according to the requirement. Lets start with example with the treeview as follow:
1 Door phone 1.1 Ready Kits 1.1.1 Audioset 1.1.2 Videoset
[Code]....
Now the thing is in the current treeview a single category is open at a time. like if 1.1.1 is open 1.1.2 will b closed and similarly if 1.1 is open...1.2 will b closed. But i want that when i click on 1(Door phone) ie Door phone...evry node should be opened instead of just one similary when i click on 2(CCTV), all its node should be opened.
I want to count the number of childnodes, when i run this script in mozilla i get a different total for the number of childnodes from numkids then when the script runs in IE. Why is this? How Can I get the same number. I want to loop though an objects child elements setting them to invisible or visible
<script type="text/javascript"><!-- function rec(n) {
var kids = n.childNodes; var numkids = kids.length;
Example the Region is East it has 2 cities below. I need to get this length using JS. I tried doing x=xmlDoc.getElementsByTagName("City").length; But it counts all the city elements present i.e. it returns 4. How to get the length of the "City" element particular to a "Region" element.
i'm working on a portion of a CMS that allows content-admins to browse a product list, and add individual products into the taxonomy by clicking checkboxes next to categories they might belong in.
since the taxonomy is a rather long list, i'm hiding and showing divs for the secondary and tertiary links, so when a user clicks on the checkbox for the parent category, the children appear in a second (and third) div, with checkboxes of their own.
however, i'd like for the secondary and third level checkboxes to become unchecked when the parent is. i've tried addressing them in numerous ways, but something consistently gets lost, in that i keep getting "x doesn't have any properties" errors.
ie: var parentnode = document.getElementById(divName); var allMyChildren = parentnode.childNodes.getElementsByName("INPUT"); alert(allMyChildren.length);
this returns the proper length, but then
for (var i=0;i < allMyChildren.length;i++) { var chklist = allMyChildren[i]; if (chklist.type == "checkbox") { // uncheck it } }
this consistently returns that chklist has no properties...
Is there a way to calculate the .offsetLeft or .left of a character in a string relative the element that contains the string? I'm just trying to wrap each character in an element and position the characters independently, so I have to set the .position to absolute, and set the .left and .top on each element as I create it so I can move the elements later on.
i have found a possible bug in 1.4 but it's only in Internet Explorer 7 & 8.The following code does not work and completely ruins every peice of jquery on the page (that means everything inside $(document).ready and anyting else...
I cant see any syntax errors - i pulled the example from the 1.4 site. There is no trailing commas in the object notation and i really cant see any reason it would work in firefox and not IEx and more to the point not only not work in IEx but break any other jquery in the entire page....
I'm working with a large (and unweildy) ASP.NET application, and there is a lot of jQuery code that uses selectors like this:
[name=_aspnetControl$_withASubControl] And unfortunately, some selectors that also look like this:
[name^=_someAspNetControl$_radioButtonList].
In other words, the effort to remove the $ from the attribute selectors would be monumental. If it is possible to escape the $ symbols, I can do that easily enough, but unfortunately the situation right now means that I can't upgrade to jQuery 1.5.
I'm learning jQuery with XML. I'm familiar with other query languages such as XPath. I'm having a little bit of difficulty wrapping my brain around how jQuery works but I think I can make the leap if I see a solution to a problem I know how to solve with other methods Given the following XML, please share a jQuery solution to finding the value of attribute B in elements named bar where attribute A has the value 30:
I'll trying to tell the difference between the following three cases:
<img alt="text string" /> <img alt="" /> <img />
I can do this in Firefox with the following code, where elem is the HTMLElement representing each image, but IE doesn't seem to differentiate between empty string and undefined.
var alt = elem.getAttribute('alt'); alt = (alt) ? alt : ((alt===null) ? 'really_null' : "");
The desired output from running this code on the 3 tags above is:
text string
really_null
It seems like this should be really easy...but I'm having a really difficult time trying to figure out what's going on...
