Javascript получить текущий элемент

Element

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

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент — это кусочек HTML в DOM-дереве. Браузер создаёт DOM для взаимодействия между JavaScript и HTML. Каждый HTML-тег при этом превращается в элемент DOM. Ещё такие элементы называют узлами.

Из DOM можно получить элемент и изменить его. Браузер заметит изменения и отобразит их на странице.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Например, можно поменять выравнивание у элемента h1 :

 // получаем элемент из DOMconst element = document.getElementsByTagName('h1')[0] // после выполнения этого кода h1 будет выравнивать текст по центруelement.align = 'center'// меняем цвет шрифта на красныйelement.style.color = 'red' // получаем элемент из DOM const element = document.getElementsByTagName('h1')[0] // после выполнения этого кода h1 будет выравнивать текст по центру element.align = 'center' // меняем цвет шрифта на красный element.style.color = 'red'    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

HTML-элементы содержат свойства, которые можно разделить на группы:

• свойства, связанные с HTML-атрибутами: id, классы, стили и так далее;
• свойства и методы связанные с обходом DOM: получение дочерних элементов, родителя, соседей;
• информация о содержимом;
• специфические свойства элемента.

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

💡 Свойства, связанные с HTML-атрибутами

Скопировать ссылку «💡 Свойства, связанные с HTML-атрибутами» Скопировано

Читать и записывать значения HTML-атрибутов можно при помощи свойств элемента. Название обычно совпадает с названием атрибута:

 const element = document.getElementsByTagName('div')[0] // напечатать список классов в консольconsole.log(element.className)// установить свой классelement.className = 'hacked' const element = document.getElementsByTagName('div')[0] // напечатать список классов в консоль console.log(element.className) // установить свой класс element.className = 'hacked'    Скопировать Скопировано Не удалось скопировать   

• style — добавить стили. Стили добавляются так же с помощью свойств. Свойства именуются по аналогии с CSS-свойствами:

 const element = document.getElementsByTagName('div')[0] // CSS-свойство background-colorelement.style.backgroundColor = 'beige'// CSS-свойство colorelement.style.color = 'gray'// CSS-свойство margin-topelement.style.marginTop = '20px' const element = document.getElementsByTagName('div')[0] // CSS-свойство background-color element.style.backgroundColor = 'beige' // CSS-свойство color element.style.color = 'gray' // CSS-свойство margin-top element.style.marginTop = '20px'    Скопировать Скопировано Не удалось скопировать   

💡 Свойства и методы, связанные с DOM

Скопировать ссылку «💡 Свойства и методы, связанные с DOM» Скопировано

• children — список дочерних элементов;
• parent Element — получить родительский элемент;
• next Element Sibling и previous Element Sibling — получить следующий/предыдущий узел-сосед:

• get Elements By Class Name ( ) — поиск среди дочерних элементов по названию класса;
• get Elements By Tag Name ( ) — поиск среди дочерних элементов по названию тега;
• query Selector ( ) — поиск первого дочернего элемента, подходящего под CSS-селектор;
• query Selector All ( ) — поиск всех дочерних элементов подходящих под CSS-селектор;

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

💡 Свойства с информацией о содержимом

Скопировать ссылку «💡 Свойства с информацией о содержимом» Скопировано

• inner H T M L — это свойство возвращает HTML-код всего, что вложено в текущий элемент. При записи в это свойство, предыдущее содержимое будет затёрто. Страница отобразит новое содержимое:

 const divElement = document.getElementsByTagName('div')[0]divElement.innerHTML = '
Добавлен из кода
'// после выполнения этого кода, на странице отобразится параграф с указанным текстом const divElement = document.getElementsByTagName('div')[0] divElement.innerHTML = '
Добавлен из кода
' // после выполнения этого кода, на странице отобразится параграф с указанным текстом    Скопировать Скопировано Не удалось скопировать   

• outer H T M L — это свойство возвращает HTML-код текущего элемента и всего, что в него вложено. При записи в это свойство, предыдущее содержимое будет затёрто.
• text Content — свойство, возвращает текст всех вложенных узлов без HTML-тегов.

Почувствуй разницу на демо:

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

🛠 Если нужно добавить текст в элемент, то всегда используйте свойство text Content . Другие свойства обрабатывают HTML, это может привести к дырам в безопасности.

🛠 Для работы с классами элемента есть удобные методы, доступные через свойство class List :

 const element = document.getElementsByTagName('div')[0]element.classList.add('hello')element.classList.remove('bye') const element = document.getElementsByTagName('div')[0] element.classList.add('hello') element.classList.remove('bye')    Скопировать Скопировано Не удалось скопировать   

