質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.45%

  • JavaScript

    10889questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    5987questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    673questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Onsen UI

    209questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

element.setAttributeによる属性の設定

解決済

回答 2

投稿 2017/09/12 18:04 ・編集 2017/09/12 18:12

  • 評価
  • クリップ 0
  • VIEW 103

tera_infinity

score 20

前提・実現したいこと

現在Monacaを用いてアプリ開発の勉強をしていたのですが、element.setAttributeを用いてエレメントの属性を設定する動作を実装した際に、別のページにあるエレメントの属性を設定することができませんでした。
勉強不足な点もあるのですが、仕様なのか実装方法が悪いのかわからない状況です。

該当のソースコード

page2にあるid="sample"のclass属性をnoからyesへ変更するソースです。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <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'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ons-navigator id="nav" page="page1.html"></ons-navigator>

<template id="page1.html">
    <ons-page>
        <ons-button id="push_css" onclick="document.getElementById('nav').pushPage('page2.html'),push_bt()">pushpage</ons-button>
    </ons-page>
</template>

<template id="page2.html">
    <ons-page>
        <div id="sample" class="no">属性変更</div>
        <ons-button id="can_bt" onclick="document.getElementById('nav').popPage()">poppage</ons-button>
    </ons-page>
</template>

<script type="text/javascript">
function push_bt(){
    var element = document.getElementById("sample"); 
    element.setAttribute("class", "yes");
    alert("change_txのrel属性は「"+element.getAttribute("class")+"」です");
}
</script>
</body>
</html>


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

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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <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'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ons-navigator id="nav" page="page1.html"></ons-navigator>

<template id="page1.html">
    <ons-page>
        <ons-button id="push_css" onclick="document.getElementById('nav').pushPage('page2.html'),push_bt()">pushpage</ons-button>

        <div id="sample" class="no">属性変更</div>
    </ons-page>
</template>

<script type="text/javascript">
function push_bt(){
    var element = document.getElementById("sample"); 
    element.setAttribute("class", "yes");
    alert("change_txのrel属性は「"+element.getAttribute("class")+"」です");
}
</script>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

 template要素 (template element)

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要素の子にノードは存在せず、getElementByIdquerySelectorAll 等の検索範囲に存在しない事になります。

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

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

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

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

console.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 を持つ要素ノードを検索できるはずです。

Re: tera_infinity さん

投稿 2017/09/13 23:46

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/15 15:48

    回答ありがとうございます!
    詳しく説明してくださって助かります。どちらの実装方法もまだ試したことがなかったので、実際に試してみようと思います。

    キャンセル

0

テンプレートが同期処理になっていないからでは?
promiseなどで処理順を指定してみてはどうでしょう?

投稿 2017/09/13 09:46

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/15 15:49

    回答ありがとうございます!
    promiseは使ったことがないので勉強しつつ実装してみようと思います

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.45%

関連した質問

  • 解決済

    ons-tabの非表示

    前提・実現したいこと MonacaでOnsenUI v2を使ったアプリを製作していて、ons-tabを用いてページの切り替えを行っているのですが、ons-tab内のページでpus

  • 解決済

    タイトルやメニューはそのままそれ以下の部分を変更したいです。

    前提・実現したいこと 現在、Onsen U1 V2 Angular1 Splitterを使って開発をしようとしているのですが、ページにボタンを作り、クリックすると画面の表示内容を

  • 解決済

    タブバーをすべてのページのbottomに固定したい

    MonacaとonsenUIを使って、勉強しつつハイブリッドアプリを制作しています。 タブバーをすべてのページのbottomに固定したいのですが、やり方がよくわかりません。

  • 解決済

    ons-navigatorでのページ遷移

    前提・実現したいこと ons-navigatorでページを切り替えた後、ons-tabbarのons-tab要素を非表示にし、ons-toolbarにons-back-butto

  • 解決済

    OnsenUIコンポーネントの値保持

    前提・実現したいこと navigatorでpopPage()した後も、遷移前のpageの<ons-input type="checkbox">の値を保存しておきたいのですが、何か良

  • 解決済

    monaca onsen ui ver2 で ng-repeat を使用したい。

    前提・実現したいこと お世話になります。 monaca で ng-repeatを使用したく、 下記のページを参考にしてmonaca-onsen navigation にて プロ

  • 解決済

    指定時刻に画面遷移をする方法が分からない

    前提・実現したいこと MonacaとOnsenUIを用いてアプリ開発を勉強しているのですが、ピッカーなどでユーザーに時間を入力してもらった後に、その時刻になったら画面遷移をする。と

  • 解決済

    Onsen UI のons-tabとons-navigatorを組み合わせて使いたい

    以下のような画面遷移を実現したいと思っています。 タブで画面を大きくわけたい。 例えば、 タブ1(分類1)、タブ2(分類2)、タブ3(分類3) タブ1(分類1)の中で画面を

同じタグがついた質問を見る

  • JavaScript

    10889questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    5987questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Monaca

    673questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Onsen UI

    209questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。