getelementsbytagname


A pretty strange issue caused by HTML DOM's “querySelectorAll” method or “getElementsByTagName” method


See codes:
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<p>
<p>
<script>
var a = [1, 2],
b = [3, 4],
c = a.concat(b),
d, e, f, g;
console.log(c); // No problem
d = [document.querySelectorAll('p')[0], document.querySelectorAll('p')[1]];
e = a.concat(d);
console.log(e); // No problem
f = document.querySelectorAll('p'); // f = document.getElementsByTagName('p');
g = a.concat(f);
console.log(g); // Pretty strange...
</script>
jsFiddle: http://jsfiddle.net/V7gmE
My question is:
c.length is 4. No poblem.
e.length is 4. No poblem.
If I use f = document.querySelectorAll('p'); or f = document.getElementsByTagName('p');, why g.length is '3'?
Thank you.
There is no problem, your third array is just [1, 2, NodeList].querySelectorAll returns a NodeList which in this case contains two elements. In the second example, you specifically take the first and second elements from the NodeList and put them into an array. While NodeLists may seem like arrays, they are not, and when you use the Array.concat method on it, the individual elements are not picked out.
From MDN:
NodeList are used very much like arrays and it would be tempting to use Array.prototype methods on them. This is, however, impossible.
Here is another example that might help get the point across: http://jsfiddle.net/radu/j5gvy/1/
var a = [1, 2],
obj = { 0 : '', 1 : ''},
b = [obj[0], obj[1]];
c = a.concat(obj);
console.log(c.length); // 3
d = a.concat(b);
console.log(d.length); // 4
Just because I define an object that can be accessed like an array does not make it an array.

Related Links

How can an nodelist created by getElementsByClassname or getElementsByTagName display its values as string
Using javascript, can we get elements by tag name and ids
getElementsByTagName of all siblings
A pretty strange issue caused by HTML DOM's “querySelectorAll” method or “getElementsByTagName” method

Categories

HOME
netsuite
nullpointerexception
angular-material
bpmn
read-eval-print-loop
routes
binary-tree
ip
amazon-cloudformation
kibana-4
vifm
spring-kafka
numeral.js
etl
timeout
fortumo
windows-server-2012
zebra-printers
msp430
try-catch
evopdf
normalizr
interop
arabic
kvc
devops
rundeck
spark-jobserver
facebook-apps
tasklet
skia
bluestacks
functor
lxd
jmonkeyengine
sql-server-agent
executenonquery
taffy
jquery-validate
paxos
clean-architecture
rdfs
nodebb
typed-lambda-calculus
google-perftools
nsarray
ifs
pdfclown
visual-c++-2008
intrusion-detection
django-debug-toolbar
packagist
bgp
ipconfig
browser-link
hsv
iad
execute
wyam
splash
mono-embedding
geonetwork
pick
java.util.concurrent
rdl
contenttype
jquery-layout
monomac
odata4j
file-locking
qt-faststart
mylyn
orchardcms-1.7
smtp-auth
http-unit
cassini-dev
factory-method
specification-pattern
mhtml
quickdialog
bluepill
dice
dbproviderfactories
qtkit
reddot
php-parser
pydot
spyware
mod-auth
django-tagging
locationlistener
lang
radcombobox
nsviewanimation
boost-smart-ptr
pascal-fc
thread-local-storage
ugc
uiq3

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App