苦学楽学塾 ホームページ
最終更新日：2025年1月4日
HTMLの<p>とか、<div>，<span>，<img>のようなタグに対応するNodeオブジェクトをelementオブジェクトと言います。Nodeオブジェクトの中には、elementオブジェクト以外のもの、文字列などが含まれているので注意してください。elementオブジェクトには、以下のようなメソッドがあります。
element.after(node1, node2, ･･･, nodeN)
elementの親の持つ子ノードの中で、element以降に、node1～nodeNを挿入します。nodeは、文字列でもOKです。
element.append(node1, node2, ･･･, nodeN)
elementの親の持つ子ノードの末尾以降に、node1～nodeNを挿入します。nodeは、文字列でもOKです。
element.click()
element上での疑似的なマウス・クリックを実行する関数です。onclickプロパティに設定されるか、addEventListener()メソッドで設定されたイベントハンドラが起動します。
element.before(node1, node2, ･･･, nodeN)
elementの親の持つ子ノードの中で、elementの前に、node1～nodeNを挿入します。nodeは、文字列でもOKです。
element.createTextNode(string)
<div>～</div>，<span>～</span>，<label>～</label>に書かれる文字列をテキスト・ノードと言います。タグ要素とは区別されます。文字列をHTMLとして画面に表示する際には、まず、親タグelementの子として以下のように文字列stringのテキスト・ノードを作ります。
string = "abcdefg";
text1 = element.createTextNode(string);
さらに、
element.appendChild(text1);
として、このtext1を親elementに接続します。
要素elementのプロパティには以下のようなものがあります。
element.innerHTML
element内の文字列記述を<b>や<br>タグのようなタグも文字列のまま取得設定します。
element.insertAdjacentHTML(pos, string);
elementが<p>abcde</p>となっているタグだとします。posには以下のどれかを指定します。
"beforebegin" <p>タグの前にstringを挿入します。
"afterbegin" <p>タグの直後にstringを挿入します。
"beforeend" </p>タグの直前にstringを挿入します。
"afterend" </p>タグの後ろにstringを挿入します。
element.hidden
trueのとき非表示、falseのとき表示です。
element.innerText
elementの開始タグと終了タグの間のテキストを抜き出したものを取得できます。テキスト内に<br>があると改行に変換されます。textContentプロパティでは<br>は無視されます。
element.inputMode
<input>要素で使います。以下のような属性値を設定取得します。
decimal：小数点を含む実数値、email：メール・アドレスの入力、none：設定しない、numeric：0～9のみで整数値を入力、text：ロケール(国・地域などの使用環境のこと)に合わせてテキスト入力、url：URLの入力
element.offsetHeight
elementのborder，padding，margin，水平スクロールバーを含めた高さを返します。
element.offsetLeft
親要素の左端から、elementの左上の点が水平方向にどれだけずれているかを返します。
element.offsetTop
親要素の上端から、elementの左上の点が垂直方向にどれだけずれているかを返します。
element.offsetWidth
elementのborder，padding，margin，垂直スクロールバーを含めた幅を返します。
element.offsetHeight
elementのborder，padding，margin，水平スクロールバーを含めた高さを返します。
element.offsetHeight
elementのborder，padding，margin，水平スクロールバーを含めた高さを返します。
element.style.XXXX
要素のstyle記述内の各プロパティXXXXの値の設定取得を行うことができます。
XXXXとしては、display, visibility, overflow, clip, cursor, cssFloat, clear, position, top, bottom, left, right, zIndex, width, height, margin, marginTop, marginBotton, marginLeft, marginRight, border, outline, background, backgroundColor, font, fontStyle, fontWeight, fontSize, color, textAlign, texIndentなど、CSSのstyle記述で使われるプロパティを指定できます。例えば、要素elementの文字色を赤に設定するのであれば、
element.style.color = "red";
とします。表示方法をinline-flexに設定するのであれば、
element.style.display = "inline-flex"
とします。
また、img要素のように、<img src="abc.gif" width="100" height="200">としてタグの属性で設定しているときに、画像の幅と高さを取得するには、element = document.querySelector("img");として、element.width，element.heightとします。<img src="abc.gif" style="width:100;height=200">としてスタイルを通している場合に画像の幅と高さを取得するには、element.style.width，element.style.heightとします。
element.tabIndex
form要素のような場合、マウス操作なしで、[TAB]キー、[Shift]+[TAB]キーの操作でform内要素を巡回させる(キーボード・ナビゲーションと言います)ときの、form内要素elementの順番を指定します。必ずしも連続した整数である必要はありません。負数を指定するとキーボード・ナビゲーションからは外れます。
element.title
要素のタイトルを表す文字列です。マウスがその要素の画面表示の上に来ると、ポップアップでこのタイトルを表示します。
element.translate
そのウェブページが翻訳されるとき、その要素、および子の要素を翻訳対象にするときにtrue，そのままにするときfalseです。
element.value
elementがテキストボックス要素(<input type="text">)、<textarea>要素の場合、入力された文字列が入っています。初期値の文字列を設定することもできます。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。