I am doing a tree view like by referring this link
I am getting this error in firebug
**Non-standard document.all property was used.
Use W3C standard document.getElementById() instead.
return document.all[id].style[property];**
How to use document.getElementById() at that place
This error message means that you accessed the property "all" of the variable document, but this property is, let's say, deprecated, so should not be used. The console says that you should use a method "getElementById", which returns the element with given id, on which you can then proceed.
To access the element by id if you know the id, you can for example, declare a variable and assign to it the result of getElementById (there is going to be a problem with style[property]):
var myElement=document.getElementById("id");
return myElement.property; // height for example
or just
return document.getElementById("id").property; // height for example
Related
What is the type of the variable "element" in this snippet?
I thought it is a number (an ID or something), but now, I have no idea.
The code works, but I don't understand, why the var element can be used in a for cycle, like an array. Is there any explanation about this?
<script type="text/javascript">
function showAtrributes() {
var element = document.getElementById("videos");
var listAttributes = "";
for(var attribute in element) {
var valueOfAtrrib = element.getAttribute(attribute);
listAttributes = listAttributes + attribute + ": " + valueOfAttrib + "\n";
}
alert(listAttributes);
}
</script>
The getElementById() method returns the element that has the ID
attribute with the specified value.
[....]
Returns null if no elements with the specified ID exists.
So it returns an HTMLElement Object
source
What is the return type of document.getElementById()
Element. It returns a reference to the actual object for the element in the DOM (or null if none was found with that id). Details:
Spec for Element
Spec for getElementById
Element on MDN
getElementById on MDN
I thought it is a number (an ID or something)
No, that's "video" (the string you used to look it up). It's also accessible from the id property of the Element object.
The code works, but I don't understand, why the var element can be used in a for cycle, like an array.
for-in isn't primarily for use on arrays, it's for use on objects. The only reason it works on arrays is that arrays are objects. (See this question's answers and this page on MDN for more on that.) DOM elements are objects, so you can loop through their enumerable properties via for-in.
The return type of document.getElementById() is Element Object or null. Please Refer the following link from MDN:
It looks like you are really questioning why the for loop works, not what kind of object getElementById returns. Read this article:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
The for( var in ....) syntax causes Javascript to iterate over the properties of the object specified by ....
The return type can be anything that the programmer of a Web Browser defines to the JS VM library used, to create a specific implementation of Javascript. For instance, the webcwebbrowser which uses SpiderMonkey returns a JSObject of HTMLElement JSClass which it gets by calling CreateJSObject on the underlying internal HTMLElement object. The JSObject is the internal VM library representation of objects visible to JS scripts, such as a HTMLElement. A HTMLElement in a script is actually accessing a JSObject logically instantiated from the HTMLElement JSClass, where JSObject and JSClasses are C++ classes. The HTMLElement JSObject also has a corresponding C++ native marshalled object of class HTMLElement.
Why does function getElementsByClassName() work on javascript objects, but "getElementById" kick back "not a function"?
var divBox= makeDivBox(divParams);
var divContents = divBox.getElementById("divID");
errors : divBox.getElementById is not a function
But :
var divContents = divBox.getElementsByClassName("divClass")[0];
has no issue. Why?
edit: see similar courtesy of #rajuGT
You appear to have a couple issues.
divBox.getElementById("divID"); doesn't work because getElementById() is only a method on the document object. It is not a method on other types of objects. So, the divBox element does not have that method. You could use document.getElementById("divID") instead if there was only one divID in the entire document and if divBox was already inserted into the document.
var divContents = divBox.getElementsByClassName("divClass")[0]; works because .getElementsByClassName() is a method on all DOM objects so it works when you call it on divBox.
You call getElementById() like this document.getElementById("someID").
If you want to find something in a particular part of the subtree, you can use element.querySelectorAll("#someID") or if you want to have more than one object with a given identifier, then you can use a class name and use functions that find objects with a given class name.
As to your specific questions:
divBox.getElementById is not a function
That is because geetElementById() is only a method on the document object and divBox is not a document object so it does not have that method, therefore you get the error you are seeing.
Why does this have no issue:?
var divContents = divBox.getElementsByClassName("divClass")[0];
That is apparently because divClass is a class name, not an id value and all HTML elements contain the getElementsByClassName() method so you can call it on divBox just fine.
It is because the id should be unique to the page/document.
So calling from the document and from the element should be same always. Hence providing the method for other DOM nodes is not useful at all and hence the getElementById is not available/added to the other DOM elements.
where as getElementsByClassName returns all DOM elements for the given className when called on document node. If called with any other DOM element, only child nodes which have the given className DOM nodes will be returned. Here, the behavior is different compared to the getElementById, hence this method is available to all DOM nodes.
All:
I am new to DOM, I got one question about DOM reference, for example(suppose I use D3.js or jQuery):
var domelement = d3.select("div#chart");
d3.select("div#chart").remove();
console.log(domelement);
When I print domelement, it still show an Object in the console even though it has been deleted from the DOM structure.
So I am wondering, why this variable still has access to the DOM object?
How can I decide if a reference is invalid?
Thanks
So I am wondering, why this variable still has access to the DOM object?
You retrieved a reference to an object in memory and your variable will retain it for as long as you have it in scope.
You can mutate an object having a reference to it but you cannot destruct it (not in JS).
How can I decide if a reference is invalid?
There is no such a thing as "invalid" reference. If you want to check if the element is still mounted in the DOM - you can just try to search for it. If it's there - you'll find it, and you will not otherwise.
.remove() returns the value (like a return function in javascript). When you use console.log this value is printed but it no longer exists in the DOM. HTML elements can exist as data nodes in javascript (document.createElement).
In this state, they exists as data, but haven't been added anywhere where they'd be visible. .remove() cuts the element out of the body and returns it in its data form, then console.log prints it.
According to this document https://developer.mozilla.org/en-US/docs/Web/API/Element.classList , the classList property is a DOMTokenList Object in the Element class.
With Chrome, when I print console.log(document.Element.prototype); I can't find any classList property, but when I do that
if (("classList" in document.createElement("_"))) {...}
The condition is true. In an other hand, when I do that
if (!('classList' in window.Element)) {...}
The condition is also TRUE ! There should be something I'm missing but what ?
It's not a property of the Element prototype, it's a property of each DOM node (well, each element node).
Understand that the DOM API is specified in a way that describes what code can expect of DOM objects, but it doesn't say how that functionality works in any particular implementation (which is kind-of silly but there you go).
New to javascript here.
So I've been trying to learn to use Raphael.js and came across this http://jsfiddle.net/terryyounghk/AeU2r/ snippet of code.
Now if you look at line 167, there is this "if" statement I just don't understand.
Raphael.el.style = function (state, style, aniOptions)
{
if (!this.class)
{
this.class = style ? style : 'default';
this.aniOptions = aniOptions ? aniOptions : null;
// start assigning some basic behaviors
this.mouseover(function () { this.style('hover'); });
....
What class? What is it returning? Who is returning it?
What is it even checking? That it's a class?
From the Raphael documentation, Raphael.el is a way of adding one's own methods to the Raphael.element class. In general, the purpose of this class is to make it easier to manipulate SVG elements.
this.class in the code example has nothing to do with the the word class in the programming sense, as used in the preceding sentences. Nor (as far as I can see) is it part of the standard Raphael framework. Nor does it refer to the class attribute that HTML and SVG elements can have, and which is usually accessed in javascript using element.className or element.setAttribute('class', '...').
this refers to the element wrapper object (an instance of Raphael.element), and it seems that the person who wrote this method has simply used the name class to store some additional information in the element wrapper. (As pointed out in comments, this might be a bad idea because class is a reserved keyword in javascript; but anyway, it works.)
Specifically, in the example, this.class is initially undefined because it has not been assigned a value anywhere else in Raphael or in the code. In the if clause, !undefined evaluates to true, and in the following line, no value has been passed to the function for style, so that style ? style : 'default' evaluates to 'default'. So this.class is assigned the value 'default'. Afterwards, if you right-click on a shape and choose Use custom style, the class for that shape becomes 'custom'.
Note that javascript very easily lets you refer to, and assign values to, properties of an object that have not been initialised anywhere. It does not throw an error but simply returns undefined if no value has been assigned.
You can see all this by inserting a line that logs what's going on to the browser console:
console.log('style', state, style, aniOptions, this, 'class:', this.class);
and then using your browser's developer tools to see the output (JSFiddle).
It checks if a property class is defined and if not, it will assign it to style ? style : 'default'.
What you're seeing is simply a conditional statement, look at it as an abbreviated if-else-clause which checks if style evaluates to true or false, if it's true this.Class will have the value of style, if it's not it will get the value of 'default'.
I don't know how raphael.js works, but it looks to me like it is simply a html element class.