Javascript: setAttribute() v.s. element.attribute = wartość ustawić „name” Atrybut

Więc uczę się manipulować DOM i zauważyłem jedną ciekawą rzecz:Javascript: setAttribute() v.s. element.attribute = wartość ustawić „name” Atrybut

Powiedzmy, że chcemy ustawić atrybut elementu name przy użyciu”. " notacja kropka:

element.name = "someName"; 
console.log(document.getElementsByName("someName")[0]); // returns "undefined"??

Jednak w przypadku korzystania z metody document.setAttribute(), to działa dobrze:

element.setAttribute("name", "someName"); 
console.log(document.getElementsByName("someName")[0]); // returns the element like it should.

Nie wiem, dlaczego metoda notacja kropka nie działa w pierwszym przypadku.

Dlaczego tak się dzieje?

Źródło

2011-12-08 dkugappi

Generalnie staraj się unikać używania 'getElementsByName' – zzzzBov

Dlaczego należy unikać używania getElementsByName? –

Atrybuty Są dostępne za pomocą notacji kropkowej, jeśli w ten sposób chcesz uzyskać do nich dostęp. Jeśli chcesz uzyskać dostęp do atrybutów za pomocą notacji kropkowej, musisz odwołać się do obiektu obj.attributes.attributeName, aby pobrać atrybut i obj.attributes.attributeName.value, aby manipulować jego wartością. Długo się kurczy w porównaniu z atrybutem setAttribute lub getAttribute. i niezalecane jako rozwiązanie, ale niezależnie od tego, pełna odpowiedź na pytanie "Dlaczego notacja kropkowa nie działa w pierwszym przypadku" - musi zawierać "tak" Po prostu szukałeś w niewłaściwym miejscu atrybutów i ich wartości. " – Radiotrib

Moje przypuszczenie (ponieważ nie określiłeś typu elementu) to element zwykle nie ma atrybutu name, więc ustawienie właściwości DOM w taki sposób nie będzie działać. Na przykład ustawienie właściwości name na elemencie input będzie działać. Ustawienie go na div nie spowoduje.

Będzie to jednak działać z setAttribute().

jsFiddle.

Źródło

2011-12-08 05:20:24 alex

Sir, gdy ustawiam atrybut elementu html jako "niezdefiniowany", to nie działa i nadal przyjmuje poprzednie wartości. Czy możesz mi powiedzieć, dlaczego tak jest? –

podczas korzystania z elementu nazwa_elementu uzyskujesz dostęp do właściwości/tworzenia właściwości o nazwie "nazwa" i ustawiania jej wartości.

ale

podczas korzystania, element.setAttribute ('name', 'somename'), to są rzeczywiście ustawienie atrybutu 'name'.

IE8 i poniżej traktują właściwość i atrybut tak samo, błąd został naprawiony w IE9 i wyżej.
Safari, FireFox, Chrome traktuj własność i atrybutuj inaczej.

Zawsze możesz jednak utworzyć nową właściwość, jeśli chcesz to zrobić.

Źródło

2013-03-22 12:20:27 Nilesh

Częściowa odpowiedź ... ograniczona i nie wyjaśnia uzasadnienia problemu – Radiotrib

przedłużyć odpowiedzi dostarczonych przez niektórych innych ...

atrybut „name” jest uważany za ważny tylko DOM dla kilku konkretnych przedmiotów. Według https://developer.mozilla.org/en-US/docs/DOM/element.name te obiekty to:

<a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <input>, 
<map>, <meta>, <object>, <param>, <select>, and <textarea>

dla tych obiektów, które można ustawić, uzyskać i zmienić atrybut name korzystając object.name ALE NA JAKIKOLWIEK INNY DOM PRZEDMIOT atrybut „name” jest atrybut niestandardowy i muszą być tworzone za pomocą SetAttribute() lub przez dodanie go do deklaracji HTML. Po utworzeniu można uzyskać do niego dostęp za pomocą setAttribute() i lub możesz odnieść się do jego wartości bezpośrednio, korzystając z przykładu object.attributes.name.value, aby zapoznać się z przykładem na http://jsfiddle.net/radiotrib/yat72/1/. BTW - okno alertu obciążeniem jest zamierzona - sprawdzić kod, aby zobaczyć, dlaczego ...

Źródło

2013-03-24 16:50:14 Radiotrib

<head> 
<script> 
function test($count) { 
document.getElementById("test1").setAttribute("name","file-upload_" + $count); 
} 
</script> 
</head> 
<body> 

<p>some content</p> 
<input id="test1" type="file" name="file-upload" id="file-upload" /> 
<p>some other content</p> 
<script>test(1);</script> 
</body>

Źródło

2013-09-30 01:54:10 OBV

(Próbując wyjaśnić część powyższego postu lepiej oddzielnie, ponieważ jest on już poszedł do ujemnej ocenie, a wiara w to stanowisko będzie mniejsza. Pomóżcie ulepszyć to dalej.)

*** property

Podczas korzystania, element.name, masz dostępu do istniejącej property o nazwie "nazwa" lub ustawienie jej wartość.

Example 1: 
var div1 = document.getElementById("div1"); 
div1.textContent = "2";

*** attribute

ale podczas używania, element.setAttribute('name','someName'), jesteś rzeczywiście ustawienie attribute nazwie 'name'. Ten atrybut może być istniejąca nieruchomość zbyt

Example 2: 
var h1 = document.getElementById("H1"); 
h1.setAttribute("class", "democlass"); 

Example 3: 
var d = document.getElementById("d1"); 
d.setAttribute("name1", "value1");

Źródło

2015-06-05 11:58:42

podczas korzystania, element.name, masz dostęp do właściwości/tworzenie właściwość o nazwie „nazwa” i ustawienie jej wartość.

Źródło

2018-01-28 19:04:55

Javascript: setAttribute() v.s. element.attribute = wartość ustawić „name” Atrybut

Odpowiedz

Powiązane problemy