element.setAttributeによる属性の設定

###前提・実現したいこと
現在Monacaを用いてアプリ開発の勉強をしていたのですが、element.setAttributeを用いてエレメントの属性を設定する動作を実装した際に、別のページにあるエレメントの属性を設定することができませんでした。
勉強不足な点もあるのですが、仕様なのか実装方法が悪いのかわからない状況です。
###該当のソースコード
page2にあるid="sample"のclass属性をnoからyesへ変更するソースです。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12<ons-navigator id="nav" page="page1.html"></ons-navigator>
13
14<template id="page1.html">
15    <ons-page>
16        <ons-button id="push_css" onclick="document.getElementById('nav').pushPage('page2.html'),push_bt()">pushpage</ons-button>
17    </ons-page>
18</template>
19
20<template id="page2.html">
21    <ons-page>
22        <div id="sample" class="no">属性変更</div>
23        <ons-button id="can_bt" onclick="document.getElementById('nav').popPage()">poppage</ons-button>
24    </ons-page>
25</template>
26
27<script type="text/javascript">
28function push_bt(){
29    var element = document.getElementById("sample"); 
30    element.setAttribute("class", "yes");
31    alert("change_txのrel属性は「"+element.getAttribute("class")+"」です");
32}
33</script>
34</body>
35</html>

上記のソースのように別のページの属性を変更しようとすると何も反応しません。

下記のソースのようにボタンとelement.setAttributeを同一のページに実装すると属性の変更ができました。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12<ons-navigator id="nav" page="page1.html"></ons-navigator>
13
14<template id="page1.html">
15    <ons-page>
16        <ons-button id="push_css" onclick="document.getElementById('nav').pushPage('page2.html'),push_bt()">pushpage</ons-button>
17    
18        <div id="sample" class="no">属性変更</div>
19    </ons-page>
20</template>
21
22<script type="text/javascript">
23function push_bt(){
24    var element = document.getElementById("sample"); 
25    element.setAttribute("class", "yes");
26    alert("change_txのrel属性は「"+element.getAttribute("class")+"」です");
27}
28</script>
29</body>
30</html>
31

行動規範の内容に同意します

回答2件

ベストアンサー

template要素 (template element)

4.12.3 The template element - HTML Standard

The template contents of a template element are not children of the element itself. Instead, they are stored in a DocumentFragment associated with a different Document without a browsing context so as to avoid the template contents interfering with the main Document. (For example, this avoids form controls from being submitted, scripts from executing, and so forth.) The template contents have no conformance requirements.

機械翻訳「テンプレート要素のテンプレート内容は、要素自体の子要素ではありません。その代わりに、テンプレートの内容がメイン文書と干渉しないように、閲覧コンテキストなしで別のドキュメントに関連付けられたDocumentFragmentに格納されます。（たとえば、これにより、フォームコントロールの送信、スクリプトの実行などが回避されます）。テンプレートのコンテンツには、適合要件はありません。」

従って、template要素の子にノードは存在せず、getElementById, querySelectorAll 等の検索範囲に存在しない事になります。

JavaScript
1console.log(document.querySelector('template').childNodes.length);  // 0

template要素の役割は、雛形となるDOMを生成する事にあり、DOMツリー上にそれが存在する場合、「複製」ではなく、「移動」となってしまう可能性が考慮されているものと思われます。
一応、template要素ノードの content プロパティから DocumentFragment ノードを参照できる為、子を辿っていけば、当該要素ノードを参照する事は可能です。

HTML
1<template id="page1.html">
2  <ons-page>
3    <ons-button id="push_css" onclick="document.getElementById('nav').pushPage('page2.html'),push_bt()">pushpage</ons-button>
4    <div id="sample" class="no">属性変更</div>
5  </ons-page>
6</template>
7<script>
8console.log(document.getElementById('page1.html').content.firstElementChild.firstElementChild);
9</script>

雛形からノードに落とし込む場合は、document.importNode() を使います。

JavaScript
1console.log(document.importNode(document.getElementById('page1.html').content).getElementById('push_css'));

雛形の生成から始めるのなら、template要素ノードの生成から始めるべきだと思います。

別のページをノードを操作する

上記のソースのように別のページの属性を変更しようとすると何も反応しません。

Monaca を知らない為、どういう構成になっているのかがソースから読み取れませんが、別の文書には別の document が存在するはずなので、当該 document を参照する方法を探してください。
page1.html 内で宣言する document.getElementById は page1.html 内にあるDOMノードしか検索できません。
例えば、page2文書の document オブジェクトが page2Document であるならば、page2Document.getElementById で page2文書内の id を持つ要素ノードを検索できるはずです。