Definir o atributo personalizado usando JavaScript

Estou usando o DynaTree (https://code.google.com/p/dynatree), mas estou tendo alguns problemas e espero que alguém possa ajudar ..

Estou exibindo a árvore na página como abaixo:

<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>

No entanto, estou tentando mudar o ícone em um item, não importa se ele está selecionado ou não apenas usando JavaScript .

o novo ícone que desejo usar é o base2.gif

Eu tentei usar o seguinte, mas não parece funcionar:

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

alguém sabe o que posso estar fazendo de errado?

Use o setAttributemétodo:

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

Mas você realmente deveria usar dados seguidos de um travessão e com sua propriedade, como:

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

E para fazer isso em JS use a datasetpropriedade:

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

Use um conjunto de dados

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

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

então, no seu caso para definir dados:

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

Para as pessoas que vêm do Google, esta questão não é sobre atributos de dados - o OP adicionou um atributo não padrão ao seu objeto HTML e perguntou como configurá-lo.

No entanto, você não deve adicionar atributos personalizados a seus propriedades - você deve usar atributos de dados - por exemplo, OP deveria ter usado data-icon, data-url, data-target, etc.

Em qualquer caso, verifica-se que a maneira como você define esses atributos via JavaScript é a mesma para os dois casos. Usar:

ele.setAttribute(attributeName, value);

para alterar o atributo fornecido attributeNamepara valuepara o elemento DOM ele.

Por exemplo:

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

Observe que você também pode usar .datasetpara definir os valores dos atributos de dados, mas como @racemic aponta, é 62% mais lento (pelo menos no Chrome no macOS no momento da escrita). Portanto, eu recomendaria usar o setAttributemétodo.