NodeList And Objects ToArray() - Convert NodeList And Object Properties To An Array
Dec 16, 2010
I've been working on a function to convert nodeList and object properties to an array. The first question is with regards IE and checking whether the object provided is an HTML collection. The best I have come up with so far, is to test if it's an object, has an 'item' which is a function and has length. The second question is with regards slice.call and a while loop copy. I guess I need to do some profile/timing tests, but I'm wondering if the function merits a slice.call? or should I simplify?
Code JavaScript:
// Some weirdness in IE regarding nodesList and typeof 'item' returning 'Object'
// even though when alerted it returns 'function (){...}'.
// Therefore having to use regExp.test() to check whether it's a function instead.
// Note: _isNodeList isn't full proof. An object with the properties
[Code]..
I have a function were the input parameter can either be an string,array,dom node or NodeList (getElementsByTagName()) and I have somthing like this function which works great for what I want in every case except if the pNd is the NodeList at which point I end up with the nodeList in the first element of the array instead of acting like the array would.
function doSomething(pNd){ if(pNd.constructor != Array){pNd = new Array(pNd)} return pNd }
So my question is how is there any easy way to figure out if pNd is a NodeList ? When I use pNd.constructor on NodeList all I get is [object]
I've often write javascripts that use this rather common code to get all tags in an XHTML document:
var alltags = document.getElementsByTagName('*') ... and then use a for loop to access the elements as an array, for example: for (i=0;i<alltags.length;i++) { elementClass=alltags.className [i]Do stuff }
This has always seemed to work in the past, but I recently learned that the getElementsByTagName method returns a DOM NodeList, not an array. I'm currenly working on a project that needs to access the children of an element conditionally upon its class.
I have three questions. First: How do I declare a global variable to be a DOM NodeList object? It wouldn't be assigned until called from a function, so something akin to var elementList = document.getElementsByTagName() in my global declarations is out of the question. Is there something like var elementList = new NodeList() in javascript? (I know that I can assign it in a function without the var and it will be global, but other people may have to work with this code, and I'd like to have it clearly declared at the head of the program.)
Second question: Assuming alltags is a NodeList returned from a getElementsByTagName call, which of these is proper? This:
childElements = alltags[i].getChildNodes() ... or this: childElements = alltags.item(i).getChildNodes() And finally, which of the above techniques has better browser support?
I'm developing sort of a do-all javascript required form field check (which was developed long after the pages were developed). It uses a lot of getElementsByTagName so it's creating several NodeLists. One of these nodelists contain all the divs, those showing (display:block) and those hidden (display:none). The function checks only the divs that are visible.
This is my first experience with NodeLists so the first thing I tried was removeNode() on the hidden divs. This doesn't work because when you return with required field errors and try to make the hidden fields appear I believe there are errors because the hidden divs were removed from the DOM.
I've tried a few other work-a-rounds but it's getting to be afternoon and I'm turning to you guys for help! Is it possible for me to just skip forward to the next Node in the NodeList? I've tried nextSibling but I guess I'm calling it on the wrong Node.
Anyway clever ways of checking whether an object is a nodelist in IE. There appears to only be two properties item and length.This is what I'm working on
Code: // Some weirdness in IE regarding nodesList and typeof 'item' returning 'Object' // even though when alerted it returns 'function (){...}'.
how to add extra properties to html elements as I was storing data in html attributes. After looking at some others code including Raphael and this addEvent code. [URL] They seem to treat objects just like an array. obj[property] = value; This would have been extremely helpful to know previously as I have needed to be able to include variables in property names - but have resorted to making the whole thing a string and calling exec() on it.
How do I explain this? I am grabbing several elements from my document and placing them in an array, using jQuery. When I test the Code: typeof this item, it returns as an Object, not an Array, which is problematic for IE. Firefox seems not to have an issue with Code: Object.length , but IE won't have any of that, so I need Code: Array.length or do I? In the end, I just want IE to know how many keys are in the Array/Object...
I have an array of objects that I would like to sort through and "join" objects that are the same. And if they are the same, I need to sum up the number value given for those two items. So I guess Im sorting through and maybe even recreating this array to get rid of duplicates while I tally quantities. see the screenshot of my array of objects to help understand better. The highlighted 'sPSPN' would indicate that it is a duplicate item and its 'fUnits' need to be totalled. in the end I would have a total of 3 objects, because 'sPSPN'= BT-221-44 would now be only one object with 'fUnits' = 35.
Is there a way in Javascript or Jquery to return an array of all objects underneath a certain point, ie. the mouse position. Basically, I have a series of images which link to various web pages but I have a large semi transparent image positioned over the top of the other images. I want to find the href of the background image that the mouse pointer clicks over.
You will notice that the 'text' and 'selected' properties are marked as read-only. This adds an interesting dilemma: how do you go about programatically modifying these properties, especially considering the need to assign to 'text' when creating a new object? Would you add a text node, as you find in HTML, to represent the text displayed? If that is the correct approach, it still leaves 'selected' inaccessible[1].
Something that I did notice is that the ECMAScript bindingsdon't mark any properties as read-only, and assigning to 'text' is possible, certainly in Opera. Is that because there is no concept of read-only, so the browser can choose to ignore assignments, or some other reason?
I have a menu that is made from a ul element (with li children).
Here is an example:
< ul id="menu" > < li><a href="#divEntire2">Home Page</a></li>
[Code].....
However, if I do something like $(this).css('background-color','maroon'), the text and a section of bar under it does turn maroon. This happens even I just click on the bar.
I am working on a page where the user will select a location from a dynamically generated dropdown list. I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form.For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields.
I am really hoping someone is willing to take the time to read this post and take a minute to take a look at my code. What is happening is there are some matches for a script I made and then an area for segments during an event. If you notice on the segment part of the form is that there is a dropdown that asks for where in the event that segment needs to go. With the Introduction or the different numbered matches. What I need to happen for a subArray I need it to take the introduction, all the matches, and all the segments and order them accordingly. With the introduction first, the matches in order based off there match number and then the segments in between the introduction or matches based off the user's input.[URL]..
I've been trying to create a 'loading page' for a from. When a user submitts a form, a loading animation is displayed on the page. Then I have javascript connecting to a url on my server that generates a dynamic file and returns it from memory. My problem is that I can display the text from this new file, but what I want to do is prompt the user to save the file locally. Is there a way to make this sort of conversion in javascript?
i'd like to know objects properties and/or methods.
saying i do have an object "o" being part of the dom (a div or an ul...) how could i list (introspection) all the properties and methods attached to this object ?
i know it is possible in javascript but don't remeber how to ...
Do many programmers remember most of the object properties and methods or do they use IDE or references to find those specific objects. I'm starting to learn Javascript and seeing all the different type of objects available can be depressing. :(
I am fairly familiar with the concept of Objects and their properties and methods, but javascript being object based as opposed to object oriented has me stumped on how to access an object's properties from an onclick event handler created for another object created within the original object.
In the example below, I have a constructor function called anyObj. to which I pass an object reference to an element.
anyObj has 3 properties and one function increaseWidth()
increaseWidth() creates a new button with an onclick event handler and this is where I have a problem.
The onclick function needs to increase the value of anyObj's this.width property. I originally had a line this.width += 10; in the onclick but quickly realised why this wasn't working because the this in the onclick function refers to the new button object and not the this.width property of anyObj.
The workaround I have used, and it works, is to make a copy of all the this.xxxxx properties. eg. width = this.width; and use the width variable in the onclick as you can see below. This "workaround" works fine but doesn't feel ideal to me.
So is there a better way to access the anyObj()'s properties from within the onclick function than the way I have done it? Obviously I would prefer to not have to make copies of all the anyObj() properties like I have to make them accessible to the onclick function.
Say x in a XML Http Request Object ... meaning it's either XMLHttpRequest (firefox) or ActiveXObject (IE)
This line of code works in firefox... x.someProp = "someValue"; alert(x.someProp);
But in IE I get "Object doesn't support this property or method" I need to place a custom property on the object. Is there any way I can do that in IE?
