How to reference an updated document object and to have all of its elements and associated values if any as well?
Start:
<html>
<head>
<script>
var addEle = function() {
var newEl = document.createElement('span')';
document.body.appendChild(newEl);
// other types of elements addition as well, ie. input
}
</script>
</head>
<body>
<button onclick="addEle">Add Element</button>
</body>
</html>
Process:
A user adds some elements to the page (document).
Question:
Now, how do I reference / retrieve all the elements and associated values if any for this document?
document.all was for old IE browser only, hence, irrelevant for other modern browsers.
Thanks.
|
0 |
|
justaguy
11/13/2016 6:01:23 PM
comp.lang.javascript
38370 articles. 
2 followers.
javascript4
5 Replies
1172 Views
Similar ArticlesOn 13.11.2016 19:01, justaguy wrote:
> Now, how do I reference / retrieve all the elements and associated values if any for this document?
Well, the
document
object contains all elements and associated values. It is not clear in
which form you want to "retrieve" the elements or values.
> document.all was for old IE browser only, hence, irrelevant for other modern browsers.
document.getElementsByTagName('*') gives you all elements as an
HTMLCollection , see
https://dom.spec.whatwg.org/#concept-getelementsbytagname/
|
|
0 |
|
Martin
11/14/2016 11:40:56 AM
On Sun, 13 Nov 2016 10:01:23 -0800 (PST), justaguy wrote:
> Start:
> <html>
> <head>
> <script>
> var addEle = function() {
> var newEl = document.createElement('span')';
> document.body.appendChild(newEl);
> // other types of elements addition as well, ie. input
> }
> </script>
> </head>
> <body>
> <button onclick="addEle">Add Element</button>
>
> </body>
> </html>
>
> Process:
> A user adds some elements to the page (document).
>
> Question:
> Now, how do I reference / retrieve all the elements and associated values if any for this document?
>
> document.all was for old IE browser only, hence, irrelevant for other modern browsers.
>
> Thanks.
Use MutationObserver.
|
|
0 |
|
JJ
11/14/2016 11:51:40 AM
Martin Honnen <martin.honnen@gmx.de> wrote on 14 Nov 2016 in
comp.lang.javascript:
>> document.all was for old IE browser only, hence, irrelevant for other
>> modern browsers.
>
> document.getElementsByTagName('*') gives you all elements as an
> HTMLCollection , see
> https://dom.spec.whatwg.org/#concept-getelementsbytagname/
Indeed, but in fact it is a Nodelist in WebKit browsers.
===========
document.querySelectorAll('*')
seems to return an HTMLCollection there.
=============
An HTMLCollection is 'live', is a Nodelist 'live' less alive?
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
|
|
0 |
|
Evertjan
11/14/2016 1:16:24 PM
Martin Honnen wrote:
> On 13.11.2016 19:01, justaguy wrote:
>> Now, how do I reference / retrieve all the elements and associated values
>> if any for this document?
>
> Well, the
> document
> object contains all elements and associated values. It is not clear in
> which form you want to "retrieve" the elements or values.
>
>> document.all was for old IE browser only, hence, irrelevant for other
>> modern browsers.
>
> document.getElementsByTagName('*') gives you all elements as an
> HTMLCollection , see
> https://dom.spec.whatwg.org/#concept-getelementsbytagname/
This URI does not work here inasfar as that it does not navigate to the
section in question. The URI that does it is currently
<https://dom.spec.whatwg.org/#dom-document-getelementsbytagname>
Your URI might have worked before just as mine does now, but that is
precisely the unreliable behavior that you can expect with a "Living
Standard", a resource that does not remotely meet the criteria for a
standard.
WHATWG HTML is not the normative resource; instead, it is
<https://www.w3.org/TR/2015/REC-dom-20151119/#dom-document-getelementsbytagname>
as referred to by
<https://www.w3.org/TR/2016/REC-html51-20161101/infrastructure.html#common-dom-interfaces> pp.
Although in both cases the return value is specified as an object that
implements the HTMLCollection interface, this is actually compatibly
implemented only as an object implementing the NodeList interface. By
contrast to an HTMLCollection, using the bracket property accessor syntax
with non-numeric string parameter, or calling the referred object’s
namedItem() method with an argument of that form, on the return value, does
not always yield useful results.
In any case, the problem with this approach is that one would have to
iterate over a lot of irrelevant elements as not all elements can have
values. If the question is understood literally, then “value” means the
“value” attribute, and not all elements have it.
In order to avoid this, there are several alternatives, including:
- calling document.getElementsByTagName() with a specific element type name
as argument, maybe several times, and if necessary, aggregate the results
in an array;
- calling document.querySelectorAll() as provided by implementing the
Selectors API with a CSS selector that includes all the relevant element
type names;
- calling document.evaluate() as provided by implementing DOM Level 3 XPath
to retrieve references to the relevant element objects and/or their
“values” directly (according to MDN, supported by all major browsers
except Internet Explorer).
However, the OP appears to have an X–Y problem; they appear to have the
misconception that they need to retrieve the values of all elements to
achieve their goal. That is not so.
For example, one can determine which elements the user has added by
observing mutations to the document tree:
<https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver>
Also, the original code is invalid HTML, and if that is corrected, it will
still not work as the function is being referred to, but not called.
--
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.
|
|
0 |
|
Thomas
11/14/2016 4:26:11 PM
On Monday, November 14, 2016 at 11:26:17 AM UTC-5, Thomas 'PointedEars' Lah=
n wrote:
> Martin Honnen wrote:
>=20
> > On 13.11.2016 19:01, justaguy wrote:
> >> Now, how do I reference / retrieve all the elements and associated val=
ues
> >> if any for this document?
> >=20
> > Well, the
> > document
> > object contains all elements and associated values. It is not clear in
> > which form you want to "retrieve" the elements or values.
> >=20
> >> document.all was for old IE browser only, hence, irrelevant for other
> >> modern browsers.
> >=20
> > document.getElementsByTagName('*') gives you all elements as an
> > HTMLCollection , see
> > https://dom.spec.whatwg.org/#concept-getelementsbytagname/
>=20
> This URI does not work here inasfar as that it does not navigate to the=
=20
> section in question. The URI that does it is currently
>=20
> <https://dom.spec.whatwg.org/#dom-document-getelementsbytagname>
>=20
> Your URI might have worked before just as mine does now, but that is=20
> precisely the unreliable behavior that you can expect with a "Living=20
> Standard", a resource that does not remotely meet the criteria for a=20
> standard.
>=20
> WHATWG HTML is not the normative resource; instead, it is=20
>=20
> <https://www.w3.org/TR/2015/REC-dom-20151119/#dom-document-getelementsbyt=
agname>
>=20
> as referred to by
>=20
> <https://www.w3.org/TR/2016/REC-html51-20161101/infrastructure.html#commo=
n-dom-interfaces> pp.
>=20
> Although in both cases the return value is specified as an object that=20
> implements the HTMLCollection interface, this is actually compatibly=20
> implemented only as an object implementing the NodeList interface. By=20
> contrast to an HTMLCollection, using the bracket property accessor syntax=
=20
> with non-numeric string parameter, or calling the referred object=E2=80=
=99s=20
> namedItem() method with an argument of that form, on the return value, do=
es=20
> not always yield useful results.
>=20
> In any case, the problem with this approach is that one would have to=20
> iterate over a lot of irrelevant elements as not all elements can have=20
> values. If the question is understood literally, then =E2=80=9Cvalue=E2=
=80=9D means the=20
> =E2=80=9Cvalue=E2=80=9D attribute, and not all elements have it.
>=20
> In order to avoid this, there are several alternatives, including:
>=20
> - calling document.getElementsByTagName() with a specific element type na=
me=20
> as argument, maybe several times, and if necessary, aggregate the resul=
ts
> in an array;
>=20
> - calling document.querySelectorAll() as provided by implementing the=20
> Selectors API with a CSS selector that includes all the relevant elemen=
t
> type names;
>=20
> - calling document.evaluate() as provided by implementing DOM Level 3 XPa=
th
> to retrieve references to the relevant element objects and/or their
> =E2=80=9Cvalues=E2=80=9D directly (according to MDN, supported by all m=
ajor browsers=20
> except Internet Explorer).
>=20
> However, the OP appears to have an X=E2=80=93Y problem; they appear to ha=
ve the=20
> misconception that they need to retrieve the values of all elements to=20
> achieve their goal. That is not so.
>=20
> For example, one can determine which elements the user has added by=20
> observing mutations to the document tree:
>=20
> <https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver>
>=20
> Also, the original code is invalid HTML, and if that is corrected, it wil=
l=20
> still not work as the function is being referred to, but not called.
>=20
Martin Honnen's solution (document.getElementsByTagName('*')) works fine wi=
th me, thank you all.
|
|
0 |
|
justaguy
11/14/2016 8:48:48 PM