getAttribute y setAttribute en JavaScript

TExtos de prueba:

<div id="ejemploid">Este es conenido del DIV con ID: "ejemploid"</div>                        
<div id="ejemplo" data-atributo-sin-valor class="miejemplo" style="background: white;color: gold;font-size: 18px;border: 1px dashed red;padding: 10px;">
    Este es conenido del DIV con ID: "ejemplo", Clase: "miejemplo"
</div>

<script type="text/javascript">

    //getAttribute y setAttribute en Javascript 
    /**
     * Test01:
     */
    //Prueba con la tipica getElementById()
    var testid = document.getElementById('ejemploid');//Poniendo en variable para escribir menos codigo
    var testid1 = testid.innerHTML;//Obteniendo el valor es como escribir: document.getElementById('ejemploid').innerHTML;
    alert('Resultado 01 del DIV con ID "ejemploid": ' + testid1);
    var testid2 = testid.innerHTML = 'Agregra este texto en el ID ejemploid';//Asignando valor
    alert('Resultado 02 del DIV con ID "ejemploid":  ' + testid2);



    /**
     * Test02:
     */
    //Obtener valor con la funcion nativa de JS: getAttribute
    var elemento = document.querySelector('#ejemplo');
    var test01 = elemento.getAttribute('id'); //muestra: "ejemplo"
    var test02 = elemento.getAttribute('data-atributo-que-no-existe'); //muestra: null
    var test03 = elemento.getAttribute('data-atributo-sin-valor'); //muestra: ""
    alert('Resultado del DIV con ID "ejemplo": ' + 
elemento.innerHTML);
    alert('Resultado 01 del DIV con ID "ejemplo": ' + test01);
    alert('Resultado 02 del DIV con ID "ejemplo": ' + test02);
    alert('Resultado 03 del DIV con ID "ejemplo": ' + test03);


    /**
     * Test03:
     */
    //Asignar valor con la funcion nativa de JS: setAttribute
    var elemento = document.querySelector('#ejemplo');
    elemento.setAttribute("data-atributo-que-no-existe", "Valor para ese atributo");
    // Comprobación
    alert('Comprobación: ' + elemento.getAttribute("data-atributo-que-no-existe")); // "Valor para ese atributo"


    /**
     * Test04:
     */
    //Atributos con una propiedad para sí mismo
    //Ojo, aunque getAttribute y setAttribute funcionarán, los elementos tienen ciertas propiedades específicas para acceder a algunos atributos. Aparte de style (ver abajo), aquí tenéis algunos de las propiedades más frecuentes:
    var elemento = document.querySelector('#ejemplo');
    // class
    elemento.className // "miejemplo"
    alert('elemento className, comprobacion 01: ' + elemento.className)//comprobación
    elemento.className = "miejemplo ejemplo-especial"; // Ahora el elemento tendrá las clases "miejemplo" y "ejemplo-especial"
    alert('elemento className, comprobacion 02: ' + elemento.className)//comprobación

    // id
    elemento.id // "ejemplo"
    alert('elemento id, comprobación: ' + elemento.id)//comprobación


    //Esas son globales, y son siempre strings, aunque no estén definidos. Pero en elementos más específicos se pueden encontrar otros.
    //En elementos más específicos (como <a>, <img> e <input>) tenemos propiedades adicionales (no están todas pero sí las más importantes):
    //- En <a> tenemos href, target y title
    //- En <img> tenemos src y alt
    //- En <input> están value y type…



    /**
     * Test05:
     */
    //El atributo style
    //- Se accede a él de forma específica (elemento.style), pero no devuelve una string, sino un ElementCSSInlineStyle (para el caso, un objeto).
    //- Ese objeto tiene tantas propiedades como propiedades css acepta el navegador
    //- Los nombres de esas propiedades son el de la propiedad (excepto float que es una palabra reservada), o están en camelCase si tienen guiones elemento.style.borderRadius. Para hacer la conversión CSS/Javascript reemplazad todos los guiones y la letra siguiente por sólo la letra en mayúscula (ej: -moz-border-radius › MozBorderRadius)
    var elemento = document.querySelector('#ejemplo');
    alert('Comprobacion de style color: '+elemento.style.color);
    alert('Comprobacion de style font-size: '+elemento.style.fontSize);                         
</script>