Estoy tratando de recorrer todos los elementos en una página, por lo que quiero verificar cada elemento que existe en esta página para una clase especial.Javascript: ¿Cómo recorrer todos los elementos DOM en una página?
Entonces, ¿cómo puedo decir que quiero verificar CADA elemento?
Puede pasar un * a getElementsByTagName() de modo que le proporcione todos los elementos en una página:
var all = document.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++) {
// Do something with the element here
}
Tenga en cuenta que usted podría utilizar querySelectorAll(), si está disponible (IE9 +, CSS en IE8), para encontrar justo elementos con una clase particular.
if (document.querySelectorAll)
var clsElements = document.querySelectorAll(".mySpeshalClass");
else
// loop through all elements instead
Esto ciertamente aceleraría las cosas para los navegadores modernos.
Este método parece muy bueno, pero ¿cómo puedo seleccionar un elemento en el método superior? Solo tengo el índice 'yo'? –
@Florian: al igual que accedería a un elemento de matriz: 'all [i]' le daría el elemento actual. –
oh seguro ?! Thx mucho;) –
Usted puede tratar con document.getElementsByClassName('special_class');
El método correcto es 'getElementsByClassName()' y no es compatible con Internet Explorer hasta la versión 9. –
corrigió mi respuesta! –
Aquí es otro ejemplo de cómo se puede recorrer a través de un documento o un elemento:
function getNodeList(elem){
var l=new Array(elem),c=1,ret=new Array();
//This first loop will loop until the count var is stable//
for(var r=0;r<c;r++){
//This loop will loop thru the child element list//
for(var z=0;z<l[r].childNodes.length;z++){
//Push the element to the return array.
ret.push(l[r].childNodes[z]);
if(l[r].childNodes[z].childNodes[0]){
l.push(l[r].childNodes[z]);c++;
}//IF
}//FOR
}//FOR
return ret;
}
desde este enlace
javascript reference
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function findhead1()
{
var tag, tags;
// or you can use var allElem=document.all; and loop on it
tags = "The tags in the page are:"
for(i = 0; i < document.all.length; i++)
{
tag = document.all(i).tagName;
tags = tags + "\r" + tag;
}
document.write(tags);
}
// -->
</script>
</head>
<body onload="findhead1()">
<h1>Heading One</h1>
</body>
</html>
ACTUALIZACIÓN: editar
desde mi última respuesta me pareció mejor solución más simple
function search(tableEvent)
{
clearResults()
document.getElementById('loading').style.display = 'block';
var params = 'formAction=SearchStocks';
var elemArray = document.mainForm.elements;
for (var i = 0; i < elemArray.length;i++)
{
var element = elemArray[i];
var elementName= element.name;
if(elementName=='formAction')
continue;
params += '&' + elementName+'='+ encodeURIComponent(element.value);
}
params += '&tableEvent=' + tableEvent;
createXmlHttpObject();
sendRequestPost(http_request,'Controller',false,params);
prepareUpdateTableContents();//function js to handle the response out of scope for this question
}
de acuerdo con [este análisis SO] (http://stackoverflow.com/questions/2408424/document-all-vs-document-getelementbyid), 'document.all' se desaconseja a favor de' document.getElementBy * '. – thejoshwolfe
@thejoshwolfe gracias, ¿qué opinas de mi segunda solución que actualicé – shareef
Estaba buscando misma. Bueno no exactamente. Solo quería enumerar todos los Nodos DOM.
var currentNode,
ni = document.createNodeIterator(document.documentElement, NodeFilter.SHOW_ELEMENT);
while(currentNode = ni.nextNode()) {
console.log(currentNode.nodeName);
}
Para obtener elementos con una clase específica, podemos utilizar la función de filtro.
var currentNode,
ni = document.createNodeIterator(
document.documentElement,
NodeFilter.SHOW_ELEMENT,
function(node){
return node.classList.contains('toggleable') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
}
);
while(currentNode = ni.nextNode()) {
console.log(currentNode.nodeName);
}
solución encontrada en MDN
nunca vi document.ceeateNodeIterator. Parece interesante qué nuevas características aporta JS;) –
¡muy bonito y ordenado! – Arjang
Una buena característica de esto es que el nodoitrador también recorre los nodos en el orden en que aparecen en el html. Me pregunto si algo del 'document.body.getElementsByTagName ('*') 'podría devolver los nodos en orden codificado. – Civilian
Andy E. dio una buena respuesta.
Debo agregar, si sientes seleccionar todos los elementos secundarios en algún selector especial (esto me ha pasado recientemente), puedes aplicar el método "getElementsByTagName()" en cualquier objeto DOM que desees.
Por ejemplo, tenía que acaba de analizar parte "visual" de la página web, por lo que acabo de hacer esta
var visualDomElts = document.body.getElementsByTagName('*');
Esto nunca tendrá en cuenta la parte de la cabeza.
Para aquellos que están usando jQuery
$("*").each(function(i,e){console.log(i+' '+e)});
Como siempre la mejor solución es utilizar la recursividad:
loop(document);
function loop(node){
// do some thing with the node here
var nodes = node.childNodes;
for (var i = 0; i <nodes.length; i++){
if(!nodes[i]){
continue;
}
if(nodes[i].childNodes.length > 0){
loop(nodes[i]);
}
}
A diferencia de otras sugerencias, esta solución no requiere que usted para crear una matriz para todos los asentimientos, por lo que es más ligero en la memoria. Y lo más importante, encuentra más resultados. No estoy seguro de lo que esos resultados son, pero cuando se prueba en el cromo funda alrededor del 50% más nodos en comparación con document.getElementsByTagName("*");
El mejor momento para usar recursividad es el mejor momento para usar recursividad. – Adamlive
"funde aproximadamente 50% más nodos en comparación con' document.getElementsByTagName ("*"); '" - yup, encontrará [nodos de texto y nodos de comentarios, así como nodos de elementos] (https: // developer. mozilla.org/en-US/docs/Web/API/Node/nodeType). Como OP solo estaba preguntando por elementos, eso es innecesario. –
Uso *
var allElem = document.getElementsByTagName("*");
for (var i = 0; i < allElem.lenght; i++) {
// Do something with all element here
}
¿Seguro que desea reproducir en bucle a través de cada elemento de sí mismo? ¿por qué no usar jquery y selectores para tomar elementos que pertenecen a esa clase en particular? –
¿No hay un método document.getElementsByTagName? – SuperJedi224