Jaka jest różnica między właściwościami i atrybutami W HTML?

Pisząc kod źródłowy HTML, możesz zdefiniować atrybuty na swoich elementach HTML. Następnie, gdy przeglądarka przetworzy Twój kod, zostanie utworzony odpowiedni węzeł DOM. Węzeł ten jest obiektem i dlatego ma właściwości .

Na przykład Ten element HTML:

<input type="text" value="Name:">

Posiada 2 atrybuty (type i value).

Gdy przeglądarka przetworzy ten kod, zostanie utworzony obiekt HTMLInputElement , który będzie zawierał dziesiątki właściwości takie jak: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, itp.

Dla danego obiektu węzła DOM, właściwości są właściwościami tego obiektu, a atrybuty są elementami właściwości attributes tego obiektu.

Gdy węzeł DOM jest tworzony dla danego elementu HTML, wiele jego właściwości odnosi się do atrybutów o takich samych lub podobnych nazwach, ale nie jest to jeden do jednego związek. Na przykład dla tego elementu HTML:

<input id="the-input" type="text" value="Name:">

Odpowiedni węzeł DOM będzie miał id,type, i value właściwości (m.in.):

• Właściwość id jest właściwością odzwierciedloną dla atrybutu id: uzyskanie właściwości odczytuje wartość atrybutu, a ustawienie właściwości zapisuje wartość atrybutu. id jest czystą właściwością odbitą, nie modyfikuje ani nie ogranicza wartości.

• Nieruchomość type jest właściwość reflected dla atrybutu type: uzyskanie właściwości odczytuje wartość atrybutu, a ustawienie właściwości zapisuje wartość atrybutu. type nie jest właściwością czystego odbicia, ponieważ jest ograniczona do znanych wartości (np. poprawnych typów danych wejściowych). Jeśli masz <input type="foo">, to theInput.getAttribute("type") daje Ci "foo", ale theInput.type daje Ci "text".

• Natomiast właściwość value nie odzwierciedla atrybutu value. Zamiast tego jest to aktualna wartość Z wejście. Gdy użytkownik ręcznie zmieni wartość pola wprowadzania, właściwość value będzie odzwierciedlać tę zmianę. Jeśli więc użytkownik wprowadzi "John" do pola wprowadzania, to:

  theInput.value // returns "John"
  

  theInput.getAttribute('value') // returns "Name:"
  

  Właściwość value odzwierciedla current text-content wewnątrz pola wprowadzania, podczas gdy value atrybut zawiera initial text-content atrybutu value z kodu źródłowego HTML.

  Więc jeśli chcesz wiedzieć, co jest obecnie w środku text-box, przeczytaj właściwość. Jeśli jednak chcesz wiedzieć, jaka była początkowa wartość pola tekstowego, przeczytaj atrybut. Możesz też użyć właściwości defaultValue, która jest czystym odzwierciedleniem atrybutu value:

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"
  

Istnieje kilka właściwości, które bezpośrednio odzwierciedlają ich atrybut (rel, id), Niektóre są bezpośrednimi odbiciami o nieco odmiennych nazwach (htmlFor odzwierciedla atrybut for, className odzwierciedla atrybut class), wiele z nich odzwierciedla ich atrybut ale z ograniczeniami/modyfikacjami (src, href, disabled, multiple), i tak dalej. spec obejmuje różne rodzaje refleksji.