タグ：DOM：記事一覧

JavaScriptでDOM要素にクラスを追加したり削除する方法と、複数のクラスを一括で追加・削除する方法を紹介します。

JavaScriptで、DOM要素が単一または複数の特定クラスを持っているかどうかを確認する方法を紹介します。

以前、JavaScriptでテキストをクリップボードにコピーする方法を紹介しました。 今回はこの方法の使用例として、動的にクリップボードへコピーするボタンを追加するコードを作成してみます。

JavaScriptでDOM要素を操作する時は、DOM要素が構築されるのを待つ必要があります。 しかし外部スクリプトを読み込む場合、属性によっては実行されるタイミングがズレた結果、上手く動作しないことがあります。そこでasync・defer属性を含めて、DOM要素の構築後に処理を開始できるような仕組みをお伝えします。

僕は今までDOM要素に文字列をセットするときinnerTextを使っていましたが、最近textContentも同じことができると知りました。そこで詳しくネットで調べてみるとかなり古い情報が多く、現在の状況とマッチしていないようです。そこで今回は、innerTextとtextContentおよびinnerHTMLにおいて、今現在(2020/6)はどのような違いがあるのかをお伝えします。

ブラウザのtextarea要素でテキストが選択されたとき、何らかの処理をおこないたいケースが時々あります。今回は、その方法についてお伝えします。

CSSのプロパティ名をJavaScriptで使用する場合、キャメルケースという表記方法を用いることがあります。そこで、正規表現を使用してプロパティ名とキャメルケースの相互変換をしてみます。

JavaScriptでDOM操作をおこなっているとgetElementsByClassNameメソッドで取得した要素をforEachで処理したいときがあります。しかし実際にコードを作成して実行するとエラーになってしまいます。ここではその理由と、対処方法についてお伝えします。

僕がWebツールを作成しているとき、吹き出しを動的に作成する必要がありました。しかし、これが意外と難しい。beforeやafterなどの疑似要素を使用しているのがネックになっているようなので、対処方法を考えてみました。

動的にDOM要素を追加したとき、その要素をユーザーの目に入る位置に表示したいことがあります。今回は、その方法をお伝えします。

JavaScriptでDOM要素を操作する場合、addEventListener()メソッドを使用します。このメソッドの第三引数にtrueをセットしているコードをよく目にします。しかしtrueでもfalseでも同じように動作するので、どんな意味があるのかわからない人も多いのではないでしょうか。そこで今回は、addEventListener()メソッドの第三引数についてお伝えします。

ラジオボタンがクリックされて値が変更されたとき、onchange属性を使うと関数を呼び出すことができる。しかし選択しを増やすのはコピペでいいが、関数名を変えるときはとても面倒。というかon属性が嫌い。そこでJavaScriptでラジオボタンの変更を捕捉して、値を取得する方法をお伝えします。

addEventListenerで登録したイベントリスナーの引数は、targetとcurrentTargetというプロパティを持っています。どちらもイベントに関連したDOM要素を指していますが、どのような要素を指しているのかすぐに忘れてしまうのでメモしておきます。

URL.createObjectURL()を実行した後、URL.revokeObjectURL()を実行する必要があります。という説明を見たのだけれど、理由がわからなかったので調べてみました。

今回はブラウザに画像ファイルをドラッグ＆ドロップして、画像のリストを作成します。その後、リストから選択した画像をキャンバスに描画します。

今回はブラウザにテキストファイルをドラッグ＆ドロップして、その内容を16進数で表示してみます。その際、大きなファイルを読み込んだときブラウザの動作を重くする可能性を考慮して、分割読み込みを実装してみます。