Почему свойства HTML DOM также должны отражаться в атрибутах DOM HTML?

В этой статье говорится о том, что одна из важных причин отражения свойств HTML в DOM заключается в том, что селектора CSS полагаются на атрибуты, но почему это? Это можно сделать без отражения, основанного на спецификации.

Для людей, которые не знают, о чем я говорю, читайте ниже:

В браузерах селектора CSS полагаются на атрибуты для работы.

#myButton[someAttribute] {
  opacity: 0.5; 
  font-weight: bold
}

Итак, в нашем JavaScript, если мы изменим свойство элемента, в конечном итоге мы должны отразить его и в HTML DOM так:

// we have changed some property
myButton.someAttribute= true; 

// but this is not adequate, we need to reflect as well
myButton.setAttribute('someAttribute', '');

поэтому получим следующее:

<button id="myButton" someAttribute></button>

не эта неосвещенная кнопка:

<button id="myButton"></button>

Ответ 1

Не все свойства DOM сопоставляются с атрибутами. Те, которые отражают атрибуты и атрибуты, делают это, чтобы сохранить четность с языком документа - в данном случае HTML, который имеет только концепцию атрибутов, которые, как вы правильно указали, зависят от селекторов.

Если селекторы атрибутов непосредственно сопоставлены с свойствами DOM без DOM, различающих свойства атрибута и другие свойства, тогда атрибуты выбора, такие как следующие, будут совпадать, хотя ни один из них не существует в качестве атрибутов в HTML:

[classList]
[className]
[dataset]
[offsetLeft]
[offsetTop]
[offsetWidth]
[offsetHeight]

... а также [someAttribute] сопоставление элементов с вашим несуществующим someAttribute как свойство, даже если вы не отражаете его с помощью setAttribute().

На самом деле, именно поэтому label[htmlFor] неправильно соответствует элементам label[for] в Internet Explorer 7, хотя атрибут for в HTML просто называется for, а не htmlFor - DOM использует htmlFor для воспользуйтесь тем, что for является зарезервированным словом на многих языках, включая JavaScript, основной язык сценариев DOM, не позволяя ему использоваться как идентификатор свойства.

Ответ 2

Атрибуты и свойства DOM не эквивалентны, но они связаны.

Атрибуты предназначены для инициализации свойств DOM. При анализе HTML все атрибуты используются для инициализации соответствующих свойств DOM. Если позже вы измените атрибут с помощью setAttribute или removeAttribute, соответствующее свойство также будет обновлено (аналогично перезагрузке HTML с новым атрибутом).

Но это не так. Обновление свойства не изменяет соответствующий атрибут. Вот почему вы можете назначить .value для ввода и увидеть это в отображении браузера, но когда вы посмотрите на элемент в Инструментах разработчика, вы все равно увидите исходный атрибут value="whatever". В некоторых случаях это имеет особые преимущества - когда вы нажимаете кнопку Reset формы, она сбрасывает все свойства value из своих атрибутов value.

Ответ 3

ИМХО; Некоторые атрибуты имеют сопоставление 1:1 со своими соответствующими свойствами в DOM. Отражение автоматически выполняется для общих атрибутов, таких как id. Вы также можете определить свои собственные атрибуты (ваш HTML будет считаться недействительным, но вы можете использовать doctype для проверки их). Я предполагаю, что из-за этой неопределенности, созданной атрибутами изгоев. Они предпочли отображать только атрибут: свойство, которое имеет предсказуемое поведение и использование. Вы все равно можете использовать свои пользовательские атрибуты в своем css, но вы находитесь в ручном режиме. Вы должны держать свои s ** t вместе и отражать их сами. Этот менталитет на западе (свобода) - это тот, который сделал веб-технологию настолько популярной и простой в использовании. Вы можете делать все по своему усмотрению. Я не рекомендую его для удобства, но вы можете.

Ответ 4

В вашем примере используется button, но в статье используется свойство disabled, но с чем-то, кроме кнопки. На button браузер автоматически отразит изменения в свойстве disabled в атрибуте и наоборот, но это не происходит со всеми элементами. Измените свой пример, чтобы использовать div, и вы увидите, что вам нужно будет вручную скопировать два, если нужно.

Или для пользовательских атрибутов вместо этого используйте атрибуты data-. Если вы delete свойство из my_element.dataset, я уверен, что атрибут также будет удален.

Ответ 5

Это означает, что HTML и DOM синхронизированы, потому что в какой-то момент селекторы CSS будут проверять элемент DOM и полагаться на точные атрибуты.

Если DOM неточен, то CSS также не будет точным. Что делать, если HTML не стал отражать атрибуты обратно в DOM?

Скажем, текст поля ввода изначально черный, и вы хотите, чтобы текст был красным, когда он отключен. Теперь скажем, что пользователь что-то сделал, а функция, которую вы написали, отключила поле ввода через javascript.

Если HTML не отражает, что атрибут "disabled" вернулся к DOM, CSS никогда не знал бы, что этот элемент был отключен.

Таким образом, цвет текста никогда не будет изменен на красный. Помните, что CSS проверяет и полагается на атрибуты DOM. Если HTML не изменяет атрибуты DOM, для всех CSS заботится, ничего не изменилось, поэтому все останется прежним.

Для менее технической аналогии, скажем, CSS - это Бэтмен, HTML - это полицейский отдел Gotham, атрибут - сигнал летучей мыши, а DOM - небо.

Бэтмен (css) постоянно проверяет небо (dom), чтобы узнать, отображается ли его индикатор (атрибут) летучей мыши в полицейском управлении Gotham (html). Если было какое-то событие (изменение атрибута), которое произошло в Готэме, где Департаменту полиции Готэма (html) понадобилось Бэтмен (css), чтобы помочь, но они просто не удосужились отправить ему обновление через небо (dom) с помощью bat-signal (обновление атрибутов), Бэтмен никогда не узнает, что есть работа, которая должна быть выполнена.

Я имею в виду, что он потрясающий супергерой, поэтому он, в конце концов, узнает, но, к сожалению, CSS не Бэтмен.

Ответ 6

В статье рассказывается о пользовательских элементах и берет пример элемента <div> с его естественным поведением для некоторых свойств, таких как hidden или disabled.

Итак, прежде всего, не принимайте предложение, которое вы упоминаете как указание от своего бога, потому что это не так.

Просто, если у вас есть приложение с некоторым css, использующим свойство disasbled для конкретного стиля, помните, что если вы хотите:

создать несколько пользовательских элементов
манипулировать своими атрибутами через Javascript, включая disasbled
см. css, примененный для свойства disasbled настраиваемых элементов, которыми вы управляете.

Тогда, да, вам нужно будет вернуться к DOM

Ответ 7

Ну, это первый вопрос, на который я отвечаю, но я попробую в любом случае.

Честно говоря, мне сложно сказать, что вы просите, но если вы хотите отразить изменения свойств HTMLElement на DOM (через атрибуты). Затем здесь код (используя HTMLElement 's):

// Defines a new property on an Object.
Object.defineProperty(HTMLElement.prototype, "someAttribute", {
    // Configurable
    configurable: true,

    // Enumerable
    enumerable: true,

    /* Getter
        (Allows you get the value like this =>
            element.someAttribute // returns the value of "someAttribute"
        )
    */
    get: function() {
        return this.getAttribute("someAttribute")
    },

    /* Setter
        (Allows you to modify/ update the value like this => 
            element.someAttribute = "lorem ipsum"
        )
    */
    set: function(data) {
        this.setAttribute("someAttribute", data)
    }
})

Надеюсь, это ответ на ваш вопрос.