Научи меня всему, что мне нужно знать о модификации DOM, пожалуйста - PullRequest
Новая
       8

Научи меня всему, что мне нужно знать о модификации DOM, пожалуйста

0 голосов
/ 22 октября 2019

Я пытаюсь сделать редактор текстов, который работает на каждом сайте. Это изменило бы A на B.

Я пробовал много вещей, таких как

1 Ответ

0 голосов
/ 23 октября 2019

Привет, добро пожаловать в Stack Overflow и JavaScript! Неясно, какой у вас опыт работы с JavaScript и HTML, поэтому здесь есть несколько вариантов:

Лучший способ начать работу - изучить онлайн-учебник или книгу, чтобы изучить и отработать новые навыки. Такие сайты, как https://www.w3schools.com/js/js_htmldom_html.asp и https://www.digitalocean.com/community/tutorials/introduction-to-the-dom, могут быть хорошим началом для вас.

Если вы уже знаете немало HTML и JS, но не знаетеЧтобы понять, как их связать, вот некоторые из основ:

Объект JS document содержит огромное количество методов и свойств, позволяющих вам взаимодействовать с веб-страницей или документом. Когда вы создаете HTML-файл, как показано ниже, вы можете установить идентификаторы и имена классов для элементов на странице - это по сути как имена, чтобы помочь вам взаимодействовать с этими элементами.

Вот очень простой HTML-файл: 

<!DOCTYPE html>
<html>
<head>
  <title>An HTML webpage</title>
  <meta charset="UTF-8">
</head>
<body>

<h1 id="header" class="text">This is my webpage</h1>
<p id="body" class="text">This is the body text of my webpage!</p>

</body>
</html>

Вы можете видеть, что мы дали элемент h1, заголовок, id "header" и класс "text". Никакие два элемента не могут иметь один и тот же идентификатор, но они могут совместно использовать классы. Это полезно, потому что вы можете сгруппировать все текстовые элементы на странице, например.

Теперь, если мы хотим использовать JavaScript для редактирования текста заголовка страницы, мы можем сделать это: 

document.getElementById("header").innerHTML = "A new header";

Мы также можем сделать это: 

document.getElementsByTagName("h1")[0].innerHTML = "A new header";

Примечание: вышеупомянутый JS получит каждый h1 элемент на странице, поэтому нам нужно добавить [0] вполучите только первый

Если вы хотите изменить цвет основного текста, вы можете сделать это: 

document.getElementById("body").color = "blue";

Теперь это очень ограниченный обзор того, что вы можете сделать сМодификация DOM, но, надеюсь, послужит хорошей отправной точкой. Я бы рекомендовал проверить сайты выше.

Если вам помог этот ответ, нажмите галочку / галочку слева, чтобы пометить его как правильный - спасибо!

...