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
java
multithreading
clips
cloud
maven-3
leon
callback
serverspec
paradox
gitpitch
windows-10-universal
node-pdfkit
correlation
event-handling
after-effects
excel-vba-mac
nhibernate-envers
physics-engine
tokenize
web-sql
sox
wijmo
dxf
smb
one-to-many
status
jspm
jaxb2
primitive
librato
unboundid
lightswitch-2013
directx-10
http-get
vsts-build-task
avcapturesession
openoffice.org
android-kernel
google-api-nodejs-client
force-layout
devextreme
dosbox
libvpx
starteam
reportbuilder
graphenedb
mesos-chronos
g-code
total-commander
gpx
upstart
promela
typescript1.8
directory-structure
font-size
jquery-filter
visual-c++-2008
url-pattern
static-ip-address
libpng
merge-conflict-resolution
fuzzy-search
gridview-sorting
nsviewcontroller
lua-5.1
actionbardrawertoggle
hill-climbing
captivenetwork
ios4
associative-array
ford-fulkerson
javax.sound.midi
rtbkit
iis-arr
computer-algebra-systems
wyam
dukescript
graph-drawing
cisco-ios
rdtsc
onactivityresult
jquery-layout
doskey
spring-io
dotnetnuke-5
excel-2003
mylyn
enterprisedb
angularjs-controller
rdoc
newtonscript
semantic-diff
vdsp
yui-datatable
telerik-scheduler
fixed-width

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App