Как найти блок элемента

<tbody><tr>
									<td colspan="7" class="hide-tr name-pnd">ПК1</td>
								</tr><tr>
									<td colspan="7" class="hide-tr search-click">РАЗДЕЛ</td>
								</tr><tr>
									<td>ТЕКСТ</td>
								</tr><tr>
									<td>ТЕКСТ ДЛЯ НАЖАТИЯ</td>
								</tr></tbody>

Мне нужно найти tr в котором есть блок с классом name-pnd. Этот блок находится ДО блока по которому происходит нажатие.
$(this).parent().prev().find('.name-pnd').text()
Так он проверяет только ближайший блок tr, а мне нужно что бы грубо говоря он проверил все tr которые находятся «перед» и подцепил ближайший. Как это сделать

Поиск элементов

Чтобы скрипт мог работать с каким-то элементом страницы, нужно сначала найти этот элемент.
Для этого в JavaScript есть несколько способов. Найденный элемент
обычно записывается в переменную.
Через эту переменную сркипт обращается к элементу и производит с ним какие-то действия.

Поиск по id

Если элементу задан атрибут id, то элемент можно найти по id. Это
самый простой способ. Поиск элемента производится с помощью метода
getElementById() глобального объекта document.

document.getElementById (id)

Создадим страницу, добавим на неё элемент и зададим ему id. В
скрипте найдём этот элемент:

HTML код:

+

<div id="block">Блок с id</div>

JavaScript:

let block = document.getElementById('block');
console.log(block);

Найденный элемент мы присвоили переменной block и вывели переменную в консоль. Откройте консоль браузера,
в ней должен быть указан элемент.

Так как посик по id — это самый простой и удобный способ, часто используют именно его. Если с каким-то
элементом нужно работать в скрипте, то в коде страницы этому элементу устанавливают атрибут
id, даже если он не был установлен ранее. И находят элемент по id.

Поиск по классу

Метод getElementsByClassName() позволяет найти все элементы, относящиеся к
определённому классу.

document.getElementsByClassName (класс)

Метод возвращает псевдомассив, содержащий найденные элементы. Псевдомассивом он называется потому, что
для него не работают многие методы массивов. Но главное свойство остаётся — можно обратиться к любому
элементу массива. Даже если найден только один элемент, он всё равно находится в массиве.

Добавим на страницу элементы и зададим им класс. Часть элементов разместим внутри блока, который мы
создали ранее. Другую часть создадим вне блока. Смысл этого будет понятен чуть позднее. Теперь страница
будет выглядеть так:

HTML код:

<div id="block">Блок с id
  <p class="art">Абзац в блоке</p>
  <p class="art">Ещё один абзац в блоке</p>
</div>
<p class="art">Отдельный абзац</p>

JavaScript:

let art = document.getElementsByClassName('art');
console.log(art);
console.log(art[0]);

В строке 17 мы вывели в консоль весь массив, чтобы посмотреть, сколько в нём элементов, а в строке 18
мы обратились к конкретному элементу.

Любой метод, рассматриваемый в данной теме, можно применить не только ко всему документу,
но и к конкретному элементу. Например, к блоку, который есть на нашей странице. При этом будут найдены
не все элементы, а только те, которые находятся внутри блока. Найдём элементы класса
art, находящиеся в блоке:

let artIn = block.getElementsByClassName('art');
console.log(artIn);

Теперь найдены только те элементы, которые расположены в блоке.

Поиск по тэгу

Метод getElementsByTagName() находит все элементы с конкретным тэгом.
Он также возвращает псевдомассив с найденными элементами.

document.getElementsByTagName (тэг)

Найдём все тэги p, которые есть на странице:

let p = document.getElementsByTagName('p');
console.log(p);

Этот метод можно также применять не ко всему документу, а к конкретному элементу. Найдите все тэги
p, находящиеся в блоке.

Поиск по селектору

Методы querySelector() и
querySelectorAll() находят
элементы, соответсвующие определённому
селектору.

Метод querySelectorAll() находит все элементы, соответствующие
селектору. А метод querySelector() находит только
первый элемент. Эти методы могут заменить все способы поиска
элементов, рассмотренные ранее.
Ведь есть селектор по id, селектор по тэгу и многие другие.

