Establecer atributo personalizado usando JavaScript

Estoy usando The DynaTree (https://code.google.com/p/dynatree) pero estoy teniendo algunos problemas y espero que alguien pueda ayudar.

Estoy mostrando el árbol en la página como se muestra a continuación:

<div id="tree">
        <ul>
            <li class="folder">Outputs
                <ul>
                    <li id="item1" data="icon: 'base.gif', url: 'page1.htm', target: 'AccessPage'">Item 1 Title
                    <li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title
                    <li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title
                    <li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title
                </ul>
        </ul>
    </div>

Sin embargo, estoy tratando de cambiar el ícono de un elemento sin importar si está seleccionado o no solo usando JavaScript .

el nuevo icono que quiero usar es base2.gif

He intentado usar lo siguiente, pero parece que no funciona:

document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";

¿Alguien sabe lo que podría estar haciendo mal?

Usa el setAttributemétodo:

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");

Pero realmente debería usar datos seguidos de un guión y con su propiedad, como:

<li ... data-icon="base.gif" ...>

Y para hacerlo en JS usa la datasetpropiedad:

document.getElementById('item1').dataset.icon = "base.gif";

Utilice el conjunto de datos

var article = document.querySelector('#electriccars'),
    data = article.dataset;

// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"

así que en su caso para configurar datos:

getElementById('item1').dataset.icon = "base2.gif";

Para las personas que vienen de Google, esta pregunta no se trata de atributos de datos: OP agregó un atributo no estándar a su objeto HTML y se preguntó cómo configurarlo.

Sin embargo, no debe agregar atributos personalizados a sus propiedades; debe usar atributos de datos - por ejemplo, OP debería haber utilizado data-icon, data-url, data-target, etc.

En cualquier caso, resulta que la forma de configurar estos atributos a través de JavaScript es la misma para ambos casos. Utilizar:

ele.setAttribute(attributeName, value);

para cambiar el atributo dado attributeNamea valuepara el elemento DOM ele.

Por ejemplo:

document.getElementById("someElement").setAttribute("data-id", 2);

Tenga en cuenta que también puede usar .datasetpara establecer los valores de los atributos de datos, pero como señala @racemic, es un 62% más lento (al menos en Chrome en macOS en el momento de escribir este artículo). Así que recomendaría usar el setAttributemétodo en su lugar.