¿Cómo acceder al elemento HTML sin ID?

Question

Por ejemplo, en el siguiente fragmento: ¿cómo accedo al elemento h1 conociendo la ID del elemento padre (div interior del encabezado)?

<div id='header-inner'> 
    <div class='titlewrapper'> 
     <h1 class='title'> 
     Some text I want to change 
     </h1> 
    </div> 
</div> 

¡Gracias!

Answer 1

function findFirstDescendant(parent, tagname) 
{ 
    parent = document.getElementById(parent); 
    var descendants = parent.getElementsByTagName(tagname); 
    if (descendants.length) 
     return descendants[0]; 
    return null; 
} 

var header = findFirstDescendant("header-inner", "h1"); 

Encuentra el elemento con la ID proporcionada, consultas para descendientes con un nombre de etiqueta dado, devuelve el primero. También puede recorrer el descendants para filtrar por otros criterios; si comienzas a dirigirte en esa dirección, te recomiendo que consultes una biblioteca precompilada como jQuery (te ahorrará mucho tiempo escribiendo estas cosas, se vuelve un tanto complicado).

Answer 2

Si está seguro de que sólo hay un elemento H1 en su div:

var parent = document.getElementById('header-inner'); 
var element = parent.GetElementsByTagName('h1')[0]; 

El paso por descendientes, como se mostró Shog9, es una buena manera también.

Answer 3

Aquí tengo el valor de los elementos H1 en un div donde el elemento H1 que tiene CSS class = "myHeader":

var nodes = document.getElementById("mydiv") 
        .getElementsByTagName("H1"); 

for(i=0;i<nodes.length;i++) 
{ 
    if(nodes.item(i).getAttribute("class") == "myheader") 
     alert(nodes.item(i).innerHTML); 
}  

Aquí está el marcado:

<div id="mydiv"> 
    <h1 class="myheader">Hello</h1> 
</div> 

También recomendaría para usar jQuery si necesita un análisis profundo para su DOM.

Answer 4

La forma más sencilla de hacerlo con su margen de beneficio actual es:

document.getElementById('header-inner').getElementsByTagName('h1')[0].innerHTML = 'new text';

Esto supone que su etiqueta H1 es siempre el primero dentro del elemento 'header-inner'.

Answer 5

Para obtener los nodos hijos, use obj.childNodes, que devuelve un objeto de colección.

Para obtener el primer hijo, use list[0], que devuelve un nodo.

Así que el código completo debe ser:

var div = document.getElementById('header-inner'); 
var divTitleWrapper = div.childNodes[0]; 
var h1 = divTitleWrapper.childNodes[0]; 

Si desea iterar sobre todos los niños, comparando si son de “título” de clase, se puede repetir utilizando un bucle y el atributo className.

El código debería ser:

var h1 = null; 
var nodeList = divTitleWrapper.childNodes; 
for (i =0;i < nodeList.length;i++){ 
    var node = nodeList[i]; 
    if(node.className == 'title' && node.tagName == 'H1'){ 
     h1 = node; 
    } 
} 

Answer 6

Si se va a utilizar jQuery según lo mencionado por algunos carteles, puede obtener acceso al elemento muy fácilmente como tal (aunque técnicamente esto se obtendrá una colección de elementos coincidentes si había más de un descendiente H1):

var element = $('#header-inner h1'); 

el uso de una biblioteca como jQuery hace que este tipo de cosas triviales en comparación con las formas normales como se menciona en otros puestos. Luego, una vez que tiene una referencia en un objeto jQuery, tiene aún más funciones disponibles para manipular fácilmente su contenido y apariencia.