#javascript
#javascript
Вопрос:
Я пытаюсь создать объект, который при создании его экземпляра будет действовать как document.createElement() , с дополнительным преимуществом, заключающимся в том, что классы смогут расширяться от него, а также передавать ему родительский элемент, к которому он автоматически присоединится.
Например:
class Player extends Model {
constructor(parent, att0, att1) {
super(parent, "div");
let attribute0 = new Model(this, "h5");
let attribute1 = new Model(this, "h5");
attribute0.innerText = att0;
attribute1.innerText = att1;
}
}
Вместо:
class Player{
constructor(att0, att1) {
let attribute0 = document.createElement("h5");
let attribute1 = document.createElement("h5");
attribute0.innerText = att0;
attribute1.innerText = att1;
this.appendChild(attribute0);
this.appendChild(attribute1);
}
}
(И добавление экземпляров Player в качестве дочерних элементов к их родительскому классу)
Возможно ли это сделать? Если да, то как и каков наилучший способ его реализации? Если нет, могу ли я сделать хотя бы что-то подобное для достижения аналогичного результата?
Заранее спасибо.
Комментарии:
1. Итак, создайте функцию, которая создает, добавляет и возвращает element….It это будет 2 шага, чтобы создать элемент и добавить его.
2. Да, но я также хочу иметь возможность создавать классы appendChild, которые расширяют модель (например, Player) на другие элементы и классы
Ответ №1:
Веб на самом деле поддерживает пользовательские элементы, вы можете сделать:
class Player extends HTMLDivElement {
constructor() {
this.appendChild(document.createElement('h2'));
this.lastElementChild.textContent = this.dataset.title;
this.appendChild(document.createElement('h4'));
this.lastElementChild.textContent = this.dataset.subtitle;
}
}
customElements.define('player-wrapper', Player, { extends: 'div' });
А затем отобразить его с помощью:
<player-wrapper subtitle='foo' title='bar' />
Вы можете прочитать об этом в MDN .
Вы также можете использовать дочерние элементы в качестве атрибутов и т. Д., Хотя декларативная композиция обычно выполняется в шаблонах, которые поддерживаются в любом случае.
Как правило, люди просто используют для этого некоторую компонентную систему, такую как Angular / React / Vue, вместо того, чтобы использовать «сырые» веб-компоненты.
Комментарии:
1. Что касается вашего «буквального» вопроса —
createElement
возвращает элемент, который вы можете сделатьthis.appendChild(document.createElement('h5'))
, а appendChild, в свою очередь, возвращает дочерний элемент. Такdocument.body.appendChild(document.createElement('h5')).innerHTML='hello'
работает2. Я бы действительно предпочел не использовать пользовательские элементы, и я хотел бы использовать идентификаторы вместо этого.lastElementChild , кроме того, в этом решении не рассматривается, как сделать так, чтобы классы (например, Player в моем примере) также могли быть добавлены в качестве дочерних элементов к родительскому классу / элементу через их конструктор