Хочу сделать раскрывающийся текст, при нажатии на "читать дальше" Сделала так:
this.parentNode.parentNode.childNode[1].style.свойство
Мне кажется, что это, вроде как, должно работать, но не работает. Пожалуйста, объясните почему..
parentNode
- он всегда один, в единственном числе. Но childNodes
- в множественном, их может быть больше одного.
this.parentNode.parentNode.childNodes[1].style.display = "block";
Но у childNodes есть неприятный подвох. Он включает и пробелы (переносы строк) / тексты / комментарии между HTML-элементами:
console.log( test.childNodes.length ); // 7!
// пробел, <!--комментарий-->, пробел, <p>, пробел, <p>, пробел
<div id="test">
<!-- test -->
<p>1<p>
<p>1<p>
</div>
Поэтому надежнее использовать children
- возвращающий список только из HTML-элементов.
this.parentNode.parentNode.children[1].style.display = "block";
childNodes
возвращает все дочерние узлы, а children
- только HTML-элементы. На самом деле childNodes очень редко нужен: когда нужно достать именно какой-то внутренний текст / комментарий, который не обернут тегом.
Commented
14 июн. 2020 в 21:59
parentNode
- потому что он один. НоchildNodes
-s
, их бывает больше одного.