Skip to content

Attributes and properties #265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -4,15 +4,15 @@
<html>
<body>

<div data-widget-name="menu">Choose the genre</div>
<div data-widget-name="menu">Виберіть жанр</div>

<script>
// getting it
// отримаємо його
let elem = document.querySelector('[data-widget-name]');

// reading the value
// прочитаємо значення
alert(elem.dataset.widgetName);
// or
// чи
alert(elem.getAttribute('data-widget-name'));
</script>
</body>
Original file line number Diff line number Diff line change
@@ -2,19 +2,19 @@ importance: 5

---

# Get the attribute
# Отримайте атрибут

Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
Напишіть код, щоб вибрати елемент з атрибутом `data-widget-name` з документа та прочитати його значення.

```html run
<!DOCTYPE html>
<html>
<body>

<div data-widget-name="menu">Choose the genre</div>
<div data-widget-name="menu">Виберіть жанр</div>

<script>
/* your code */
/* ваш код */
</script>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

First, we need to find all external references.
По-перше, нам потрібно знайти всі зовнішні посилання.

There are two ways.
Є два способи.

The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
Перше -- знайти всі посилання, використовуючи `document.querySelectorAll('a')`, а потім відфільтровувати те, що нам потрібно:

```js
let links = document.querySelectorAll('a');
@@ -12,23 +12,23 @@ for (let link of links) {
*!*
let href = link.getAttribute('href');
*/!*
if (!href) continue; // no attribute
if (!href) continue; // немає атрибуту

if (!href.includes('://')) continue; // no protocol
if (!href.includes('://')) continue; // немає протоколу

if (href.startsWith('http://internal.com')) continue; // internal
if (href.startsWith('http://internal.com')) continue; // внутрішня

link.style.color = 'orange';
}
```

Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
Будь ласка, зверніть увагу: ми використовуємо `link.getAttribute('href')`. Не `link.href` тому, що нам потрібна властивість з HTML.

...Another, simpler way would be to add the checks to CSS selector:
...Інший, простий спосіб полягає в тому, щоб додати перевірки до селектора CSS:

```js
// look for all links that have :// in href
// but href doesn't start with http://internal.com
// шукати всі посилання, які мають :// у href
// але href не починається з http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<html>
<body>

<a name="list">The list:</a>
<a name="list">Список:</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<html>
<body>

<a name="list">The list:</a>
<a name="list">Список:</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
@@ -13,7 +13,7 @@
</ul>

<script>
// ...your code...
// ...ваш код...
</script>

</body>
Original file line number Diff line number Diff line change
@@ -2,18 +2,18 @@ importance: 3

---

# Make external links orange
# Зробіть зовнішні посилання помаранчевими

Make all external links orange by altering their `style` property.
Зробіть всі зовнішні посилання помаранчевими, змінюючи властивість `style`.

A link is external if:
- Its `href` has `://` in it
- But doesn't start with `http://internal.com`.
Посилання є зовнішнім, якщо:
- В його `href` є `://`
- Але не починається з `http://internal.com`.

Example:
Приклад:

```html run
<a name="list">the list</a>
<a name="list">список</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
@@ -24,12 +24,12 @@ Example:
</ul>

<script>
// setting style for a single link
// налаштування style для одного посилання
let link = document.querySelector('a');
link.style.color = 'orange';
</script>
```

The result should be:
Результат повинен бути:

[iframe border=1 height=180 src="solution"]
254 changes: 127 additions & 127 deletions 2-ui/1-document/06-dom-attributes-and-properties/article.md

Large diffs are not rendered by default.