JavaScript 短縮系

javascript

どうゆうことかまだ理解が進んでいない。document云々からエレメントで指定できる??
ちゃんと表示できるね・・・。
これらは、使えるがということでもあると理解する。Vueなどトランスパイルするときとか大規模開発で名前の重複namespaceなどで問題になると思われる。

ここに説明があった(多謝!)

以下、参照内容
divElement.hidden = true;

var divElement = document.getElementById(‘divElement’);

htmlでid属性を持つタグは、windowの同名のプロパティとして登録されるようです。
今回なら、ブラウザがhtmlをロードした後に自動的にwindow.divElementが作成され、
そこに対応するElementオブジェクトが登録されているようです。
windowは省略できるので、divElementと書くだけでその要素が取得できる訳です。

使用上の注意
javascriptでは、functionの内部の変数はその関数を抜けると参照されなくなるローカル変数ですが、ただ単に
var hako = ‘aa’;
のように宣言した場合はwindowオブジェクトにhakoというプロパティ名で登録されます。
もしさきに同名のプロパティがある場合はそれが上書きされてしまいます。
つまり、今回の場合は、もしjavascript上で

var divElement = ‘aa’;
と書いてしまうと、上書きされてしまいます。先ほどの例だとデモというようになります。
変数名とid名がかぶらないようにしましょう。
かぶる場合は、ちゃんとdocument.getElementById()関数を使うしかないです!

数字は上書きできない
idを数値にした場合は、上のワザが使えません!いや使えたらヤバいです

関数は上書きできない
例えばwindow.alert関数はidで上書きできません。できたらヤバいことになります。
この方法は、大規模開発ではお勧めしません。
しかし、決まった時間で開発する必要がある時などは時間短縮に効果があります。
使用上の注意を良く読んで使ってください!

<input type=”text” id=”txt” value=”abcd”>
<p id=”tx”></p>

<script>
//var a = document.getElementById(‘txt’).value;
var a =txt.value;

//document.getElementById(‘tx’).innerHTML = a;
tx.innerHTML = a;
</script>

function $(e) { return document.getElementById(e); }

と一文を追加するだけで

document.getElementById('hoge')

と書かなきゃいけないところを

$('hoge')

こんなに短くできるとあるが、どこかで見たような構文だな。そうjQueryだ!混乱するね。

No tags for this post.
タイトルとURLをコピーしました