Если абзац HTML слишком вложен, все равно довольно трудно получить в JS. Я написал несколько наборов решений, вы можете ссылаться на них. Если у вас есть хороший метод, поделитесь им, давайте посмотрим.
HTML:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Элементы вложены несколькими слоями, задача приобретения JS </title> </head> <body> <div id = " href = ""> <pan> 1 </span> </a> </div> <div> <a href = ""> <pan> 2 </span> </a> </div> <div> <a href = ""> <pan> 3 </span> </a> </div> </body> </html>
Я хочу получить промежуток ниже.
Идея 1: сначала получите его родительский элемент, затем получите элементы ниже этого элемента через цикл для цикла, а затем зацикливайте элементы ниже через элементы, полученные на этот раз, пока целевой элемент не будет получен.
// Получить родительский элемент var dbox = document.getElementByid ('box'); // Получить все divvar ddiv = dbox.getElementsbytagname ('div'); // Поместите все теги в darr var aarr = []; for (var i = 0; i <ddiv.length; i ++) {aarr.push (ddiv [i] .getelementsbytagname ('a') [0]);} // Получить все spanvar spanarr = []; for (var i = 0; i <aarr.length; i ++) {spanarr.push (aarr [i] .getelementsbytagname ('span') [0]);} console.log (spanarr);Недостатки: потребление производительности. Если вы гнеетесь на это немного больше, получить целевой элемент будет довольно хлопотно.
Идея 2: Используйте родительский элемент, чтобы напрямую получить целевой элемент, но, безусловно, возникает проблема, потому что он получит все пролеты под родительским элементом. Моя идея состоит в том, чтобы судить, является ли родительский элемент тегом.
var box = document.getElementbyId ('box'); // Получить все spanvar span = box.getelementsbytagname ('span'); // определить массив, чтобы сохранить фильтрованный spanvar arr = []; для (var i = 0; i <span.length; i ++) {// определить, является ли Span или нет, это не так, если это добавить, если это добавить, если это добавить, если добавить это. if (span [i] .parentnode.tagname === 'a') {arr.push (span [i]);}} console.log (arr);Хотя Idea 1 и Idea 2 в порядке, у них на самом деле есть недостатки. Если макет сложнее, то, что вы можете получить, может быть не таким точным.
Если вы хотите получить его точно, вы можете добавить класс в каждый элемент. Но для класса браузер имеет проблемы с совместимостью.
Внезапно я подумал о другом методе.
Идея: Настройка атрибутов, но, поскольку существуют проблемы совместимости с получением пользовательских атрибутов JS в JS, я использую регулярность, чтобы судить, есть ли этот элемент мои индивидуальные атрибуты.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <Title> Элементы вложены несколькими слоями, задача приобретения JS </title> </head> <body> <div id = " ISSPAN = 'SPAN'> 1 </span> </a> </div> <div> <a href = ""> <span Isspan = 'span'> 2 </span> </a> </div> <a href = ""> <pan Isspan = 'span'> 3 </span> </a> </div> </body> </html>
младший
// Получить родительский элемент var dbox = document.getElementById ('box'); // Получить все детские элементы var dspan = dbox.getElementsbytagname ('span'); // текущий элемент var str = ''; // Все фильтрованные элементы Span var spans = []; для (var i =; i <dspan.length; i ++) {/ stack stract strement = star = star = star = star = strue = struction =; i <dspan.length; dspan [i] .outerhtml; console.log (str); // определить, имеет ли текущий элемент пользовательский атрибут if (/iSspan = "span"/. test (str)) {// Если так, добавьте его в массив vans.push (dspan [i]);}}}}}} console.log (spans);Рекомендуется использовать классовые или пользовательские атрибуты для получения, и первые и вторые методы являются неточными.
Вышеуказанное представляет собой многослойное гнездование элементов JS, представленных вам редактором. Я надеюсь, что это будет полезно для вас, и я надеюсь, что вы будете поддерживать веб -сайт wulin.com больше!