Pytanie Jak usunąć atrybut z elementu DOM za pomocą JavaScript?


Próbuję użyć javascript, aby usunąć atrybut z węzła DOM:

<div id="foo">Hi there</div>

Najpierw dodaję atrybut:

document.getElementById("foo").attributes['contoso'] = "Hello, world!";

Następnie usunę go:

document.getElementById("foo").removeAttribute("contoso");

Poza tym atrybut nadal tam jest.

Więc próbuję naprawdę usunąć to:

document.getElementById("foo").attributes['contoso'] = null;

A teraz jest null, która jest inna niż kiedy się zaczęła, co było undefined.

Jaki jest poprawny sposób usunięcia atrybutu z elementu?

Plac zabaw jsFiddle

Uwaga: Zamień atrybut contoso, z atrybutem required, a zrozumiesz co Jestem próbować do zrobienia.

Tabela stanu

                       foo.attributes.contoso  foo.hasAttribute("contoso")
                       ======================  ===========================
Before setting         undefined               false
After setting          Hello, world!           false
After removing         Hello, world!           false
After really removing  null                    false

10
2017-09-12 17:42


pochodzenie


możliwy duplikat Jak usunąć właściwość z obiektu javascript - cske
jsfiddle.net/7su7C/1 - cske
@ cske (i inni, którzy myślą, że jest duplikatem), nie mylisz usuwania property od JavaScript obiekt, z usunięciem attribute od DOM obiekt. Gdyby to był obiekt javascript, zadziałałby. - Ian Boyd
delete works (ale czystsze, aby użyć metod set / get) wygląda jak kaczka, pływa jak kaczka i znachorki jak kaczka, ... uzyskujesz dostęp do obiektów DOM (atrybutów wewnętrznych przeglądarki) za pomocą interfejsu javascript - cske


Odpowiedzi:


Nie używaj attributes kolekcja do pracy z atrybutami. Zamiast tego użyj setAttribute i getAttribute:

var foo = document.getElementById("foo");

foo.hasAttribute('contoso'); // false
foo.getAttribute('contoso'); // null

foo.setAttribute('contoso', 'Hello, world!');

foo.hasAttribute('contoso'); // true
foo.getAttribute('contoso'); // 'Hello, world!'

foo.removeAttribute('contoso');

foo.hasAttribute('contoso'); // false
foo.getAttribute('contoso'); // null, 

// It has been removed properly, trying to set it to undefined will end up
// setting it to the string "undefined"

14
2017-09-12 17:49



Czy gdzieś jest dostęp do obiektu DOM? .attributes kolekcji należy unikać? Jeśli tak, to mam świat kodu do ponownego przemyślenia. - Ian Boyd
@IanBoyd Nie jestem pewien żadnego konkretnego materiału referencyjnego. Nigdy nie pracowałem bezpośrednio z tym. Wiem jednak, że są pewne niespójności. W IE8 podczas iteracji przez niego otrzymujesz wszystkie możliwe atrybuty podczas gdy IE9 otrzymujesz tylko te, które zostały zdefiniowane. Wydaje się również, że jest niezgodny z removeAttribute sądząc po zachowaniu, które opisujesz w swoim pytaniu. - Paulpro
@Paulpro, dlaczego używasz foo.hasAttribute('x') zamiast foo.x === undefined? - Pacerier
foo.x jest właściwością, a nie atrybutem i może nie mieć takiej samej wartości foo.get attribute( 'x' ) - Paulpro