Выбор вторых дочерних элементов первых дочерних элементов div в JavaScript

Если вы хотите получить доступ к элементу внутри mainDiv, вы можете использовать оба приведенных вами варианта.

Первый вариант:

var mainDiv = document.getElementById('mainDiv');
var x = mainDiv.children[0].children[1];

В этом коде вы сначала получаете элемент с id mainDiv, а затем обращаетесь к первому дочернему элементу этого mainDiv, после чего берете его второго дочернего элемента. Это способ, имеющий смысл, если структура вашего HTML гарантирует, что первый элемент всегда имеет по крайней мере двух дочерних элементов.

Второй вариант:

var mainDiv = document.getElementById('mainDiv');
var x = mainDiv.getElementsByTagName('div')[0].getElementsByTagName('div')[1];

Здесь вы используете метод getElementsByTagName, чтобы получить все дочерние div элементы внутри mainDiv. Вы берете первый div, а затем получаете его второй дочерний div. Этот подход более гибкий, если структура вашего HTML может меняться и вы хотите использовать поиск по тегу.

Оба метода работают, но используйте тот, который больше соответствует вашей задаче и необходимой структуре DOM. Если вы хотите, чтобы код был более читаемым, рассмотрите возможность использования более понятных селекторов, таких как querySelector.

Я бы предложил использовать одну строку чистого кода.

Это решение подходит для любых элементов и не ограничено названиями тегов в структуре. Однако важно сохранить количество элементов и иерархию.

var requiredDiv = document.getElementById('mainDiv').firstChild.firstChild.nextSibling;

Ваш код содержит небольшую ошибку: переменная mainDiv написана с заглавной буквы, а в строке, где вы пытаетесь получить третий <div>, вы используете maindiv с маленькой буквы. В JavaScript переменные чувствительны к регистру, поэтому это может привести к ошибке.

Попробуйте изменить последнюю строку на:

var div = mainDiv.getElementsByTagName('div')[2]; // третий div

В результате ваш код будет выглядеть так:

var mainDiv = document.getElementById('mainDiv');
var div = mainDiv.getElementsByTagName('div')[2]; // третий div

Теперь он должен работать корректно и возвращать третий <div> внутри mainDiv. Если у вас появятся дополнительные вопросы или вам потребуется помощь, не стесняйтесь спрашивать!

Да, querySelector доступен и может быть использован для выбора элементов на странице. Ваш код:

console.log(
  mainDiv.querySelector(':nth-child(1) > :nth-child(2)'))

использует селектор :nth-child, чтобы найти определенный дочерний элемент. В данном случае, вы ищете второй элемент внутри первого дочернего элемента mainDiv. С учетом вашего HTML, это будет <div>come get me</div>, поскольку он является вторым элементом внутри первого дочернего <div> элемента.

Несколько замечаний:

1. Убедитесь, что mainDiv правильно инициализирован (например, с помощью document.getElementById('mainDiv')).
2. Возможно, вам придется учесть, что нумерация в :nth-child начинается с 1.

Если вам нужно выбрать этот элемент напрямую, вы можете использовать следующий код:

const mainDiv = document.getElementById('mainDiv');
const targetDiv = mainDiv.querySelector('div > div:nth-child(2)');
console.log(targetDiv);

Этот код найдет второй дочерний div внутри первого div, который находится в mainDiv, и выведет его в консоль.