Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Концепция работы с JS / 9 сообщений из 9, страница 1 из 1
31.01.2021, 12:55
    #40040237
JDS
JDS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Концепция работы с JS
Всем привет!
Вопрос простой, но не улавливаю концептуальные, фундаментальные моменты.

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, 18:58
    #40040284
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Концепция работы с JS
JDS,

потому как el у тебя просто переменная содержащая что-то, что ты вставляешь.
а el2 - уже конкретно содержит найденный элемент в dom
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.01.2021, 19:21
    #40040293
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Концепция работы с JS
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, 20:41
    #40040317
JDS
JDS
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Концепция работы с JS
вадя, voraa, спасибо.

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

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

и лучше задавать вопрос , используя https://jsfiddle.net/cq0t4hev/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.01.2021, 22:28
    #40040335
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Концепция работы с JS
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:40
    #40040337
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Концепция работы с JS
В документации 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
| Ответить | Цитировать | Написать  
01.02.2021, 04:55
    #40040362
crutchmaster
crutchmaster
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Концепция работы с JS
JDS
То есть нет понимания взаимосвязи DOM-модели, которая отрисована в браузере и того что в памяти js.

DOM'ом крутит браузер, который отдаёт его js'у через api.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Концепция работы с JS / 9 сообщений из 9, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 404ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443315]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 69ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 235ms
total:  404ms
x
x
Закрыть


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