This question already has answers here:
Is storing jQuery elements in variables more efficient?
(5 answers)
Closed 2 years ago.
While reading jQuery and Bootstrap documentation I often see this:
var modal = $('#someid');
modal.find('.something').text('something');
modal.find('.somethingelse').text('somethingelse');
It first assigns the element to a variable, then works from there. However I usually write this:
$('#someid').find('.something').text('something');
$('#someid').find('.somethingelse').text('somethingelse');
My question is, are there reasons for using the first method - assigning to a variable - other than the syntax itself? Is it faster or better regarding the DOM?
The first method is preferred for multiple reasons.
It cuts down on the number of times the DOM has to be accessed, which is a relatively slow operation and so it performs better.
It reduces the number of times your code instantiates a new jQuery object from an existing Element object, which is another performance benefit.
It DRYs up the code so that the same statements are not needlessly repeated.
As such you should always follow this practice, known colloquially as 'caching the selector', where possible.
Related
This question already has answers here:
What is the difference between getElementById and simply using an element's ID as a variable?
(2 answers)
Closed last year.
Normally I select elements with an id via document.getElementById('idName'). But apparently you can also select them by name only 'idName'. I was not aware of this until recently. I wanted to know if this is a "bad practice" to select elements by their idName? I have already used the search engine and found nothing about select by id name. So here is my question now.
console.log(idName)
<div id="idName">Hello World</div>
I believe this is a bad practice because you can get yourself confused and cause conflicts with your own js variables.
I can't say it's Good or bad But
you should be very careful while using . This can cause many problems So I will recommend use in Small Projects only .
(it's My personal recommendation )
Suppose Your JavaScript loads First then it will throw an error and none of the code will work
For more Information
just typing in 'idName' isn’t a “short form” of document.getElementById() It’s a reference to a global variable
This question already has answers here:
Difference between DOM parentNode and parentElement
(5 answers)
Closed 3 years ago.
I'm learning JavaScript and I learned about the Node.parentNode property, which simply returns the parent of the current node. However, JavaScript also has another property called Node.parentElement, which seems like the same thing. I found out from this question that the difference is that parentElement will return null if the parent node is not an element.
I understand the difference between the two, but I can't imagine this ever being useful. Is it ever good practice to use parentElement instead of parentNode? If not, why does it exist?
Edit: The question I have linked is similar, but not the same as my question, because it is asking how the two properties behave differently. I know the difference, but I want to know what the actual purpose is of ever using parentElement, or if it's pretty much always bad practice and we should all agree to ignore parentElement. This specific question - the 'why' rather than the 'what' - was not answered here.
It is, most of the time, pointless.
The difference is that the ParentNode is not always an Element, in which case ParentElement will return null.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Closed 5 years ago.
I have found that I don't need use document.getElementById to get the an element, I can use like this:
<div id="observer1"></div>
Then i can access like a variable:
console.log(observer1);
Why should I use the document.getElementById if I can access directly?
I had never heard that this was possible, is there any side-effect, is this supported in all browsers?
Thank you.
Using console.log(observer1) just outputs the whole element. You have no control over it. You can't adjust properties, attributes or assign values. There is almost no practical use for doing it that way.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Closed 9 years ago.
I was playing with javascript, and I don't understand how this little snippet can works:
html > <div id="foo_bar"></div>
javascript > foo_bar.textContent = "Hello, world!";
result > <div id="foo_bar">Hello, world!</div>
foo_bar is not a variable defined before in the code. I only have this one line in my javascript code.
Check the jsFiddle demo : http://jsfiddle.net/6W25e/
So what really happend?
I always thought that was impossible to access dom elements without dom methods like element.getElementById().
Is there any documentation on this behavior? (my searches have been unsuccessful on mdn)
Taken from bobInce
What is supposed to happen is that ‘named elements’ are added as apparent properties of the document object. This is a really bad idea, as it allows element names to clash with real properties of document.
IE made the situation worse by also adding named elements as properties of the window object. This is doubly bad in that now you have to avoid naming your elements after any member of either the document or the window object you (or any other library code in your project) might want to use.
Read more: Do DOM tree elements with ids become global variables?
This means it's very bad practice to do that, and some browsers don't support it, the good ones that don't fall into the trick.
What happens is that some browsers will make them global variables as classes of window, making them immediately accessible when the window loads.
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Closed 8 years ago.
When accessing elements by window.someThing, the "someThing" should be the name of html element. But what I see now, is that I can access an element by id in the same way, without document.getElementById. When has this been changed? It looks like it works in Chrome, IE, Firefox 13, but not in Firefox 12.
For example:
<div id="MyDiv">Content</div>
<script>
MyDiv.innerHTML = "New Content";
</script>
Why does the example above work? Why don't I have to do:
var MyDiv = document.getElementById('MyDiv');
Is it something new, or has it always been possible and I just didn't know it?
http://www.quirksmode.org/dom/w3c_core.html#gettingelements
It's been (mostly) implemented since IE 5.5
I can't really find any info on using the ID as variable name. I'd suggest on sticking to getElementById("MyDiv").doSomething instead of MyDiv.doSomething, to improve compatibility.
Especially when you're writing larger scripts, you may mix up variable names with id's used in the page. getElementById ensures you "get" the DOM element.
This is not standard behavior in JavaScript. When adding a variable as you did with var MyDiv, the variable was added to the window object so that it could be accessed directly as if it were a property, but DOM elements were never added. I don't personally know the reasons for the new behavior, but my guess would be that it's just an expansion of the language engine's capability. If you really want to know what the behavior is supposed to be, you could always read the standard: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
Edit: Also, note that the method that is used to get the element is document.getElementById() which comes from the document object model. The method you're referring to is placing an id into the window object which can create conflicts by id. The standard defined method is to get the element from document and avoid putting things into the window. Using the window object in this manner would be similar to using a global variable (which is a bad practice re: http://www.javascripttoolbox.com/bestpractices/#namespace)
You can find your answer here: Can I Use an ID as a Variable Name?
In short, avoid it.
The reason it works is because the browser actually creates a variable window.document.myDiv
AVOID IT!
It seems like an amazing feature but I would recommend not using it because if you have divs with id same as that of some global JS variables, it would be conflicting and will also mess-up stuff in some other third party JS files that you include.
But You always have jQuery selectors always with you and not to forget the new querySelector feature in modern browsers :)