facebook twitter hatena line email

「Monaca/DOM操作」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(html書き換え)
行1: 行1:
 
 
==html書き換え==
 
==html書き換え==
 
index.html
 
index.html
行12: 行11:
 
</head>
 
</head>
 
<body onload="init();" id="stage" class="theme">
 
<body onload="init();" id="stage" class="theme">
 +
<div id="helloid1">Helloid1</div>
 
<div class="helloclass1">Helloclass1</div>
 
<div class="helloclass1">Helloclass1</div>
<div id="helloid1">Helloid1</div>
 
 
</pre>
 
</pre>
  
行22: 行21:
 
}
 
}
 
var deviceInfo = function() {
 
var deviceInfo = function() {
 +
    // idのタグを更新
 
     document.getElementById("helloid1").innerHTML = "Helloid2";
 
     document.getElementById("helloid1").innerHTML = "Helloid2";
 +
    // classのタグを更新(何故か、こちらは更新されなかった)
 
     document.getElementsByClassName("helloclass1").innerHTML = "helloclass2";
 
     document.getElementsByClassName("helloclass1").innerHTML = "helloclass2";
    console.log("hello=" + document.getElementById("helloid").innerHTML);
 
 
};
 
};
 
</pre>
 
</pre>
  
==タグ内のidのtext取得==
+
onload()前にhtmlを更新する処理を記述しても更新されないので注意。
<pre>
+
<p id="hello1">Hello1</p>
+
<script>
+
  console.log(document.getElementById("hello1").textContent); // Hello1
+
</script>
+
</pre>
+
 
+
==タグ内のclassのtext取得==
+
<pre>
+
<p class="hello2">Hello2</p>
+
<script>
+
  console.log(document.getElementsByClassName("hello2").textContent); // Hello1
+
</script>
+
</pre>
+

2020年5月22日 (金) 11:50時点における版

html書き換え

index.html

<head>
    <script>
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            console.log("PhoneGap is ready");
        }
    </script>
</head>
<body onload="init();" id="stage" class="theme">
<div id="helloid1">Helloid1</div>
<div class="helloclass1">Helloclass1</div>

main.js

function init() {
    document.addEventListener("deviceready", deviceInfo, true);
}
var deviceInfo = function() {
    // idのタグを更新
    document.getElementById("helloid1").innerHTML = "Helloid2";
    // classのタグを更新(何故か、こちらは更新されなかった)
    document.getElementsByClassName("helloclass1").innerHTML = "helloclass2";
};

onload()前にhtmlを更新する処理を記述しても更新されないので注意。