ReSQL.ru
     
powered by simpleCommunicator - 2.0.48     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Концепция работы с JS
9 сообщений из 9, страница 1 из 1
Концепция работы с JS
    #40040237
JDS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JDS
Участник
Всем привет!
Вопрос простой, но не улавливаю концептуальные, фундаментальные моменты.

1. Есть понимание того, что document.createElement создает элемент в памяти js.
2. Есть понимание, что document.body.appendChild добавляет элемент на страницу или проще appendChild добавляет один элемент к другому

Но нет понимания того, почему иногда (именно что не всегда) чтобы обратиться к элементу уже добавленному на страницу, не смотря на то, что он по коду js у нас есть в памяти, нам надо сначала снова найти его на странице через например getelembyid.
Например ты не можешь обратиться к его свойствам в js напрямую после добавления.
Пример:
 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  <style>
   .test { 
    top: 0;
    left: 0;    
    width: 100px;
    height: 100px;
    background: blue;
   }
  </style>
</head>
<body>
  <script>
     el = document.createElement('div');
     el.classList.add('test');
     el.id = 'tid';
     document.body.appendChild(el);
     alert(el.style.width);
     alert(el.offsetWidth);
     alert(document.defaultView.getComputedStyle(el).width);
     el2 = document.getElementById('tid'); 
     el2.style.width = '200px';
     alert(el2.style.width);
  </script>
</body>
</html>


Первый алерт ничего не вернет.
А после того, как мы найдем его через getElementById, то последний алерт находит.

То есть нет понимания взаимосвязи DOM-модели, которая отрисована в браузере и того что в памяти js.
...
Рейтинг: 0 / 0
31.01.2021, 12:55
| Ответить | Цитировать | Написать  
Концепция работы с JS
    #40040284
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
JDS,

потому как el у тебя просто переменная содержащая что-то, что ты вставляешь.
а el2 - уже конкретно содержит найденный элемент в dom
...
Рейтинг: 0 / 0
31.01.2021, 18:58
| Ответить | Цитировать | Написать  
Концепция работы с JS
    #40040293
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
JDS,

alert(el.style.width) - ничего не показывает, потому, что el.style выдает только то, что было задано через атрибут или свойство style, а не через классы.
Задайте el.style.width = '100px', как вы делаете для el2 и получите нормальное значение.
Попробуйте убрать el2.style.width = '200px'; и alert(el2.style.width) тоже ничего не выдаст.
Что бы получить реальные значения, нужно использовать функцию window.getComputedStyle

alert(el.offsetWidth) вполне себе выдает правильное значение

Концепция JS тут совсем не при чем. Это правила, свойства DOM.
...
Рейтинг: 0 / 0
31.01.2021, 19:21
| Ответить | Цитировать | Написать  
Концепция работы с JS
    #40040317
JDS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JDS
Участник
вадя, voraa, спасибо.

Выходит, в данном случае не понимал то, что свойства задаваемые DOM-элементу через стили не рефрешатся в его экземпляре в JS?
Есть ли еще какие-то подобные моменты в JS?
Есть ли какие-то приемы обхода этого момента?
Пока видно три способа:
1. getComputedStyle (который как понимаю, ищет элемент в DOM-е, что не быстро скорее всего)
2. в коде js самим снова найти этот элемент в dom, что по-моему нелепо (только что добавили и теперь надо его найти, чтобы прочитать свойства, которые подхватились через стили), или например мы изменили класс лист элемента, он подхватил другие css согласно новому списку классов и мы опять не можем нормально читать свойства кроме как через тот же getComputedStyle например
3. Читать некие другие свойства как offsetWidth в данном примере.
Только style.width может задаваться не обязательно в пикселях, плюс возможно, они все-таки имеют разное назначение или даже значение в зависимости от паддингов например, это не проверял.
Может другие варианты? Какая практика считается нормальной?
...
Рейтинг: 0 / 0
31.01.2021, 20:41
| Ответить | Цитировать | Написать  
Концепция работы с JS
    #40040327
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
JDS,

