var elements = document.getElementsByTagName(name);上記はelementsの変数に、getElementsByTagNameで取得した要素を格納しています。
nameに取得（検索）したい要素を指定します。例えばh1タグを検索する場合はこうなります。
var elements = document.getElementsByTagName(“h1”);
HTML文書のタグを全部取得するなら、そのままgetElementsByTagNameでいいかと思いますが、特定の子要素内のタグを検索したい場合は、特定の子要素を指定してからgetElementsByTagNameを指定すると良いでしょう。
以下は、specialのclass IDを持つ特定の子要素を指定した後に、<p>タグの要素をgetElementsByTagNameで取得しているコードです。
<body>
<p>これは取得したくない</p>
<p>これは取得したくない</p>
<div id="special>
<p>取得したい要素</p>
<p>取得したい要素</p>
<p>取得したい要素</p>
</div>
</body>
<script>
var special = document.getElementById('special');
var specialParas = special.getElementsByTagName('p');
</script>上記は「<p>これは取得したくない</p>」を避けて、specialの子要素内の<p>タグを取得しています。
タグの要素名の取得は他のメソッドでも可能です。例えばgetSelectorAllは、似たように複数の要素名を取得することが可能です。
以下はページ内の全てのh1タグを取得する構文です。
var elements = document.getSelectorAll(“h1”);
getSelectorAllでは、classを取得する場合は（.ドット）,IDを取得する場合は（#）を前につけるなどルールは異なりますので、事前に確認しておきましょう。
getElementsByTagNameはHTMLコレクションである（生きているともいう）ので、元のDOMが変更された場合、取得する要素は変更されます。（更新されたら自動で同期される）
例えば、getElementsByTagNameで、要素をjavascriptで削除した場合は、削除下状態の要素が取得できます。
getElementsByTagNameは取得要素が変更された場合は同期されますが、同じ用途でよく使われるgetSelectorは同期されません。変更前の情報を取得したい場合はgetSelectorを使うと良いでしょう。
getElementsByTagNameはNodeListを返します。そのため、取得した要素が1つであっても、要素の取得はarrayのデータ取得のように、[0]の指定が必要です。
document.getElementsByTagName("h1")[0];上記は取得したh1の中で1番最初の要素を返します。
getElementsByTagNmeについて説明しました。間違いやすい注意点や構文をしっかり押さえておきましょう。教科書的な情報は以下を参考にしてみると良いでしょう。
The post getElementsByTagName() 要素取得方法と2つの注意点 first appeared on 知ってほしいWebのあれこれ.]]>arc()メソッドとは２次元の描写で円を描く際に使います。またarc()メソッドで円を描写するためには、以下の引数6つを指定します。
<canvas id="circle" height="320" width="320" style="background-color:gray;">円を描写</canvas>
<script>
const canvas = document.getElementById("circle");
const ctx = canvas.getContext("2d");
ctx.arc(100,200,100,Math.PI*2,Math.PI,false);
ctx.fill();
</script>
The post canvasのarc()メソッド6つの引数と使うときの注意点 first appeared on 知ってほしいWebのあれこれ.]]>
prototype（プロトタイプ）とは、「オブジェクトに存在する特別なプロパティ」で、「コンストラクター関数と共に使う」ものです。
例えばこんなコンストラクター関数があります。
function Person(name, age) {
this.name = name;
this.age = age;
}
const john = new Person('John', 37);
const tom = new Person('Tom', 24);このコンストラクター関数にプロトタイプのプロパティを使うためには、コンストラクター関数「Person」に「prototype」を付けてアクセスできます。（この「prototype」は特別なプロパティです。）そして、このプロトタイプにメソッドを追加することができます。
function Person(name, age) {
this.name = name;
this.age = age;
}
//以下がprototypeを用いてメソッドを追加
Person.prototype.hello = function(){
console.log('hello ' + this.name);
}
const john= new Person('John', 37);
const tom = new Person('Tom', 24);上記のようにprototypeを用いることでインスタンス化したオブジェクト(johnやtom)にhelloというメソッドを渡すことができます。
以下の様に、すなわち「john」のオブジェクトにhelloメソッドを実行する「john.hello()」と「hello John」を表示することができます。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.hello = function(){
console.log('hello ' + this.name);
}
const john = new Person('John', 37);
const tom = new Person('Tom', 24);
// johnのオブジェクトでhelloメソッドを実行する
john.hello();
// 実行結果は「hello John」となる
ふと思ったのだが、コンストラクター関数にメソッドを入れてはいけないかと思った訳だが、結論から言うとプロトタイプの方が処理の面からよさそうということが分かった。例えば、以下の様にコンストラクター関数にメソッドを入れることもできる。
function Person(name, age) {
this.name = name;
this.age = age;
// コンストラクター関数にhelloメソッドを入れても結果は同じ
this.hello = function(){
console.log('hello '+ this.name);
}
}
const john = new Person('John', 37);
const tom = new Person('Tom', 24);
john.hello();これでも実行結果は一緒なので、何ら問題はない。
ではなんでプロトタイプを使うのか？というと、プロトタイプとプロトタイプではない場合でメモリ処理に違いがあるからです。
プロトタイプはあくまで参照なので、格納されているプロパティは同じ関数を参照しています。一方、プロトタイプを使わない処理は、インスタンスを生成する度（john.hello()やtom.hello()を生成する度）にhelloという関数を追加する必要があるため、プロトタイプに比べてメモリを多く消費することになります。
つまり、効率的にプログラムを動かす場合は、プロトタイプの方が良いという話でした。
おさらいですが、コンストラクター関数からインスタンス化した時には、prototypeの参照が「__proto__」がコピーされます。都度処理を促すコードなのではなく、効率的なメモリ処理にするため、プロトタイプを上手く使いましょう。
The post JSのコンストラクター関数のprototype（プロトタイプ）とは？どんな時に使ったらいいか。 first appeared on 知ってほしいWebのあれこれ.]]>どちらも基本的には非同期処理になるが、マクロタスクとマイクロタスクのそれぞれにタスクが存在する場合、マイクロタスクの方が優先的に実行される。
マクロタスクとマイクロタスクのそれぞれにタスクがある場合、マイクロタスクに順番が回ってくる。順番が回ってきたマイクロタスクは全てのジョブを実行する。マイクロタスクのジョブが全て完了したら、マクロタスクに実行フェーズが移る。
マクロタスクは順番が回ってきたら1つずつタスクを実行する。マクロタスクにマイクロタスクがある場合は、マイクロタスクを全て実行する。マクロタスクが終了したら、その次のマクロタスクを実行する。
The post JavaScriptの非同期で理解が必要なマクロタスクとマイクロタスクの実行順番と関数 first appeared on 知ってほしいWebのあれこれ.]]>