タグ：DOM：記事一覧
以前、HTMLのselectタグからJavaScriptで値を取得したり、設定したりする方法を紹介しました。 今回は、multiple属性が付加され複数選択が可能なselectタグからJavaScriptで値を取得したり、設定したりする方法を紹介します。
DOM要素をid属性で取得する方法を紹介します。 さらに、複数のDOM要素を取得するときに見た目がスッキリとした処理方法を紹介します。
JavaScriptでDOM要素がブラウザのビュー内に入ったときに、動きを持たせて読者に興味を持たせたい。 そんなニーズが意外と多いです。そこで今回は、DOM要素が読者の目に入ったときにコールバックで通知を行う方法をお伝えします。
近年はWebサイトの読み込み時間短縮が重要になってきました。 そのため読み込み開始から終了までの時間をイベント毎に細かく調査して改善していく作業が必要です。 実際にはツールが公開されているのでそれを使用すればいいのですが […]
ふと、JavaScriptでオブジェクトのプロパティと値の一覧をテーブルタグを使ってブラウザ表示してみようと思いました。 動的な結果をブラウザ表示するとき、個々の値を変更することが多いです。 しかしオブジェクトにセットして一括で変更できたら、少し手間が省けるかもしれません。
JavaScriptはclass構文の導入でプロトタイプチェーンの階層を構築しやすくなりました。 生成されたオブジェクトは、各階層で継承したオブジェクトの名前を保持しています。今回はこの特徴を利用して、オブジェクトの階層（継承）を視覚的に表示してみます。
JavaScriptでブラウザの新規タブを開いてWebページを読み込む方法と、読み込み完了を待って、開いたWebページからのDOMなどの情報取得する方法を紹介します。
JavaScriptでアニメーションをおこなうとき、方法の一つとしてsetTimeout()またはsetInterval()で一定時間ごとのタイマー処理が考えられます。 しかしこれらの関数はブラウザでは効率が悪いので、Window.requestAnimationFrame()が推奨されます。そこで今回は、このメソッドについてお伝えします。
Webページのtextarea要素に文章が入力されているとき、JavaScriptを使って行番号でカーソルを移動させる方法をお伝えします。
JavaScriptでユーザー入力やWebAPI等から取得した文字をそのままブラウザで表示すると、リンクやスクリプト等のタグが紛れ込んで意図しない結果を招く可能性があります。 そのためタグを無害化するエスケープ処理を行うのですが、場合によってはそのまま表示できます。 少し混乱ぎみなので、整理してみます。
先日、JavaScriptでh2タグの前に目次に移動するリンクを挿入するスクリプトを作成して、今見てもらっているWebページに適用しました。 JavaScriptコードの参考になるかと思い、コードを公開します。 目次ではなくて、トップに移動などでも応用できると思います。
JavaScriptで新規ページを開くときはwindows.open()を使用します。 開いた後に条件が合えば、そのページの情報を取得したり、DOMを操作したりできます。今回は、その方法をお伝えします。
Webサイト上のリンクを見て、一目で外部リンクとわかるサイトって最近多いですよね。 僕もやろうと思いましたが、既存の記事を修正するのに時間がかかるためJavaScriptで動的に処理させることにしました。やることは、リンクが外部リンクかどうかを確認してクラス名を追加するだけです。 最終的に、次のような見た目になりました。
JavaScriptでaタグの属性（hrefとtargetおよびrel）の値を取得したり、書き換えたりする方法をお伝えします。
