Element.innerhtml

Замена элементов

Элемент DOM может быть заменен любым другим элементом DOM с помощью метода replaceWith:


someElement.replaceWith(otherElement);

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

<div class="first">
  <h1>Title</h1>
</div>
<div class="second">
  <h2>Subtitle</h2>
</div>

const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');

h1.replaceWith(h2);

// Результат
<div class="first">
  <h2>Subtitle</h2>
</div>
<div class="second">
  
</div>

More Examples

Example

Get the first <p> element in the document:

document.querySelector(«p»);

Example

Get the first <p> element in the document with class=»example»:

document.querySelector(«p.example»);

Example

Change the text of an element with id=»demo»:

document.querySelector(«#demo»).innerHTML = «Hello World!»;

Example

Get the first <p> element in the document where the parent is a <div> element.

document.querySelector(«div > p»);

Example

Get the first <a> element in the document that has a «target» attribute:

document.querySelector(«a»);

Example

This example demonstrates how multiple selectors work.

Assume that you have two elements: a <h2> and a <h3> element.

The following code will add a background color to the first <h2> element in the document:

<h2>A h2 element</h2><h3>A h3 element</h3>document.querySelector(«h2, h3»).style.backgroundColor = «red»;

However, if the <h3> element was placed before the <h2> element in the document. The <h3> element is the one that will get the red background color.

<h3>A h3 element</h3><h2>A h2 element</h2>document.querySelector(«h2, h3»).style.backgroundColor = «red»;

More Examples

Example

Change the text of the first <p> element in a <div> element:

var x = document.getElementById(«myDIV»);x.querySelector(«p»).innerHTML = «Hello World!»;

Example

Change the text of the first <p> element with class=»example» in a <div> element:

var x = document.getElementById(«myDIV»);x.querySelector(«p.example»).innerHTML = «Hello World!»;

Example

Change the text of an element with id=»demo» in a <div> element:

var x = document.getElementById(«myDIV»);x.querySelector(«#demo»).innerHTML = «Hello World!»;

Example

Add a red border to the first <a> element that has a target attribute inside a <div> element:


var x = document.getElementById(«myDIV»);x.querySelector(«a»).style.border = «10px solid red»;

Example

This example demonstrates how multiple selectors work.

Assume that you have two elements: a <h2> and a <h3> element.

The following code will add a background color to the first <h2> element in <div>:

<div id=»myDIV»>  <h2>A h2 element</h2>  <h3>A h3 element</h3> </div>var x = document.getElementById(«myDIV»);x.querySelector(«h2, h3»).style.backgroundColor = «red»;

However, if the <h3> element was placed before the <h2> element in <div>. The <h3> element is the one that will get the red background color.

<div id=»myDIV»>  <h3>A h3 element</h3>  <h2>A h2 element</h2> </div>var x = document.getElementById(«myDIV»);x.querySelector(«h2, h3»).style.backgroundColor = «red»;

getElementsBy*

There are also other methods to look for nodes by a tag, class, etc.

Today, they are mostly history, as is more powerful and shorter to write.

So here we cover them mainly for completeness, while you can still find them in the old scripts.

  • looks for elements with the given tag and returns the collection of them. The parameter can also be a star for “any tags”.
  • returns elements that have the given CSS class.
  • returns elements with the given attribute, document-wide. Very rarely used.

For instance:

Let’s find all tags inside the table:

Don’t forget the letter!

Novice developers sometimes forget the letter . That is, they try to call instead of .

The letter is absent in , because it returns a single element. But returns a collection of elements, so there’s inside.

It returns a collection, not an element!

Another widespread novice mistake is to write:

That won’t work, because it takes a collection of inputs and assigns the value to it rather than to elements inside it.

We should either iterate over the collection or get an element by its index, and then assign, like this:

Looking for elements:

getElementsBy*

Существуют также другие методы поиска элементов по тегу, классу и так далее.

На данный момент, они скорее исторические, так как более чем эффективен.

Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.

  • ищет элементы с данным тегом и возвращает их коллекцию. Передав вместо тега, можно получить всех потомков.
  • возвращает элементы, которые имеют данный CSS-класс.
  • возвращает элементы с заданным атрибутом . Очень редко используется.

Например:

Давайте найдём все в таблице:

Не забываем про букву !

Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву . То есть пробовать вызывать метод вместо .

Буква отсутствует в названии метода , так как в данном случае возвращает один элемент. Но вернёт список элементов, поэтому обязательна.

Возвращает коллекцию, а не элемент!

Другая распространённая ошибка – написать:

Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.

Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:

Ищем элементы с классом :

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Основные отличия

  1. querySelector * более гибок, так как вы можете передать ему любой селектор CSS3, а не только простые для id, тега или класса.
  2. Производительность querySelector * изменяется в зависимости от размера DOM, для которого он вызывается. Чтобы быть точным, вызовы querySelector * выполняются за время O (n), а вызовы getElement * выполняются за время O (1), где n — общее количество всех дочерних элементов элемента или документа, для которых он был вызван. Этот факт кажется наименее известным, поэтому я обдумываю его.
  3. Вызовы getElement * возвращают прямые ссылки на DOM, тогда как querySelector * внутренне делает копии выбранных элементов перед возвратом ссылок на них. Они называются «живыми» и «статическими» элементами. Это НЕ строго связано с типами, которые они возвращают. Я не знаю, как определить, является ли элемент активным или статическим программно, так как это зависит от того, был ли элемент скопирован в какой-то момент и не является внутренним свойством данных. Изменения в живых элементах применяются немедленно — изменение активного элемента изменяет его непосредственно в DOM, и поэтому следующая строка JS может увидеть это изменение, и оно распространяется на любые другие активные элементы, ссылающиеся на этот элемент немедленно. Изменения в статических элементах записываются обратно в DOM только после завершения выполнения текущего скрипта. Эти дополнительные шаги копирования и записи оказывают небольшое и, как правило, незначительное влияние на производительность.
  4. Типы возврата этих вызовов различаются. и оба возвращают один элемент. и возвращают NodeLists, являясь более новыми функциями, которые были добавлены после того, как HTMLCollection вышел из моды. Старые и возвращают HTMLCollections. Опять же, это по существу не имеет отношения к тому, являются ли элементы живыми или статичными.

Эти понятия обобщены в следующей таблице.

Объект document. Поиск элементов

Последнее обновление: 1.11.2015

Для работы со структурой DOM в JavaScript предназначен объект document, который определен в глобальном объекте window. Объект document предоставляет ряд свойств и методов для управления элементами страницы.

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

Для поиска элементов на странице применяются следующие методы:

  • getElementById(value): выбирает элемент, у которого атрибут равен value

  • getElementsByTagName(value): выбирает все элементы, у которых тег равен value

  • getElementsByClassName(value): выбирает все элементы, которые имеют класс value

  • querySelector(value): выбирает первый элемент, который соответствует css-селектору value

  • querySelectorAll(value): выбирает все элементы, которые соответствуют css-селектору value

Например, найдем элемент по id:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div>
		<h3 id="header">Block Header</h3>
		<p>Text</p>
	</div>
<script>
var headerElement = document.getElementById("header");
document.write("Текст заголовка: " + headerElement.innerText);
</script>
</body>
</html>

С помощью вызова находим элемент, у которого id=»header». А с помощью свойства innerText можно получить текст найденного элемента.

Поиск по определенному тегу:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div>
		<h3>Заголовок</h3>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</div>
<script>
var pElements = document.getElementsByTagName("p");

for (var i = 0; i < pElements.length; i++) {
	document.write("Текст параграфа: " + pElements.innerText + "<br/>");
}
</script>
</body>
</html>

С помощью вызова находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.

Если нам надо получить только первый элемент, то можно к первому элементу найденной коллекции объектов:

var pElement = document.getElementsByTagName("p");
document.write("Текст параграфа: " + pElement.innerText);

Получение элемента по классу:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="article">
		<h3>Заголовок статьи</h3>
		<p class="text">Первый абзац</p>
		<p class="text">Второй абзац</p>
	</div>
<script>
var articleDiv = document.getElementsByClassName("article");
	console.log(articleDiv);
var textElems = document.getElementsByClassName("text");
for (var i = 0; i < textElems.length; i++) {
	console.log(textElems);
}
</script>
</body>
</html>

Выбор по селектору css:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="annotation">
		<p>Аннотация статьи</p>
	</div>
	<div class="text">
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</div>
<script>
var elem = document.querySelector(".annotation p");
document.write("Текст селектора: " + elem.innerText);
</script>
</body>
</html>

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

Аннотация статьи

Первый абзац

Второй абзац

Текст селектора: Аннотация статьи

Чтобы получить все элементы по селектору, можно подобным образом использовать метод document.querySelectorAll, который возвращает массив найденных элементов:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="annotation">
		<p>Аннотация статьи</p>
	</div>
	<div class="text">
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</div>
<script>
var elems = document.querySelectorAll(".text p");

for (var i = 0; i < elems.length; i++) {
	document.write("Текст селектора " + i + ": " + elems.innerText + "<br/>");
}
</script>
</body>
</html>

Вывод браузера:

Аннотация статьи

Первый абзац

Второй абзац

Текст селектора 0: Первый абзац
Текст селектора 1: Второй абзац

НазадВперед

Примеры выбора элементов с использованием CSS селектора

Рассмотрим примеры поиска элементов с использованием CSS селекторов.

Примеры с базовыми селекторами

1. Выбрать все элементы на странице можно с помощью CSS селектора :

$('*')  

2. Поиск элементов по тегу осуществляется так:

// выберем все элементы по тегу span
$('span')

3. Пример поиска элементов по классу:

// выберем все элементы с классом btn
$('.btn')

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

// например осуществим поиск элемента по id="carousel".
$('#carousel') 

5. Выбрать элементы, используя несколько шаблонов для поиска элементов, можно указывая их через запятую. Например, выберим все элементы и элементы с классом :

$('nav,.menu') 

Найти элемент имеющий определённый тег и класс можно так:

// выберем все элементы nav с классом .menu
$('nav.menu') 

Рассмотрим следующий пример:

<body>
  <ul id="list">
    <li>Кофе</li>
    <li class="active">Чай</li>
    <li>Какао</li>
  </ul>
  <p>Текст</p>
</body>

Примеры с дочерними и вложенными селекторами

Поиск элемента внутри другого осуществляется с помощью CSS селекторов вида или .

Первый вид таких селекторов предназначен для выбора элементов определяемым селектором , расположенных непосредственно в . Такой вид селекторов называются дочерними.

Второй вид — это селекторы . Они тоже предназначены для выбора элементов определяемым селектором , которые расположены в . Но в отличии от элементы будут выбираться вне зависимости от их уровня вложенности в . Этот вид селекторов называется вложенными.

6. Например, найдём все элементы , расположенные как непосредственно в , так и в вне зависимости от их уровня вложенности:

<body>
  <div>
    <p></p> <!-- 1 -->
    <article>
      <p></p> <!-- 2 -->
    </article>
    <aside>
      <p></p> <!-- 3 -->
    </aside>
  </div>
</body>

<script>
$('div p') // выберет 1, 2 и 3 элемент
$('div>p') // выберет 1 элемент
</script>

7. Например выберем все элементы , расположенные в как на первом уровне вложенности, так и вне зависимости от уровня.

<ul id="topnav">
  <li></li> <!-- 1 -->
  <li> <!-- 2 -->
    <ul>
      <li></li> <!-- 3 -->
      <li></li> <!-- 4 -->
    </ul>
  </li>
  <li></li> <!-- 5 -->
</ul>

<script>
$('#topnav li') // веберет 1, 2, 3, 4 и 5 элемент
$('#topnav>li') // веберет 1, 2, 5 элемент
</script>

Примеры с соседними и родственными селекторами

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

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

и — это селекторы, определяющие соответственно элементы и .

8. Например, найдём все элементы , расположенные непосредственно после элементов :

<section>
  <div class="alert-warning"></div> <!-- 1 -->
  <div class="alert-danger"></div>
  <div class="alert-warning"></div> <!-- 2 -->
  <div>
    <div class="alert-warning"></div> <!-- 3 -->
  </div>
  <div class="alert-warning"></div> <!-- 4 -->
  <div>
    <div class="alert-danger"></div> <!-- 5 -->
    <div class="alert-warning"></div> <!-- 6 -->
  </div>
</section>

<script>
$('.alert-danger + .alert-warning') // выберет 2 и 6 элемент
$('.alert-danger ~ .alert-warning') // выберет 2, 4 и 6 элемент
</script>

8. Выбрать все элементы input, которые находятся сразу же за элементом label. При этом элементы input и label должны располагаться на одном уровне вложенности, т.е. иметь одного родителя.

$('label + input')

9. Найти все элементы , расположенные после внутри одного родителя:

$('#prev ~ div')

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Что же это такое?

Наверняка, Вы знакомы с jQuery. И наверняка знаете про функцию , возвращающую элементы, соответствующие css-селектору (в ранних версиях можно было еще использовать XPath, но потом от него отказались).


Так вот, делает то же самое, но нативными средствами браузера.

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

Тектовые ноды, комментарии, CDATA-секции выбрать этим методом нельзя, только элементы.

Поддерживается всеми современными браузерами, Internet Explorer — начиная с версии 8.

Так вот, почти то же самое, что и , но возвращает только один (первый попавшийся) элемент, либо Null.

Поиск вверх по дереву DOM

Использование CSS-селекторов для выбора элементов DOM означает, что мы можем перемещаться только по дереву DOM. Нет CSS-селекторов для перемещения вверх по дереву, чтобы выбрать родителей.

Но мы можем перемещаться вверх по дереву DOM с помощью метода closest(), который также принимает любой допустимый селектор CSS:

document.querySelector('p').closest('div');

Это найдет ближайший родительский элемент абзаца, выбранный document.querySelector (‘p’). Вы можете связать эти вызовы, чтобы идти дальше вверх по дереву:

document.querySelector('p').closest('div').closest('.content');

Подробности, советы и примеры

HTMLCollections не так массивны, как NodeLists, и не поддерживают .forEach(). Я считаю, что оператор распространения полезен, чтобы обойти это:

Каждый элемент и глобальный имеют доступ ко всем этим функциям, кроме , который реализован только в .

Цепочка вызовов getElement * вместо использования querySelector * улучшит производительность, особенно на очень больших DOM. Даже на небольших DOM и/или с очень длинными цепями это обычно быстрее. Однако, если вы не знаете, что вам нужна производительность, читаемость querySelector * должна быть предпочтительной. часто сложнее переписать, потому что вы должны выбирать элементы из NodeList или HTMLCollection на каждом шаге. Например, следующий код не работает:

потому что вы можете использовать getElements * только для отдельных элементов, но не для коллекций

Например:

может быть написано как:

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

Поскольку все элементы имеют доступ как к вызовам querySelector *, так и к getElement *, вы можете создавать цепочки, используя оба вызова, что может быть полезно, если вы хотите повысить производительность, но не можете избежать запроса querySelector, который нельзя записать в терминах вызовов getElement *.,

Хотя, как правило, легко определить, можно ли писать селектор, используя только вызовы getElement *, есть один случай, который может быть неочевидным:

можно переписать как

Использование getElement * для статического элемента, извлеченного с помощью querySelector *, приведет к тому, что элемент будет действителен по отношению к статическому подмножеству DOM, скопированному с помощью querySelector, но не будет действителен по отношению к полному DOM документа… вот где простое Живая/статическая интерпретация элементов начинает разваливаться. Вам, вероятно, следует избегать ситуаций, когда вам придется беспокоиться об этом, но если вы это сделаете, помните, что querySelector * вызывает элементы копирования, которые они находят, прежде чем возвращать ссылки на них, но getElement * вызывает выборку прямых ссылок без копирования.

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

Поскольку выполняет итерацию по DOM до тех пор, пока не найдет совпадение (см

Основное отличие № 2), вышеприведенное также подразумевает, что вы не можете полагаться на положение элемента, который вы ищете в DOM, чтобы гарантировать его быстрое обнаружение — браузер может проходить через DOM назад, вперед, сначала в глубину, в ширину или в противном случае.

document.getElementById или просто id

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

Например:

Также есть глобальная переменная с именем, указанным в :

…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:

Пожалуйста, не используйте такие глобальные переменные для доступа к элементам

Это поведение соответствует , но поддерживается в основном для совместимости, как осколок далёкого прошлого.

Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.

В этом учебнике мы будем обращаться к элементам по в примерах для краткости, когда очевидно, откуда берётся элемент.

В реальной жизни лучше использовать .

Значение должно быть уникальным

Значение должно быть уникальным. В документе может быть только один элемент с данным .

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

Только , а не

Метод можно вызвать только для объекта . Он осуществляет поиск по по всему документу.

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Итого

Есть 6 основных методов поиска элементов в DOM:

Метод Ищет по… Ищет внутри элемента? Возвращает живую коллекцию?
CSS-selector
CSS-selector
tag or
class

Безусловно, наиболее часто используемыми в настоящее время являются методы и , но и методы могут быть полезны в отдельных случаях, а также встречаются в старом коде.

Кроме того:

  • Есть метод , который проверяет, удовлетворяет ли элемент CSS-селектору.
  • Метод ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.

И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:

elemA.contains(elemB) вернёт true, если elemB находится внутри elemA (elemB потомок elemA) или когда elemA==elemB.


С этим читают