Jaka jest różnica między document.getElementById („test”). Value i document.getElementById („test”). InnerHTML

Question

document.getElementById("test").value 

document.getElementById("test").innerHTML 

Czy najpierw oznaczać adres i drugi oznacza wartość przechowywaną pod adresem? Ponadto, gdzie mogę znaleźć dokumentację na temat właściwości value?

Answer 1

.value daje aktualnie ustawioną wartość elementu formularza (input, select, textarea), natomiast .innerHTML tworzy ciąg HTML na podstawie węzłów DOM, które zawiera element.

Aby uzyskać prosty przykład, przejdź do JS Fiddle demo i wprowadź nową wartość do input, a następnie wyjdź z wejścia.

Test wykorzystuje następujące javascript:

document.getElementById('input').onchange = function(){ 
    alert('innerHTML: ' + document.getElementById('input').innerHTML + '; whereas value: ' + document.getElementById('input').value); 
}; 

(Powyższy tekst aktualizowany, w następstwie komentarz pozostawiony przez am not i am, w komentarzach poniżej.)

Answer 2

niektóre elementy HTML mają atrybut "value", na przykład <input/> niektóre inne go nie mają.

Jeśli chcesz je zmodyfikować, możesz użyć atrybutu DOM (używanego z) innerHTML (jeśli takowe ma). Ten atrybut reprezentuje zawartość elementu, więc może być stosowany do elementów przyjmujących do gniazda innego elementu, takiego jak <div/>,

Answer 3

Wiele elementów w HTML może posiadać identyfikator, więc definicja value zmieni się dla każdego.

value będzie zasadniczo tym, co ten element rozumie jako wartość. Na przykład: <input type=text> da ci tekst w środku.

innerHTML będzie tym, co kod HTML jest w środku. Na przykład model <TR> będzie miał dziecko: TD i wszystkie inne elementy.

value i innerHTML można (zazwyczaj) napisać do, a także przeczytać.

Answer 4

Ma to związek z tym, jak niektóre znaczniki działają w oparciu o ich atrybuty, podczas gdy inne pracują nad tekstem między znacznikami otwierającymi i zamykającymi.

.value pobiera dowolną wartość ustawioną dla atrybutu znacznika value. .innerHTML pobiera treść znajdującą się pomiędzy tagiem otwierającym i zamykającym.

Na przykład jeśli tag HTML został
<input type="text" value="Enter name here" id="user_name" />
i użył JavaScript
var name = document.getElementById('user_name').value
byłoby zadeklarować zmienną name i nadać mu wartość „Wpisz nazwę tutaj” (zakładając, że użytkownik tego nie zmieni).Z drugiej strony, jeśli masz HTML jak
<div id="abc">blah blah</div>
wtedy użyć
var text = document.getElementById('abc')
i że będzie ustawiona zmienna text do „bla bla”.

Answer 5

document.getElementByid('test').value 

służy do podania wartości w polu tekstowym. Tak jak

<input type="text" id="test" name="test"> 

Teraz kładzie nacisk na ten tekst.

Podczas gdy document.getElementByid('test').innerHTML służy do nadawania wartości w określonym obszarze. Podobnie jak

<div id="test"> 
</div> 

Teraz wydrukuje wartość w obszarze div.