I'm getting some html from a angular get request and I'm trying to get some specific elements from this response. Which is a list of div's with the class "post-holder". Extracting the html works fine, but to extract each div to insert separately has some troubles.
This is the code I'm trying with:
var firstTag = '<main id="posts">';
var res = data.substring(data.indexOf(firstTag) + firstTag.length, data.indexOf('</main>'));
var html2 = $.parseHTML( res );
var x = html2.getElementsByClassName("post-holder");
The last line gives me the following error in chrome: "TypeError: undefined is not a function".
I'm guessing that getElementsByClass has some troubles with the variable generated by jquery. Is there another approach to do the same or a way to fix what I already have?
See the documentation for parseHTML:
Returns: Array
Description: Parses a string into an array of DOM nodes.
getElementsByClassName is a method on DOM elements, not on arrays. You need to loop over the array, check if each value is an element (as opposed to, for instance, a text node or a comment) and then call getElementsByClassName on the values.
Or you could just construct a jQuery object and use .find() on it instead.
Related
In my code I am trying to get all classes which begin with priceList_ into an array for later use. the code I used to do that is: var prefix = document.querySelector('[class^="priceList_"]').className;
There is one problem I am having with this code, which is that it only gives the first class with that prefix instead of giving an array of classes. Does anyone know the solution to this problem?
You need to be using document.querySelectorAll, document.querySelector purpose is to find the first element on the page matching the condition.
Just to add
document.querySelectorAll('[class^="priceList_"]').className
will error as the returned object is an NodeList of Nodes, not a singular Node (from which you'd be able to get the classe's).
If you wanted to obtain a structured array of each elements classe's then do the below
const classes = [...document.querySelectorAll('[class^="priceList_"]')].map(elem => elem.className);
This will assign an array of classe's (in the order of the DOM elements on the page). You could also do
const classes = [];
for (const elem of document.querySelectorAll('[class^="priceList_"]')) {
classes.push(elem.className);
}
console.log('CLASSES', classes);
querySelector() returns the first result, if you want multiple results use querySelectorAll().
Use querySelectorAll(), it gives NodeList. It is iterable.
Consider using Element.classList instead of className. You can also call classList.entries() to get an iterator.
You can also get an array from className with Element.className.split(" ")
classList on MDN Web Docs
Hi I have an array called "arrayRestado1" from which I want to extract the first element and save that value in the value property of an html input. If it extracts the value but, it does not find the input with that class so the input does not show anything.
The code is in JavaScript:
const col1_f1 = document.getElementsByClassName("col1_f1").value = arrayRestado1[0]
console.log(col1_f1)
the function document.getElementsByClassName() returns an array of elements (an HTML Collection to be correct), not only a single DOM element.
Here's the documentation: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
So with your current code you could try this:
const col1_f1 = document.getElementsByClassName("col1_f1")[0].value = arrayRestado1[0]
console.log(col1_f1)
See the [0] after the function? This means we want the first element of the array. Doesn't matter if there is only one with the given class name col1_f1.
Otherwise you could give your inputs/elemets specific (unique) ids and then use the document.getElementById() function to get them as single elements "directly" in the first place.
More on that here: https://www.w3schools.com/jsref/met_document_getelementbyid.asp
Have a good day!
Nico
i have the following html object : element
I just want to save the value in a variable. I tried using
var result = window.content.document.getElementsByClassName("glyphicon-ok")[0].getAttribute('value');
alert(result);
But return me null object. How can i save the element of this list in my var using javascript. The element is.
glyphicon.glyphicon-ok.positive-color
Important, check this image to check the html collection i'm trying save using javascript:
image
You can use querySelector to pass CSS selector inside and get the first element of the page selected by the CSS selector (if you want to get all the array, you can use querySelectorAll instead) like that:
let result = document.querySelector('glyphicon.glyphicon-ok.positive-color').value;
alert(result);
Edit: if it returns a null value, it's because your element doesn't have the attribute "value" set...
I'm creating a dynamic filter and this is working fine but I've one problem. I'm selecting all filters on a querySelectorAll function combined with a php get function. Unfortunately some of the dynamic content has weird names like:
(art) and more
With a split join function this will result in the following code:
document.querySelector('#(art)_and_more');
This will result into a error cause it's not a valid selection. Does anyone know a way how to solve this?
I would like to keep my names as they are cause it's part of a big system.
If it's an ID, then you'd use getElementById since by definition there can be only one match (IDs must be unique).
var element = document.getElementById("(art)_and_more");
In the general case, you'd use a quoted attribute selector:
var list = document.querySelectorAll("[id='(art)_and_more']");
// or
var list = document.querySelectorAll('[id="(art)_and_more"]');
...but again, IDs must be unique.
I know there are a lot of questions on serializing objects in Javascript, but I'm trying to serialize a string to JSON objects after using the method .getData() from one of the APIs for later use. It returns a string, but I can't get any attributes.
Here is an example of what I did. I need to serialize this to a JSON object, but it just returns me this type of object. Is there a way that I can get the source of this audio element after serializing it with JSON.stringtify() ?
http://imgur.com/K4RhCht
You can use JSON.parse(theSerializedElement), set it as the innerHTML of an HTML element that you can dynamically create and then use DOM methods to get the attribute.
If I am understanding you correctly you want to serialize DOM element's attributes or some of them, or may be data attached to it. You will need to iterate through them on your own.
So you have some HTML as a string, and you want to get the value of an attribute in the audio tag?
EDIT: Assuming your string is in the data variable.
If you're using jQuery:
var source = jQuery(data).attr('src');
Without jQuery, it's still fairly straightforward.
var container = document.createElement('div');
container.innerHTML = data;
var source = container.querySelector('audio').getAttribute('src');