javascript - obtener - ¿Puedo seleccionar varias etiquetas usando getElementsByTagName?

obtener id de un elemento javascript

Question

Estoy usando un fragmento de JavaScript para que los visitantes de mi sitio aumenten el tamaño de la fuente en todos los párrafos utilizando el siguiente javascript:

function increaseFontSize() {
var paragraphs = document.getElementsByTagName(''p'');
for(i=0;i<paragraphs.length;i++) {
if(paragraphs[i].style.fontSize) {
var s = parseInt(paragraphs[i].style.fontSize.replace("px",""));
} else {
var s = 14;
}
if(s != max) {
s += 1;
}
paragraphs[i].style.fontSize = s+"px"
}
}

¿Cómo puedo también incluir "li" a este código para que "p" y "li" sean los elementos seleccionados que se vean afectados?

También me gustaría evitar agregar una clase o una identificación a mi "li" o "ul". ¿Hay alguna manera de seleccionar dos etiquetas a la vez?

Answer 1

Q

¿Puedo seleccionar varias etiquetas usando getElementsByTagName?

UN

Sí, pero deberá usar getElementsByTagName varias veces.

Aunque su ejemplo solo especifica Document.getElementsByTagName() , he supuesto que también desea que esto funcione con element.getElementsByTagName ().

getElementsByTagName devuelve un objeto HTMLCollection por lo que el resultado ideal sería un método que devuelva un objeto HTMLCollection de elementos para todos los nombres de etiqueta proporcionados.

Cosas que debe tener en cuenta sobre HTMLCollection

• No pueden ser modificados.
• Son una lista en live de los nodos DOM
• Solo hay tres formas de crear uno directamente getElementsByTagName , getElementsByClassName y getElementsByTagNameNS
• puede crear un objeto que puede tener propiedades del tipo HTMLCollection, por ejemplo, nodeList.children

Como HTMLCollection no se puede modificar, lo mejor que podemos hacer es devolver un objeto que se asemeje a una HTMLCollection tanto como sea posible, vea Crear una HTMLCollection o crear una nodeList y devolver la propiedad children .

En primer lugar, debemos recopilar todos los elementos coincidentes para nuestra HTMLCollection

La forma más simple sería usar la función querySelectorAll que devuelve un nodeList .

var nodeList = document.querySelectorAll(selector);

Una alternativa sería usar el método getElementsByTagName para cada etiqueta, convertir el objeto HTMLCollection devuelto en una matriz para que puedan fusionarse.

Al igual que .

var HTMLCollectionArray = [];
var names = selector.split(",");
for (var i = 0, n = names.length; i < n; i++){
HTMLCollectionArray = HTMLCollectionArray.concat(Array.prototype.slice.call(document.getElementsByTagName(names[i])));
}

El nodeList también se puede convertir a una matriz utilizando el mismo método.

HTMLCollectionArray = Array.prototype.slice.call(nodeList);

Ahora podemos devolver todos los elementos como una matriz o intentar devolver una HTMLCollection.

Si tuviéramos que devolver una HTMLCollection, tendríamos que mover o copiar los elementos a un solo parentNode para que podamos acceder a parentNode.children .

Encontré usar document.createDocumentFragment funciona mejor.

var createDocumentFragment = document.createDocumentFragment();
for (var i = 0; i < HTMLCollectionArray.length; i++) {
createDocumentFragment.appendChild(HTMLCollectionArray[i]);
};
HTMLCollection = createDocumentFragment.children;
return HTMLCollection;

Aunque esto devolvería el tipo correcto (HTMLCollection), no devuelve el estado real de los elementos cuando se llamó al método. El DOM ha sido modificado para lograr esto. No es Buena idea.

Así que esto nos deja hacer una colección de HTM falsos

window.MyNodeList = function(elements) {
for ( var i = 0; i < elements.length; i += 1 ) {
this[i] = elements[i];
}
Object.defineProperty( this, ''length'', {
get: function () {
return elements.length;
}
});
Object.freeze( this );
};
window.MyNodeList.prototype.item function ( i ) {
return this[i] != null ? this[i] : null;
}
window.MyHTMLCollection = function(elements) {
MyNodeList.call(this, elements);
}
MyHTMLCollection.prototype = Object.create(MyNodeList.prototype);
MyHTMLCollection.prototype.constructor = MyHTMLCollection;
window.MyHTMLCollection.prototype.namedItem = function ( name ) {
for ( var i = 0; i < this.length; i += 1 ) {
if ( this[i].id === name || this[i].name === name ) {
return this[i];
}
}
return null;
}

