This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Is there a spec that the id of elements should be made global variable?
(5 answers)
Closed 9 months ago.
While coding some js for a webpage, I had initially written a function to parse every div with an id and assign it to a variable for easy targeting:
var div={};
for (let e of Array.from(document.getElementsByTagName('div'))
.filter(div => div.id)) {
div[e.id] = e;
};
But while debugging I suddenly realized that js recognized all these divs "out of the box" and that I could call them directly. For example, if my HTML contains
<div id='status'>
<div id='modtime'></div>
<div id='client'></div>
</div>
Then I can simply do modtime.innerText='abc' – without having to assign modtime via something like div.modtime = document.getElementById('modtime')
Would like to know more about this 'functionality'; cannot find any documentation on it. Not sure what it's called.
Related
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Is there a spec that the id of elements should be made global variable?
(5 answers)
Closed 9 months ago.
I wanted to know if its new feature or just a working bug
Before I used to do like
HTML :
<div id="identity">I am an demo text</div>
JS :
let iddiv = document.getElementById("identity");
console.log(iddiv)
but Now I can do
console.log(identity)
Withour storing the element in a variable
I just wanted to ask if it is fine !!
console.log(identity)
<div id="identity">I am an demo text</div>
This question already has answers here:
Is there a spec that the id of elements should be made global variable?
(5 answers)
Why don't we just use element IDs as identifiers in JavaScript?
(5 answers)
Closed 1 year ago.
I wrote this code which loops through all elements with an ID, and declares a variable with the same name as the ID refering to that element. The code works as expected and by using this at the top of my program I save a lot of time and lines in my program. However it almost seems to good to be true because I have never seen it done before.
I know using eval() is bad practise and wonder if using window[], like I do here, has the same effect. My question is if using this code is good practise or if it should be avoided?
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<script>
var elements = document.querySelectorAll("[id]");
for (var i = 0; i < elements.length; i++){
window['elements[i].getAttribute("id")'] =
document.getElementById("${elements[i].getAttribute('id')}");
};
content1.innerHTML = `<p>Hello World</p>`;
</script>
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 2 years ago.
I dynamically created various images and other elements within various div elements and assigned a class to them, like:
divOM = document.getElementById('omain');
kd = document.createElement('img');
kd.src = 'pics/k0.jpg';
kd.class = 'mww';
divOM.appendChild(kd);
This works well – the debugger shows the desired result (# children with class ‘mww’). I have the (maybe naïve) hope that
wlist = document.getElementsByClassName('mww')
gives me all elements which have class=’mww’, but unfortunately it doesn’t. The debugger shows length:0 for wlist!?? Is it possible that document.getElementsByClassName doesn’t work for dynamically created elements?
Should be .className, not .class.
class is a reserved word in JavaScript.
Or use the Class List API:
kd.classList.add('mww');
This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 6 years ago.
I'm animating an svg file, and in order not to bloat my code I have written the follow function:
function animateSingleAtt(svgName, element, attToAnimate, attValue, animationTiming) {
svgName.select( element ).animate({
attToAnimate : attValue
}, animationTiming);
}
All parameters are loaded just fine, except for attToAnimate. I have no clue as to why this is – it is just passed to the svg element as an attribute named 'attToAnimate'.
I have tried logging it outside of the animate-function, and when I do that, it's passed just fine.
Any help will be greatly appreciated!
It looks like you are using attToAnimate as a key on an object. To do this properly, change the code to something like this:
function animateSingleAtt(svgName, element, attToAnimate, attValue, animationTiming) {
var anObject = {};
anObject[attToAnimate] = attValue;
svgName.select( element ).animate(anObject, animationTiming);
}
This should properly build the object you want to pass to .animate
This question already has answers here:
How can I detect if a selector returns null?
(8 answers)
Closed 8 years ago.
Setup:
<div>
<div class="application-section active"></div>
<div class="application-section"></div>
</div>
I am setting a the following variables
var $activeSection = $("div.application-section.active");
var $targetSection = $activeSection.prev("div.application-section");
jQuery Documentation states that if no previous sibiling is found, it will return a blank jquery object. I want to do additional stuff if the variable is a blank jQuery object, but how do you check to see if it is a blank jQuery object? I have tried the following, but I always get false as a result.
alert($.isEmptyObject($targetSection));
$targetSection.length will be zero if no matching selector is found.