вот тут надо изучить https://learn.javascript.ru/
написано доходчиво, читается легко
...
Рейтинг: 0 / 0
31.01.2021, 21:26
| Ответить | Цитировать | Написать  
Концепция работы с JS
    #40040330
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
JDS
(который как понимаю, ищет элемент в DOM-е, что не быстро скорее всего)
что такое id -знаешь? это единственный идентификатор в dom (должен быть, хотя возможно их одинаковых допускается несколько, но за это надо руки отрывать) - и по нему ищется быстро, потому как поиск останавливается на первом найденном
для остальных - поиск до конца dom , т.к. их может быть много.
но нет смысла боятся такого document.getElementById('tid'), это стандартный режим.

и лучше задавать вопрос , используя https://jsfiddle.net/cq0t4hev/
...
Рейтинг: 0 / 0
31.01.2021, 21:42
| Ответить | Цитировать | Написать  
Концепция работы с JS
    #40040335
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
JDS
вадя, voraa, спасибо.

Выходит, в данном случае не понимал то, что свойства задаваемые DOM-элементу через стили не рефрешатся в его экземпляре в JS?
Есть ли еще какие-то подобные моменты в JS?
Есть ли какие-то приемы обхода этого момента?
Пока видно три способа:
1. getComputedStyle (который как понимаю, ищет элемент в DOM-е, что не быстро скорее всего)
2. в коде js самим снова найти этот элемент в dom, что по-моему нелепо (только что добавили и теперь надо его найти, чтобы прочитать свойства, которые подхватились через стили), или например мы изменили класс лист элемента, он подхватил другие css согласно новому списку классов и мы опять не можем нормально читать свойства кроме как через тот же getComputedStyle например
3. Читать некие другие свойства как offsetWidth в данном примере.
Только style.width может задаваться не обязательно в пикселях, плюс возможно, они все-таки имеют разное назначение или даже значение в зависимости от паддингов например, это не проверял.
Может другие варианты? Какая практика считается нормальной?

Когда вы задаете элемент в html, вы указываете его атрибуты, например style="color:#ff0000;width:80%;"
Для JS элемент существует в качестве объекта с кучей свойств. Многие свойства элемента связанны с его атрибутами, многие нет. Одним из свойств элемента, является style - это тоже довольно довольно сложный объект. Он хранит значения, заданные атрибутом style. Причем хранит их в каком то своем виде. Например для ширины или высоты там будет храниться то, что задано в атрибуте.
el.style.width выдаст строку "80%". А вот с цветом уже не так.el.style.color выдаст "rgb(255,0,0)"

Другой пример атрибут disabled связан со свойством el.disabled. el.disabled будет выдавать true или false в зависимости от того задан атрибут или нет.

Другие свойства не связаны с атрибутами. Они просто задают текущее состояние элемента.
Например offsetWidth. Оно дает просто текущую ширину элемента. И никак не связана со style.
Вы можете задать style="width:80%;display:none"
el.style.width выдаст "80%"
А el.offsetWidth будет = 0.
...
Рейтинг: 0 / 0
31.01.2021, 22:28
| Ответить | Цитировать | Написать  
Концепция работы с JS
    #40040337
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
В документации MDN подробно перечислены все свойства, методы и атрибуты элементов (не всегда на русском)
Там же указано какие свойства с какими атрибутами связаны, какие можно менять, какие только для чтения....
Показана вся иерархия классов node - element - htmlelement - конкретный элемент (div, table, form, input....)
https://developer.mozilla.org/ru/docs/Web/API/Node
https://developer.mozilla.org/ru/docs/Web/API/Element
https://developer.mozilla.org/ru/docs/Web/API/HTMLElement
...
Рейтинг: 0 / 0
31.01.2021, 22:40
| Ответить | Цитировать | Написать  
Концепция работы с JS
    #40040362
Фотография crutchmaster
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
crutchmaster
Участник
JDS
То есть нет понимания взаимосвязи DOM-модели, которая отрисована в браузере и того что в памяти js.

DOM'ом крутит браузер, который отдаёт его js'у через api.
...
Рейтинг: 0 / 0
01.02.2021, 04:55
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Концепция работы с JS
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru             Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=6&tid=1443315]:
 0ms
get settings:
 11ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 39ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 258ms
total:  393ms
созд. / загр.: 393ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]