Uso

var HTMLCollection = new MyHTMLCollection(elementsArray);

Ahora para armarlo todo.

También implementé un método ''getElementsByClassNames'' y también ''getElementsByTagNames'', que usan el mismo método central getElementsBySelector .

Element.prototype.getElementsByTagNames = Document.prototype.getElementsByTagNames = function(selector){
return this.getElementsBySelector(selector, ''getElementsByTagName'');
}
Element.prototype.getElementsByClassNames = Document.prototype.getElementsByClassNames = function(selector){
return this.getElementsBySelector(selector, ''getElementsByClassName'');
}

SÓLO queremos que las interfaces de Document y Element hereden nuestros nuevos métodos porque llaman a métodos prototipo que no existen en todas las interfaces de Node . por ejemplo, getElementsByClassName , querySelectorAll , etc.

Si quiere minificar su código, podría usar Node.prototype en lugar de indicar Element.prototype. y Document.prototype.

Node.prototype.getElementsByTagNames = function(selector){
return this.getElementsBySelector(selector, ''getElementsByTagName'');
}
Node.prototype.getElementsByClassNames = function(selector){
return this.getElementsBySelector(selector, ''getElementsByClassName'');
}

Solo asegúrate de no intentar usarlo en ningún nodo que no sea Document o Element .

Element.prototype.getElementsBySelector = Document.prototype.getElementsBySelector = function (selector, HTMLCollectionType) {
var HTMLCollectionArray = [];
if(typeof this.querySelectorAll !== ''undefined''){
var nodeList = this.querySelectorAll(selector);
HTMLCollectionArray = Array.prototype.slice.call(nodeList);
} else {
if(typeof HTMLCollectionType !==''undefined'' && typeof this[HTMLCollectionType] !== ''undefined''){
var names = selector.split(",");
for (var i = 0, n = names.length; i < n; i++){
HTMLCollectionArray = HTMLCollectionArray.concat(Array.prototype.slice.call(this[HTMLCollectionType](names[i])));
}
}
}
return new MyHTMLCollection(HTMLCollectionArray);
/*
var createDocumentFragment = document.createDocumentFragment();
for (var i = 0; i < HTMLCollectionArray.length; i++) {
createDocumentFragment.appendChild(HTMLCollectionArray[i]);
};
HTMLCollection = createDocumentFragment.children;
return HTMLCollection;
*/
}

Uso

var element = document.getElementById(''id'');
element.getElementsbyClassNames(''class1,class2,class2'');
element.getElementsbyTagNames(''li,div,p'');
document.getElementsbyClassNames(''class1,class2,class2'');
document.getElementsbyTagNames(''li,div,p'');

Answer 2

No, no puede seleccionar varias etiquetas con una sola llamada a getElementsByTagName . Puede hacer dos consultas utilizando getElementsByTagName o usar querySelectorAll .

JSFiddle

var elems = document.querySelectorAll(''p,li'')

Answer 3

Un año tarde, pero si tiene la intención de utilizar la funcionalidad deseada varias veces en su proyecto, y no tiene acceso a querySelector() , podría valer la pena extender el objeto Node con una función simple :

JavaScript

/**
* @param {Array} tags - The array of tagNames to search for.
* @return {Array} - The elements with matching tagNames.
*/
Node.prototype.getElementsByTagNames = function (tags) {
var elements = [];
for (var i = 0, n = tags.length; i < n; i++) {
// Concatenate the array created from a HTMLCollection object
elements = elements.concat(Array.prototype.slice.call(this.getElementsByTagName(tags[i])));
}
return elements;
};

Demostración de trabajo en JSFiddle.

Todo lo que hace es iterar sobre una matriz de nombres de etiquetas, luego obtener los elementos correspondientes usando getElementsByTagName() para cada iteración.

Esto puede, por supuesto, usarse en cualquier elemento de la misma manera que utiliza funciones similares; por ejemplo, getElementById() en cualquier objeto Node , no está limitado a un document .