JavaScriptで属性のみを追加したい

Question

Monacaを用いてアプリを開発しております。

OnsenUIでアプリ下部に付くタブバーを取り付けまして、タブバーの各ボタンを押すことで、それぞれのボタンに割り当てられているページを読み込んでスマホ画面に表示するという仕組みにしています。

コード的には、ボタンが押されることで<ons-tab>タグの最後に「active」という属性が追加され、この属性をもとにページの表示・非表示を切り替えているようです。

この「active」という属性を、ボタンによる操作で追加するのではなく、別途書いているJavaScript関数内から追加させたいと思っているのですが、属性と値（id="test"など）を追加したり削除したりする方法は分かるのですが、「active」という属性のみを追加させる方法が分かりません。

JavaScriptでHTMLの特定タグに属性のみを追加させる方法をご存知の方、よろしくお願いいたします。

<!--HTML-->
  <ons-page>
    <ons-tabbar position="auto" hide-tabs="false">
      <ons-tab label="Tab 1" page="tab1.html" active> <!--activeが付くと画面に表示される-->
      </ons-tab>
      <ons-tab label="Tab 2" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

Answer 1

初めに、私はMonacaを知りませんので、Monaca独自の仕様があれば、この回答は当てはまらない可能性があります。
あくまでも、「ブラウザが実装するJavaScript」の回答と解釈して下さい。
(Monaca独自の仕様はMonacaのリファレンスを確認する必要がありますし、DOMでなければこの回答は当てはまりません。)

HTML Standard

HTML Standard では属性値の存在しない記法を空属性構文と呼び、DOMの世界に移行する時に属性値が空文字として扱われます。

• 12.1.2.3 属性 - HTML Standard 日本語訳
• 【DOM基礎】ノードの取得／属性の取得・設定 - Qiita

DOM

DOMの世界では「属性値が存在しない状態」がありません。
HTMLにおいて空属性構文が存在すれば、HTML Standard の規定に従い、属性値が空文字として扱われます。
従って、「HTML文書において解釈されるDOMの世界」では下記2つの構文は等価であり、区別出来ません。

<p data-foo>foo</p>
<p data-foo="">foo</p>

この状態をDOMの世界で作り出すには setAttribute で空文字をセットすることになります。

document.querySelector('p').setAttribute('data-foo', '');

なお、ブラウザの開発者ツールが表現するDOMツリーにおいて、これを <p data-foo> と表現するか、<p data-foo=""> と表現するか、は各々の開発者ツールの仕様に依存します。
が、そこは問題ではなく、重要なのは「HTML Standardの影響下でDOMに変換された空属性構文は、DOMの世界で属性値が空文字として扱われる」ということです。

Re: agepan さん

Comments

[agepan]

ご回答ありがとうございます、大変勉強になります。
ということは「active」を入れるということは「active=""」を入れることと同じ事と言うことですね。従来のやり方で試してみようと思います。ありがとうございました。