document.querySelector (селектор)

document.querySelectorAll (селектор)

Селекторы пишутся точно так же, как в CSS, только не забывайте ставить кавычки.

Добавим на страницу список и найдём его по селектору. Мы ищем только один элемент и мы точно знаем, что
он будет первый, потому что он один на странице. Поэтому в данном случае удобнее использовать метод
querySelector(). Но при использовании этого метода нужно учитывать, что в
дальнейшем на страницу могут быть добавлены такие же элементы. Впрочем, это касается большинства методов.

HTML код:

<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>

JavaScript:

let element = document.querySelector('ul');
console.log(element);

Теперь найдём не сам список, а его пункты. Для поиска элементов можно использовать любые селекторы.
Мы используем составной селектор:

let li = document.querySelectorAll('ul li');
console.log(li);

Данные методы также могут производить поиск не во всём документе, а внутри конеретного элемента.

В примере мы использовали только селекторы по тэгу. Попробуйте найти элементы страницы с использованием
других селекторов.

Соседние элементы

Для найденного элемента можно найти соседей. Каждый элемент является объектом, и соседние элементы можно
получить через свойства этого объекта. Свойство previousElementSibling
содержит предыдущий элемент, а свойство
nextElementSibling содержит следующий элемент.

элемент.previousElementSibling

элемент.nextElementSibling

Найдём элемент, следующий за блоком:

let blockPre = block.nextElementSibling;
console.log(blockPre);

Свойства previousSibling и nextSibling
тоже содержат соседей, но они учитывают не только элементы, но и другие узлы.

Перед первым абзацем идёт текст
«Блок с id». Найдём этот текстовый узел. Абзац содержится в нескольких псевдомассивах, созданных нами
в примерах, в том числе, в массиве art. Обратимся к нему через этот массив:

let text = art[0].previousSibling;
console.log(text);

Дочерние элементы

Свойство children содержит массив с дочерними элементами.

элемент.children

Найдём дочерние элементы блока:

let blockIn = block.children;
console.log(blockIn);

Свойство childNodes содержит не только элементы, но и другие узлы. Найдём
все узлы, которые находятся в блоке:

let blockAll = block.childNodes;
console.log(blockAll);

Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById, getElementsByTagName и getElementsByName.

Более мощные способы поиска предлагают javascript-библиотеки.

Поиск по id

Самый удобный способ найти элемент в DOM — это получить его по id. Для этого используется вызов document.getElementById(id)

Например, следующий код изменит цвет текста на голубой в div‘е c id="dataKeeper":

document.getElementById('dataKeeper').style.color = 'blue'

Поиск по тегу

Следующий способ — это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag). Она возвращает массив из элементов, имеющих такой тег.

Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li:

document.getElementsByTagName('LI')[1]

Что интересно, getElementsByTagName можно вызывать не только для document, но и вообще для любого элемента, у которого есть тег (не текстового).

При этом будут найдены только те объекты, которые находятся под этим элементом.

Например, следующий вызов получает список элементов LI, находящихся внутри первого тега div:

document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')

Получить всех потомков

Вызов elem.getElementsByTagName('*') вернет список из всех детей узла elem в порядке их обхода.

Например, на таком DOM:

<div id="d1">
  <ol id="ol1">
    <li id="li1">1</li>
    <li id="li2">2</li>
  </ol>
</div>

Такой код:

var div = document.getElementById('d1')
var elems = div.getElementsByTagName('*')

for(var i=0; i<elems.length; i++) alert(elems[i].id)

Выведет последовательность: ol1, li1, li2.

Поиск по name: getElementsByName

Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name) равно данному.

Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это form, input, a, select, textarea и ряд других, более редких.

Метод document.getElementsByName не будет работать с остальными элементами типа div,p и т.п.

Другие способы

Существуют и другие способы поиска по DOM: XPath, cssQuery и т.п. Как правило, они реализуются javascript-библиотеками для расширения стандартных возможностей браузеров.

Также есть метод getElementsByClassName для поиска элементов по классу, но он совсем не работает в IE, поэтому в чистом виде им никто не пользуется.