How to test if CSS file is linked in head - javascript

I want to test if there is a link to "css/iframeMobile.css" in an iframe on my page. Something like:
var isThere = frames['frameName'].document.head.link[href='css/iframeMobile.css'];
But I know my syntax is off. Thanks.

You can use:
var isThere = frames['frameName'].document.head.querySelectorAll("link[href='css/iframeMobile.css']").length > 0;
to get a boolean.
querySelectorAll returns an array of all the elements that you queried for, so if its length is larger than 0, such an element exists.

Related

javascript div children do not work

With the yrss library, I am loading a RSS feed into my HTML document. This works.
But then I want to access the divs from my JavaScript.
I can lookup the parent node (var test) and put it in the console. But when I want to get the number of child elements, it returns 0.
I'm using the following code:
var test = document.querySelector('#History_0');
console.log("test:");
console.log(test); //Returns <div class="item_trackHistory rss-feed" id="History_0">
console.log("test.childElementCount:");
console.log(test.childElementCount); //Returns 0
However, I can see the child elements I want to access in the inspector.
Why is it that I can see the children of the #History_0-div in Developer Tools, but the attribute childElementCount returns 0?
How can I access an element's children in JavaScript?
Sorry for making mistakes in the way I edited my question the first time.
here is the entire function call. I also entered the suggested solution from below. Unfortunately, it didn't work out.
code
for (var i = 0; i < obj.results.length ; i++ ){
var div = "History_" + i
getRSS(div ,obj.results[i].feedUrl, i);
}
code
this.getRSS = function(div, link, iteration){
$('#'+div+'').yrss(link,{
limit: 50,
dateformat: 'localedate',
tags:'true',
logging:'false'
});
var parent = document.querySelector('#History_'+iteration+'');
var childCount = 0;
if (parent !== null){
var childElements = parent.getElementsByClassName('entry-wrapper');
console.log(childElements);
console.log(childElements.item(0));
if(childElements !== null){
childCount = childElements.length;
console.log(childCount);
}
}
The console.log of ChildElements Returns a HTML Collection, which appears to have 20 entries. But console logging the ChildElement.item(0), it Returns a null.
The console log of childCount Returns 0.
Does anyone have an idea, how it is possible to access the childElements?
Where in my entire js-file should I call a function to Access the divs, that the yrss function creates?
Not the best question as others have pointed out, however, some simple things we can look at. I am unsure if the page loads the RSS feed after the page has loaded or not. I presume not, and will answer it presuming exactly that.
You can see my working code example here:
https://codepen.io/vincentritter/pen/vJmBrd?editors=1010
I've added notes too. Here is the snippet that should be the most important to get you started.
// Grab 'parent' div - History_0 or by class name 'rss-feed'
var parent = document.querySelector('.rss-feed');
var childCount = 0; // Just want to spit this out on the page so you can see.
// Check if parent isn't null
if(parent !== null){
// Get child elements by class name
var childElements = parent.getElementsByClassName('entry-wrapper');
// Check if child elements isn't null...
if(childElements !== null){
// Print results, just so we can look.
childCount = childElements.length;
console.log(childCount);
}
}
I used your images as reference.
To note, I grab stuff by their class name. Just find that easier. But everyone is different, whatever works for you.
That should get you going at least.

Retrieving links from webpage using javascript

I'm new to javascript and simply trying to pull links from a webpage so I'm doing the following:
for(link in document.links) {
console.log(link.getAttribute("href");
}
But if I do this:
document.links.item(0).getAttribute("href")
It returns the link for the first href
What am I doing wrong?
Here is the webpage I'm testing against: http://en.wikipedia.org/wiki/JavaScript_syntax
Just get the elements by tag name and avoid the for in loop.
var links = document.getElementsByTagName('a'),
i;
for(i = 0; i < links.length; i += 1){
console.log(links[i].getAttribute("href"));
}
Example Here
For your example, you would have used:
for(link in document.links) {
console.log(document.links[link].getAttribute("href"));
}
While that technically works, it returns prototype properties in addition to the link elements. This will throw errors since .getAttribute("href") won't work for all the return elements.
You could use the hasOwnProperty() method and check.. but still, i'd avoid the for in loop.
for (link in document.links) {
if (document.links.hasOwnProperty(link)) {
console.log(document.links[link]);
}
}
document.links.item
is an array of items.
document.links.item(0) gets the first item in that array.
document.links.item(1) gets the second item in that array.
To answer your question, what you are doing wrong is that you are not looping the links.item array as you did in your first example.
In your code, you are accessing item 0 and only getting the href from that. For that reason, you will only get one link.
What you probably want to do is get the href for all of the of the links at once
var hrefs = [], i
for (i=0;i<document.links.length;++i) {
hrefs.push(document.links.item(i).getAttribute('href'))
}
Then your hrefs array will contains all the urls

Finding the index of the element with class in native Javascript

Is there a way to get the index of class name (I.e. the third element with the class "className" would be 3 without using jQ?
I don't know jQ, and I don't have time to learn it right now, and I don't want to include code into my code that I don't understand at least some.
Thanks.
BTW, I've used jQ instead of spelling it out so those results can be filtered out in Google should somebody have the same question. If I spelled it out, and somebody used the NOT operator in Google, this one would also disappear.
You could do something like:
// the element you're looking for
var target = document.getElementById("an-element");
// the collection you're looking in
var nodes = document.querySelectorAll(".yourclass");
var index = [].indexOf.call(nodes, target);
See: Array's indexOf.
If you have already a proper array as nodes instead of a NodeList, you can just do nodes.indexOf(target).
you can use document.getElementsByClassName
var el = document.getElementsByClassName('className');
for (var i = 0; i < el.length; i++) {
// your index is inside here
}
el[i] is the element in the current iteration, i is the index
(I.e. the third element with the class "className" would be 3)
if (i == 3)
return el[i]
JsFiddle: here.
Just use getElementsByClassName, it returns a list of elements with the specified classes.
elements = document.getElementsByClassName("test")
element = elements[2] //get the 3rd element
Hope this helps!
these work as of es6:
Array.from(document.querySelectorAll('.elements')).indexOf(anElement)
or
[...document.querySelectorAll('.elements')].indexOf(anElement)

Element ID from document.getElementsByClassName

Relatively new to JS/Ajax, so I may be missing something obvious here. Let's say at some point in javascript I run ajax to get a number of div elements with a certain class name. I then want to retrieve the html id tag from each of these elements and do something with that information (say populate the element), something like so.
var divstopop = document.getElementsByClassName("popField"),x;
for(x in divstopop){
divstopop[x].innerHTML= x.id; //x.id or something?
}
Is this in any way possible to do?
Using in is not how you should iterate over an array of elements. You should use the .length property and use numeric indexing:
for (var i = 0, n = divstopop.length; i < n; ++i) {
// get id property from element and set as innerHTML
divstopop[i].innerHTML = divstopop[i].id;
}

How to make Javascript more specific?

I am new at JavaScript so I think my problem may be simple.
This works:
var convId = document.getElementById("wrapper");
convId.setAttribute("align","right");
But when I try to make it more specific:
var convId = document.getElementById("wrapper");
var convIdDl = convId.getElementsByTagName("dl");
convIdDl.setAttribute("align","right");
my definition list doesn't align to the right.
I have checked the HTML and CSS and everything is correct, but that shouldn't even matter
JavaScript overwrites them both.
The getElementsByTagName method returns a collection (to be more specific, a NodeList). You need to specify which element of that collection you want to use (just like you would when accessing an element in an array). Here I'm assuming you want the first:
convIdDl[0].setAttribute("align", "right");
As noted in the comments, you should definitely not be using the align attribute. CSS should be used in all cases.
The getElementsByTagName() function returns a collection of DOM elements, so you'll probably want to iterate through that and set the attribute on each element individually.
for(var i = 0; i < convIdDl.length; i++) {
convIdDl[i].setAttribute("align", "right");
}

Categories

Resources