Лучший способ получить дочерние узлы
Мне интересно, JavaScript предлагает множество методов для получения первого дочернего элемента из любого элемента, но какой из них является лучшим ? Под лучшим я подразумеваю :наиболее кросс--совместимость с браузерами, самый быстрый, наиболее полный и предсказуемый, когда дело доходит до поведения. Список методов/свойств, которые я использую в качестве псевдонимов:
var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]
Это работает в обоих случаях:
var child = elem.childNodes[0]; // or childNodes[1], see below
Это в случае форм или , насколько я могу понять, Я предполагаю, что с точки зрения скорости разница, если она есть, будет почти нулевой, поскольку Что бросает меня, так это Оба журнала Весь журнал Возвращаясь к моему первоначальному вопросу, я предполагаю, что :если я хочу наиболее всеобъемлющий объект, Может ли кто-нибудь прояснить различие между предметами под рукой?Если есть разница в скорости, пусть даже незначительная, я тоже хотел бы знать. Если я вижу все это неправильно, не стесняйтесь просветить меня. PS :Пожалуйста, пожалуйста, мне нравится JavaScript, так что да, я хочу иметь дело с такими вещами. Ответы типа «jQuery занимается этим за вас» — это не то, что я ищу, поэтому тега jquery нет.var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;
firstChildиспользует NodeList из childNodes, а firstElementChildиспользует children. Я основываю это предположение на ссылке MDN:
childNode— это ссылка на первый дочерний элемент узла элемента или null, если его нет.firstElementChildфактически является ссылкой на children[0], а объект childrenв любом случае уже находится в памяти..childNodesобъект. Я использовал его, чтобы взглянуть на форму в элементе таблицы. В то время как childrenперечисляет все элементы формы, childNodesтакже, кажется, включает пробелы из HTML-кода:console.log(elem.childNodes[0]);
console.log(elem.firstChild);
console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);
… >. Почему? Я бы понял, что один объект позволит мне работать с «сырым» HTML-кодом, а другой привязан к DOM, но элемент childNodes, похоже, работает на обоих уровнях.childNodes— это путь, но из-за его полноты он может быть не самым предсказуемым с точки зрения того, что он возвращает элемент, который я хочу/ожидаю в любой момент. Кросс-браузерная поддержка -также может оказаться проблемой в этом случае, хотя я могу ошибаться.