Javascript attributes ile hasAttribute arasındaki fark nedir?

Javascriptteki attribute,hasAttribute,setAttribute kavramlarını tam anlayamadım.Anlıyorum setattribute ile yeni bir değer ekliyoruz.hasattribute ile değer var mı diyer soruguluyoruz.Ancak attribute ile de değer var mı diye sorgulamıyor muyuz?

Kısacası attribute ile hasAttribute arasındaki farklar nelerdir?

Bilenler açıklayabilirler mi?

Atrributes, özellikler / Öznitelik diye çevirebiliriz, elementin sahip olduğu özelliklere ait bir koleksiyon döndürür. 

Burada detaylı bilgi var: https://uzmanimakademi.net/html/html-oznitelik

Mesela, length, name gibi ifadeler özelliklerden bir kaçıdır. HTML'de etiketler (tag) özelliklere sahip olabilir.  Mesela a etiketi href, rel, target gibi özelliklere sahiptir.

Javascript Element.attributes:

bu ifade elementin sahip olduğu tüm özelliklerin listesini döndürür. Mesela bir a etiketin var bu a etiketinin sahip olduğu tüm özellikleri görmek istiyorsan bu ifade ile alabilir ve bir döngü ile özellikler arasında gezinebilirsin.

Aşağıda Mozilla sitesinden aldığım bir örnek var. Burada belge içinde bir paragraf yakalanıyor. Daha sonra paragraf bir özelliğe sahip mi hasAttributes metodu ile kontrol ediliyor. Bu element p, a gibi bir etiket olabilir. Element özelliklere sahipse döngü ile bu özellikler yazdırılıyor.

<script>
    function listAttributes() {
       const paragraph = document.getElementById("paragraph");
       const result = document.getElementById("result");

       // Paragraf özelliğe sahip mi kontrol ediyoruz, paragrafta en az 1 özellik varsa burası true olur.
       if (paragraph.hasAttributes()) {
         let output = "ilk paragrafın özellikleri:\n";
         for (const attr of paragraph.attributes) {
           output += `${attr.name} -> ${attr.value}\n`;
         }
         result.textContent = output;
       } else {
         result.textContent = "Gösterilecek özellik bulunamadı";
       }
    }
    </script>

Javascript Element.hasAttribute():

Bu ifade boolen değer döndürür (true veya false). Element parantez içerisinde verilen değere sahip mi onu kontrol ettiriyoruz.

const linkAnasayfa = document.getElementById("anasayfa");
if (linkAnasayfa.hasAttribute("name")) {
    // bir şeyler yap
}

Örnekte anasayfa Id değerine sahip elementin name adında bir attribute'u var mı bunu kontrol ediyoruz, varsa if ile bir şeyler yapmak istiyoruz.

Javascript element.setAttribute():

Bu ifade de bir elemente özellik ve özelliği değer atamak için kullanılıyor. Örnek

element.setAttribute("class", "koyurenk");

Bu ifade elementin class özelliğine koyurenk değerini atar.