var sec = document.getElementsByName("secilenil")[0];
I did not understand the end of this statement which is [0].What does this mean? "secilenil" is the name of select element.
getElementsByName returns a NodeList of all elements with a name attribute equal to secilenil. Using [0] selects the first found node.
The [0] notation is similar to that of an array - it means you want to extract the element at the specific index.
MDN reference.
Related
In the code below I`m checking if these 2 elements exist.
const var1 = form.elements[elemName1] ||
form.elements[elemName2]
if(var1){
doSmth
}
But what I need is to check if element's name contains a certain string.
Like:
const var1 = form.elements[NameContains(givenString)] ||
form.elements[NameContains(givenString)]
I tried to find the needed syntax in google bud did not succeeded.
You can use an attribute contains selector (*=) with querySelector (to find the first) or querySelectorAll (to get a list of matches).
For instance:
const var1 = form.querySelector("[name*=foo]");
finds the first element in form whose name attribute contains the substring foo. Similarly there's ^= for "starts with" and $= for "ends with."
If you're checking for two different substrings, either use a selector group:
const var1 = form.querySelector("[name*=foo], [name*=bar]");
or two calls:
const var1 = form.querySelector("[name*=foo]") || form.querySelector("[name*=bar]");
The difference between those is that the selector group will find the first matching element in document order, whether it's a foo or bar element. The second will look for a foo element first, and only look for a bar element if no foo is found.
This question already has answers here:
indexOf() function not working on arrays
(2 answers)
Closed 4 years ago.
I have an array that contains HTML elements(I filled it with querySelectorAll()), and I'm trying to find the index of an element in that array but the console is giving the error:
Uncaught TypeError: rows.indexOf is not a function
I used this to fill the array with the needed HTML elements:
rows = document.querySelectorAll("#selectableTableBody > tr");
and this to find the index:
document.getElementById("tableItem_10087528").onclick = function (e) {
console.log(rows.indexOf(this));
}
and here is an image of my test in the console(which doesn't make sense):
it's worth noting that these elements are generated with javascript and then put in the array using querySelectorAll()
here is a jsfiddle if you want to check the whole thing
I have an array that contains HTML elements(I filled it with querySelectorAll())
No, you don't, which is the problem. :-) querySelectorAll returns a NodeList (MDN | spec), not an array.
You can convert it into an array in several ways:
rows = Array.from(document.querySelectorAll(/*...*/));
or (in up-to-date environments where NodeList is iterable):
rows = [...document.querySelectorAll(/*...*/)];
or in old environments:
rows = Array.prototype.slice.call(document.querySelectorAll(/*...*/));
Re iterability: This answer discusses polyfilling NodeList iterability on platforms where arrays are iterable (either natively or thanks to a polyfill) but NodeList isn't (yet).
Uncaught TypeError: rows.indexOf is not a function
You get this error because you are calling .indexOf() over a nodeList and not an array, because document.querySelectorAll() will return a nodeList and not an array.
You can get an array from this nodeList/collection using Array.from() method:
rows = Array.from(document.querySelectorAll("#selectableTableBody > tr"));
Demo:
This is your updated fiddle.
That is bacause the return of querySelectorAll() is an array like object (object with length property) not an array. you need to convert it to array using Array.from(rows).
querySelectorAll returns NodeList, not an array.
You need to use
rows = Array.from(document.querySelectorAll("#selectableTableBody > tr"));
I study jquery, but i have a little confusion about this code :
var list = mylist.filter(function(f) {
return $(f)
.find('.anthing')
.length > 0;
});
what does $(f) mean?
Your mylist is an array or array like object. The f in the parameters is the single item in your myList.It calls the function for every item in the myList.Then it wraps your f into jQuery object and then the .find() will be visible on your object
It is the index passed through the function, which indicates the
0-based position of the element within the unfiltered set of matched
elements.
In your case $(f) is useless since it represent $(0) || $(1) which does not represent a selection.
How to get number of element by id using javascript ?
http://jsfiddle.net/3AaAx/51/
normally, after load page , it's will alert 2 (length of element id ele1).
But why alert undefined
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="ele1" class="test" value="test">
<input type="text" id="ele1" class="test" value="test">
<script>
$(function() {
//var xxx = document.getElementsByClassName('test');
var xxx = document.getElementById('ele1');
var xxx;
alert(xxx.length);
});
</script>
getElementById() returns just an element. A single element has no property length. (There may be exceptions, but in general ... Even if there is a length property it most likely does not refer to the amount of elements returned.)
You probably refer to the getElementsBy...() (note the s!) or querySelectorAll() functions, which return a NodeList, which has a length property.
This is how you get the number of elements returned by getElementById:
var xxx = (document.getElementById('ele1') === null) ? 0 : 1;
getElementById returns null if no element matched the id. If the function does not return null, then one and only one element matches the criteria. See more here.
The line you commented off is right:
//var xxx = document.getElementsByClassName('test');
getElementsByClassName returns a collection of DOM elements, which does have a length property. Note in this method Elements is plural form. length indicates the amount of elements in the collection.
However you misunderstand getElementById. This method will only return a DOM element (or null if there isn't such element). Note in this method Element is singular form. A DOM element doesn't have a length property usually.
Another problem in your code, ID should be unique within a page. If you have two or more elements with the same ID, that's illegal markup. In such case you will get unexpected result.
Here's a small JavaScript snippet:
var re_words = /\w+/g;
var words;
while (words = re_words.exec(' here are a few (sic!) words ')) {
alert(words);
}
The loop alerts the words found in the input string, which is what I expected, because all the JavaScript tutorials tell me so.
Now, typeof(words) results in object.
Therefore, I would have expected alert(words) to give me object.
If I inspect the elements in words, I found them to be 0, "index" and "input". The element words[0] is the same as what is alerted with words.
So, the question is: is the element 0 sort of a default index for an Object in JavaScript which is returned if it is defined.
Or asked differently: why does alert(words) give the same effect as alert(words[0])? I would have expected alert(words) to give a "Object".
The result of executing a regexp is an Array, which is a special kind of Object. The array also has two properties, index and input. words[0] contains the matched characters. Calling .toString() on an array (as is implicitly done by alert()) joins the elements of the array with a comma (after calling .toString() on each of those). In this case, since there was only one element, the comma was superfluous, so the result of calling .toString() on the array is the same as the first element in the array.
(Not sure what browser you're using; in Firefox, alert(words) gives 'here', then 'are', and so on until finally it gives the string 'words'.)