document.getElementById('x1') .getElementsByTagName('div')[4] .closest('#x1 > div').parentNode .childNodes[2].firstChild .querySelect('*[id="f"]') .textContent = 'Hello!';
Ответ: блок кода
.getElementsByTagName('div')[4] .closest('#x1 > div').parentNodeвозвращает нас к элементу с id x1, поэтому его можно опустить. Свойство firstChild может вернуть текстовую ноду, а не элемент, надо следить в разметке html, чтобы у элемента childNodes[2] не шла первой дочерней текстовая нода. Метода querySelect у объекта элемента не существует, есть querySelector и querySelectorAll, тут в коде ошибка. Окончательный ответ такой:
jQuery('#x1 > *') .eq(2) .find(':first #f') .text('Hello!');