🛠 В HTML часто используют data-атрибуты. Они используются, когда нужно передать данные через HTML. Например, когда сервер собирает стартовый HTML, он может поместить значения в data-атрибуты. Фронтендер затем может использовать их, вместо того, чтобы отправлять запрос на сервер. Название таких атрибутов начинаются с префикса data — . Для доступа к ним из JavaScript используется свойство dataset :

 const element = document.getElementsByTagName('div')[0] // получить значение атрибута data-columns тега divconsole.log(element.dataset.columns)// изменить значениеelement.dataset.columns = 99 const element = document.getElementsByTagName('div')[0] // получить значение атрибута data-columns тега div console.log(element.dataset.columns) // изменить значение element.dataset.columns = 99    Скопировать Скопировано Не удалось скопировать   

🛠 У элементов очень много свойств. Если нужно что-то получить из элемента, то скорее всего уже есть свойство, которое хранит эти данные.

🛠 Если нужно удалить элемент и все вложенные в него, воспользуйтесь методом remove ( ) :

 const element = document.querySelector('#some-element')element.remove() const element = document.querySelector('#some-element') element.remove()    Скопировать Скопировано Не удалось скопировать   

Источник

How can I get the DOM element which contains the current selection?

You can select a part of a web page with the mouse. I know that I can get the currently selected text but how can I get the DOM element which contains the start or end of the current selection?

2 Answers 2

The following will return the container element of the start or end boundary of the current selection, using the boolean isStart to specify whether you want the start or end boundary. It will work in most mainstream browsers. Add feature tests for more robustness.

function getSelectionBoundaryElement(isStart) < var range, sel, container; if (document.selection) < range = document.selection.createRange(); range.collapse(isStart); return range.parentElement(); >else < sel = window.getSelection(); if (sel.getRangeAt) < if (sel.rangeCount >0) < range = sel.getRangeAt(0); >> else < // Old WebKit range = document.createRange(); range.setStart(sel.anchorNode, sel.anchorOffset); range.setEnd(sel.focusNode, sel.focusOffset); // Handle the case when the selection was selected backwards (from the end to the start in the document) if (range.collapsed !== sel.isCollapsed) < range.setStart(sel.focusNode, sel.focusOffset); range.setEnd(sel.anchorNode, sel.anchorOffset); >> if (range) < container = range[isStart ? "startContainer" : "endContainer"]; // Check if the container is a text node and return its parent if so return container.nodeType === 3 ? container.parentNode : container; >> > 

I was looking at that code and trying it out, really good. But it is not capable of returning two elements if 2 were selected.

Источник

Get next / previous element using JavaScript?

However in some browsers (I forget which) you also need to check for whitespace and comment nodes:

var div = document.getElementById('foo2'); var nextSibling = div.nextSibling; while(nextSibling && nextSibling.nodeType != 1)

Libraries like jQuery handle all these cross-browser checks for you out of the box.

nextSibling and previousSibling (should) always return all nodes, not just element nodes shouldn’t they? This includes text nodes, comment nodes, etc. Your second example looks like a good solution for this! Maybe you could cut down on the repetition with a do <> while(); loop? (edit: or recursion perhaps)

Note that neither nextSibling nor nextElementSibling are fully cross browser compatible. Firefox’s nextSibling returns text nodes while IE doesn’t and nextElementsibling is not implemented until IE9.

@Kloar: The question asked how to get the «next [div] element in html.» The next div in the markup might not be adjacent to the element; it might be a level deeper or a level higher.

Its quite simple. Try this instead:

let myReferenceDiv = document.getElementById('mydiv'); let prev = myReferenceDiv.previousElementSibling; let next = myReferenceDiv.nextElementSibling; 

Really depends on the overall structure of your document.

it may be as simple as traversing through using

mydiv.nextSibling; mydiv.previousSibling; 

However, if the ‘next’ div could be anywhere in the document you’ll need a more complex solution. You could try something using

document.getElementsByTagName("div"); 

and running through these to get where you want somehow.

If you are doing lots of complex DOM traversing such as this I would recommend looking into a library such as jQuery.

Well in pure javascript my thinking is that you would first have to collate them inside a collection.

var divs = document.getElementsByTagName("div"); //divs now contain each and every div element on the page var selectionDiv = document.getElementById("MySecondDiv"); 

So basically with selectionDiv iterate through the collection to find its index, and then obviously -1 = previous +1 = next within bounds

Please be aware though as I say that extra logic would be required to check that you are within the bounds i.e. you are not at the end or start of the collection.

This also will mean that say you have a div which has a child div nested. The next div would not be a sibling but a child, So if you only want siblings on the same level as the target div then definately use nextSibling checking the tagName property.

Источник