要素ノード
導入
「Element」ノード オブジェクトは、Web ページの HTML 要素に対応します。各 HTML 要素は、DOM ツリー上の「Element」ノード オブジェクト (以下、要素ノードと呼びます) に変換されます。
要素ノードの nodeType 属性はすべて 1 です。
var p = document.querySelector('p');
p.nodeName // "P"
p.nodeType // 1
Element オブジェクトは Node インターフェイスを継承するため、Node のプロパティとメソッドは Element オブジェクト内に存在します。
さらに、異なる HTML 要素は異なる要素ノードに対応し、異なるコンストラクターを使用して異なる要素ノードを生成します。たとえば、<a> 要素のコンストラクターは HTMLAnchorElement()、<button> は HTMLButtonElement' です。 ()。したがって、要素ノードは 1 種類のオブジェクトではなく、さまざまな種類のオブジェクトであり、Element オブジェクトのプロパティとメソッドを継承するだけでなく、独自の固有のプロパティとメソッドも持ちます。
##インスタンスのプロパティ
要素プロパティの関連属性
(1)要素.id
Element.id プロパティは、指定された要素の読み取りおよび書き込み可能な id プロパティを返します。
// HTML コードは <p id="foo">
var p = document.querySelector('p');
p.id // "ふー"
id 属性の値は大文字と小文字が区別されることに注意してください。つまり、ブラウザは 2 つの要素 <p id="foo"> と <p id="FOO" の id 属性を正しく識別できます。 ">. でも、そんな名前はつけないほうがいいですよ。
(2)要素.タグ名
Element.tagName プロパティは、指定された要素の大文字のタグ名を返します。これは、nodeName プロパティの値と同じです。
//HTMLコードは
// <span id="myspan">こんにちは</span>
varspan = document.getElementById('myspan');
スパン.id // "マイスパン"
span.tagName // "スパン"
(3)Element.dir
Element.dir プロパティは、現在の要素のテキスト方向の読み取りおよび書き込みに使用されます。これは、左から右 ("ltr") または右から左 ("rtl") です。
(4)Element.accessKey
Element.accessKey プロパティは、現在の要素に割り当てられたショートカット キーの読み取りおよび書き込みに使用されます。
// HTMLコードは以下の通り
// <button accesskey="h" id="btn">クリック</button>
var btn = document.getElementById('btn');
btn.accessKey // "h"
上記のコードでは、btn 要素のショートカット キーは h であり、Alt + h を押すとそこにフォーカスが移動します。
(5)要素.ドラッグ可能
Element.draggable プロパティは、現在の要素がドラッグ可能かどうかを示すブール値を返します。このプロパティは読み取りおよび書き込み可能です。
(6)Element.lang
Element.lang プロパティは、現在の要素の言語設定を返します。このプロパティは読み取りおよび書き込み可能です。
// HTMLコードは以下の通り
// <html lang="ja">
document.documentElement.lang // "en"
(7)Element.tabIndex
Element.tabIndex プロパティは、タブ キーの移動中の現在の要素の順序を表す整数を返します。このプロパティは読み取りおよび書き込み可能です。
tabIndex 属性値が負の値 (通常は -1) の場合、Tab キーは要素を横断しません。正の整数の場合は、小さいものから大きいものへと順番に調べられます。 2 つの要素の tabIndex 属性の正の整数値が同じである場合、それらは出現順に走査されます。 「tabIndex」が正の整数であるすべての要素を走査した後、「tabIndex」が「0」に等しいか、属性値が不正な値であるか、「tabIndex」属性を持たないすべての要素を走査します。 Web ページに表示される順序。
(8)要素.タイトル
Element.title プロパティは、現在の要素の HTML 属性 title の読み取りおよび書き込みに使用されます。この属性は通常、マウスをホバーしたときにポップアップするテキスト プロンプト ボックスを指定するために使用されます。
要素ステータスの関連属性
(1)Element.hidden
Element.hidden プロパティは、現在の HTML 要素の hidden 属性の値を表すブール値を返します。このプロパティは読み取りおよび書き込み可能であり、現在の要素を表示するかどうかを制御するために使用されます。
var btn = document.getElementById('btn');
var mydiv = document.getElementById('mydiv');
btn.addEventListener('クリック', function () {
mydiv.hidden = !mydiv.hidden;
}、 間違い）;
このプロパティは CSS 設定とは独立していることに注意してください。現在の要素の可視性に関する CSS の設定は、Element.hidden には反映されません。つまり、この属性を使用して、現在の要素の実際の可視性を決定することはできません。
CSS 設定は Element.hidden よりも優先されます。 CSS で要素が非表示 (display: none) または可視 (visibility:visible) であると指定されている場合、Element.hidden は要素の実際の可視性を変更しません。つまり、このプロパティは、CSS が現在の要素の可視性を明示的に設定していない場合にのみ有効になります。
(2)Element.contentEditable、Element.isContentEditable
HTML 要素は contentEditable 属性を設定して、要素のコンテンツを編集可能にすることができます。
<div contenteditable>123</div>
上記のコードでは、<div> 要素に contenteditable 属性があるため、ユーザーは Web ページ上のこのブロックのコンテンツを編集できます。
Element.contentEditable プロパティは、contenteditable プロパティが設定されているかどうかを示す文字列を返します。 可能な値は 3 つあります。このプロパティは書き込み可能です。
"true": 要素の内容は編集可能です"false": 要素の内容は編集できません"inherit": 要素が編集可能かどうか、および親要素の設定を継承するかどうか
Element.isContentEditable プロパティはブール値を返します。これは、contenteditable プロパティが設定されているかどうかも示します。このプロパティは読み取り専用です。
要素.属性
Element.attributes プロパティは、現在の要素ノードのすべての属性ノードをメンバーとする配列のようなオブジェクトを返します。詳細については、「属性の操作」の章を参照してください。
var p = document.querySelector('p');
var attrs = p.attributes;
for (var i = attrs.length - 1; i >= 0; i--) {
console.log(attrs[i].name + '->' + attrs[i].value);
}
上記のコードは、「p」要素のすべての属性を反復処理します。
要素.クラス名,要素.クラスリスト
className 属性は、現在の要素ノードの class 属性の読み取りおよび書き込みに使用されます。その値は文字列であり、各「クラス」の間はスペースで区切られています。
classList 属性は、配列のようなオブジェクトを返します。現在の要素ノードの各 class は、このオブジェクトのメンバーです。
// HTML コード <div class="one two three" id="myDiv"></div>
var div = document.getElementById('myDiv');
div.クラス名
// "1 2 3"
div.classList
// {
// 0: 「1」
// 1: 「2」
// 2: 「3」
// 長さ: 3
// }
上記のコードでは、className プロパティはスペース区切りの文字列を返し、classList プロパティは配列のようなオブジェクトを指し、その length プロパティ (読み取り専用) は現在のクラスの class の数を返します。要素。
classList オブジェクトには以下のメソッドがあります。
add(): クラスを追加します。remove(): クラスを削除します。contains(): 現在の要素にクラスが含まれているかどうかを確認します。toggle(): クラスを現在の要素の内外に移動します。item(): 指定されたインデックス位置にあるクラスを返します。toString(): クラスのリストを文字列に変換します。
var div = document.getElementById('myDiv');
div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // myCssClass が存在しない場合は追加し、存在しない場合は削除します。
div.classList.contains('myCssClass'); // true または false を返します。
div.classList.item(0); // 最初のクラスを返します。
div.classList.toString();
クラスの追加時と削除時の「className」と「classList」の書き方を比較してみましょう。
var foo = document.getElementById('foo');
// クラスを追加
foo.className += '太字';
foo.classList.add('太字');
// クラスを削除する
foo.classList.remove('bold');
foo.className = foo.className.replace(/^bold$/, '');
toggle メソッドは 2 番目のパラメータとしてブール値を受け入れることができます。 「true」の場合は属性が追加され、「false」の場合は属性が削除されます。
el.classList.toggle('abc', boolValue);
// と同等
if (boolValue) {
el.classList.add('abc');
} それ以外 {
el.classList.remove('abc');
}
要素.データセット
Web ページ要素は、「data-」属性をカスタマイズしてデータを追加できます。
<div data-timestamp="1522907809292"></div>
上記のコードでは、<div> 要素にカスタムの data-timestamp 属性があり、要素にタイムスタンプを追加するために使用されます。
Element.dataset プロパティは、data- プロパティを読み書きできるオブジェクトを返します。
// <記事
// id="ふー"
// データ列 = "3"
// データインデックス番号 = "12314"
// data-parent="車">
// ...
// </記事>
vararticle = document.getElementById('foo');
Article.dataset.columns // "3"
Article.dataset.indexNumber // "12314"
Article.dataset.parent // "車"
「dataset」によって返される各属性は文字列であることに注意してください。
HTML コードでは、data- 属性の属性名には、英文字、数字、ハイフン (-)、ドット (.)、コロン (:)、およびアンダースコア (_) のみを含めることができます。これらは JavaScript に対応する dataset 属性名に変換されます。規則は次のとおりです。
- 先頭の
data-は省略されます。 - 接続詞の後に英語の文字が続く場合、接続行はキャンセルされ、文字は大文字になります。
- 他の文字は変更されません。
したがって、「data-abc-def」は「dataset.abcDef」に対応し、「data-abc-1」は「dataset["abc-1"]」に対応します。
「dataset」を使用して「data-」属性を読み書きすることに加えて、「Element.getAttribute()」および「Element.setAttribute()」を使用して、これらの属性を完全な属性名で読み書きすることもできます。
var mydiv = document.getElementById('mydiv');
mydiv.dataset.foo = 'バー';
mydiv.getAttribute('data-foo') // "バー"
Element.innerHTML
Element.innerHTML プロパティは、要素に含まれるすべての HTML コードと同等の文字列を返します。このプロパティは読み取りおよび書き込み可能であり、ノードのコンテンツを設定するためによく使用されます。 <HTML> 要素や <body> 要素を含むすべての要素ノードのコンテンツを書き換えることができます。
innerHTML 属性が空に設定されている場合、これはそれに含まれるすべてのノードを削除することと同じです。
el.innerHTML = '';
上記のコードは、el ノードを空のノードに変えるのと同じであり、el にもともと含まれていたすべてのノードが削除されます。
属性値を読み取るときに、テキスト ノードに &、より小さい記号 (<) およびより大きい記号 (>) が含まれている場合、innerHTML 属性はそれらをエンティティ形式 & に変換することに注意してください。 、 <、>。元のテキストを取得したい場合は、element.textContent プロパティを使用することをお勧めします。
// HTML コードは次のとおりです <p id="para"> 5 > 3 </p>
document.getElementById('para').innerHTML
// 5 > 3
書き込み時に、挿入されたテキストに HTML タグが含まれている場合、そのテキストはノード オブジェクトに解析されて DOM に挿入されます。テキストに <script> タグが含まれている場合、script ノードは生成できますが、挿入されたコードは実行されないことに注意してください。
var name = "<script>alert('haha')</script>";
el.innerHTML = 名前;
上記のコードはコンテンツにスクリプトを挿入しますが、スクリプトは実行されません。ただし、「innerHTML」には依然としてセキュリティ上のリスクがあります。
var name = "<img src=x onerror=alert(1)>";
el.innerHTML = 名前;
上記のコードでは、「alert」メソッドが実行されます。したがって、セキュリティ上の理由から、テキストを挿入する場合は、innerHTML の代わりに textContent 属性を使用するのが最善です。
要素.outerHTML
Element.outerHTML プロパティは、要素自体とすべての子要素を含む、現在の要素ノードのすべての HTML コードを表す文字列を返します。
// HTMLコードは以下の通り
// <div id="d"><p>こんにちは</p></div>
var d = document.getElementById('d');
d.outerHTML
// '<div id="d"><p>こんにちは</p></div>'
outerHTML 属性は読み取りおよび書き込み可能であり、値を割り当てることは現在の要素を置き換えることと同じです。
// HTMLコードは以下の通り
// <div id="container"><div id="d">こんにちは</div></div>
var コンテナ = document.getElementById('コンテナ');
var d = document.getElementById('d');
container.firstChild.nodeName // "DIV"
d.nodeName // "DIV"
d.outerHTML = '<p>こんにちは</p>';
コンテナ.firstChild.nodeName // "P"
d.nodeName // "DIV"
上記のコードでは、変数 d は子ノードを表します。その outerHTML 属性が再割り当てされると、内部の div 要素は存在しなくなり、p 要素に置き換えられます。ただし、変数 d は依然として元の div 要素を指しています。これは、置換された DIV 要素がメモリ内にまだ存在していることを意味します。
ノードに親ノードがない場合、「outerHTML」属性を設定するとエラーが報告されることに注意してください。
var div = document.createElement('div');
div.outerHTML = '<p>テスト</p>';
// DOMException: この要素には親ノードがありません。
上記のコードでは、div 要素には親ノードがないため、outerHTML 属性を設定するとエラーが発生します。
Element.clientHeight、Element.clientWidth
Element.clientHeight プロパティは、要素ノードの CSS 高さを表す整数値 (ピクセル単位) を返します。これはブロックレベル要素に対してのみ有効で、インライン要素に対しては 0 を返します。ブロックレベル要素に CSS 高さが設定されていない場合は、実際の高さが返されます。
要素自体の高さに加えて、「padding」部分も含まれますが、「border」と「margin」は含まれません。水平スクロール バーがある場合は、水平スクロール バーの高さも減算します。この値は常に整数であり、小数の場合は四捨五入されることに注意してください。
Element.clientWidth プロパティは要素ノードの CSS 幅を返します。また、これは要素自体の幅と、垂直スクロール バーがある場合の padding のみを含みます。垂直スクロールバーの幅を減算する必要があります。
document.documentElement の clientHeight プロパティは、現在のビューポートの高さ (つまり、ブラウザ ウィンドウの高さ) を返します。これは、window.innerHeight プロパティから水平スクロール バーの高さを引いたものに相当します (あれば）。 document.body の高さは Web ページの実際の高さです。一般に、「document.body.clientHeight」は「document.documentElement.clientHeight」よりも大きくなります。
//ビューポートの高さ
document.documentElement.clientHeight
// Web ページの合計の高さ
document.body.clientHeight
Element.clientLeft、Element.clientTop
Element.clientLeft プロパティは、左側の padding と margin を除いた、要素ノードの左境界線の幅 (ピクセル単位) と等しくなります。左の境界線が設定されていない場合、または要素がインライン (display: inline) の場合、このプロパティは 0 を返します。このプロパティは常に整数値を返します。小数の場合は四捨五入されます。
Element.clientTop プロパティは、Web ページ要素の上端の幅 (ピクセル単位) に等しく、その他の特性は clientLeft と同じです。
Element.scrollHeight、Element.scrollWidth
Element.scrollHeight プロパティは、オーバーフロー コンテナーと現在非表示の部分を含む、現在の要素の合計の高さ (ピクセル単位) を表す整数値 (小数点以下は四捨五入) を返します。これには padding が含まれますが、border、margin、および水平スクロール バーの高さ (水平スクロール バーがある場合) は含まれません。また、疑似要素 (::before) の高さも含まれます。 または ::after) 。
Element.scrollWidth プロパティは、現在の要素の合計幅 (ピクセル単位) を表し、他の場所の scrollHeight プロパティと同様です。これら 2 つのプロパティは読み取り専用です。
Web ページ全体の高さの合計は、document.documentElement または document.body から読み取ることができます。
// Web ページの合計の高さを返します
document.documentElement.scrollHeight
document.body.scrollHeight
要素ノードのコンテンツがオーバーフローした場合、オーバーフローしたコンテンツが非表示であっても、scrollHeight プロパティは要素の合計の高さを返すことに注意してください。
// HTMLコードは以下の通り
// <div id="myDiv" style="height: 200px; overflow: hidden;">...</div>
document.getElementById('myDiv').scrollHeight // 200
上記のコードでは、myDiv 要素の CSS 高さがわずか 200 ピクセルで、オーバーフロー部分が表示されない場合でも、scrollHeight は要素の元の高さを返します。
Element.scrollLeft、Element.scrollTop
Element.scrollLeft プロパティは、現在の要素の水平スクロール バーが右にスクロールするピクセル数を示し、Element.scrollTop プロパティは、現在の要素の垂直スクロール バーが下にスクロールするピクセル数を示します。スクロール バーのない Web 要素の場合、これら 2 つのプロパティは常に 0 に等しくなります。
Web ページ全体の水平および垂直スクロール距離を表示したい場合は、document.documentElement 要素から読み取ります。
document.documentElement.scrollLeft
document.documentElement.scrollTop
どちらのプロパティも読み取りおよび書き込み可能です。このプロパティの値を設定すると、ブラウザは現在の要素を対応する位置に自動的にスクロールします。
Element.offsetParent
Element.offsetParent プロパティは、現在の要素に最も近く、CSS の position プロパティが static に等しくない親要素を返します。
<div style="位置: 絶対;">
<p>
<span>こんにちは</span>
</p>
</div>
上記のコードでは、「span」要素の「offsetParent」属性は「div」要素です。
この属性は主に、子要素の位置オフセットの計算基準を決定するために使用されます。 Element.offsetTop と Element.offsetLeft は、offsetParent 要素に対して計算されます。
要素が非表示の場合 (「display」属性が「none」)、または位置が固定されている場合 (「position」属性が「fixed」)、「offsetParent」プロパティは「null」を返します。
<div style="位置: 絶対;">
<p>
<span style="display: none;">こんにちは</span>
</p>
</div>
上記のコードでは、「span」要素の「offsetParent」属性は「null」です。
要素のすべての上位ノードの position 属性が static である場合、Element.offsetParent プロパティは <body> 要素を指します。
要素.オフセット高さ、要素.オフセット幅
Element.offsetHeight プロパティは、要素自体の高さ、パディングとボーダー、および水平スクロール バー (スクロール バーが存在する場合) の高さを含む、要素の CSS 垂直高さをピクセル単位で表す整数を返します。
Element.offsetWidth プロパティは要素の CSS 水平幅 (ピクセル単位) を表し、その他すべては Element.offsetHeight と一致します。
これら 2 つのプロパティは読み取り専用のプロパティであり、Element.clientHeight および Element.clientWidth よりも境界線の高さまたは幅を追加するだけです。要素の CSS が非表示に設定されている場合 (「display: none;」など)、「0」が返されます。
Element.offsetLeft、Element.offsetTop
Element.offsetLeft は、Element.offsetParent ノードを基準とした現在の要素の左上隅の水平方向の変位を返し、Element.offsetTop は垂直方向の変位をピクセル単位で返します。通常、これら 2 つの値は、親ノードに対する相対的な変位を指します。
次のコードは、Web ページ全体に対する要素の左上隅の座標を計算できます。
関数 getElementPosition(e) {
var x = 0;
変数y = 0;
while (e !== null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
{x: x, y: y} を返します。
}
要素.スタイル
各要素ノードには、要素のインライン スタイル情報の読み取りと書き込みに使用される style があります。詳細については、「CSS 操作」の章を参照してください。
Element.children,Element.childElementCount
Element.children プロパティは、現在の要素ノードのすべての子要素を含む配列のようなオブジェクト (HTMLCollection インスタンス) を返します。現在の要素に子要素がない場合、返されるオブジェクトにはメンバーが含まれません。
if (para.children.length) {
var Children = para.children;
for (var i = 0; i < Children.length; i++) {
// ...
}
}
上記のコードは、「para」要素のすべての子要素を反復処理します。
このプロパティと Node.childNodes プロパティの違いは、要素タイプの子ノードのみが含まれ、他のタイプの子ノードは含まれないことです。
Element.childElementCount プロパティは、現在の要素ノードに含まれる子要素ノードの数を返します。これは、Element.children.length の値と同じです。
Element.firstElementChild、Element.lastElementChild
Element.firstElementChild プロパティは現在の要素の最初の要素の子ノードを返し、Element.lastElementChild は最後の要素の子ノードを返します。
要素の子ノードがない場合、これら 2 つのプロパティは「null」を返します。
Element.nextElementSibling、Element.previousElementSibling
Element.nextElementSibling プロパティは、現在の要素ノードの次の兄弟要素ノードを返します。存在しない場合は null を返します。
// HTMLコードは以下の通り
// <div id="div-01">ここが div-01 です</div>
// <div id="div-02">ここが div-02 です</div>
var el = document.getElementById('div-01');
el.nextElementSibling
// <div id="div-02">ここが div-02 です</div>
Element.previousElementSibling プロパティは、現在の要素ノードの前の兄弟要素ノードを返します。存在しない場合は null を返します。
##インスタンスメソッド
属性関連のメソッド
要素ノードには、属性を操作するための 6 つのメソッドが用意されています。
getAttribute(): 属性の値を読み取ります。getAttributeNames(): 現在の要素のすべての属性名を返します。setAttribute(): 属性値を書き込みますhasAttribute(): 属性が存在するかどうかhasAttributes(): 現在の要素に属性があるかどうかremoveAttribute(): 属性を削除します
これらのメソッドの概要については、「属性の操作」の章を参照してください。
Element.querySelector()
Element.querySelector メソッドは CSS セレクターをパラメーターとして受け取り、親要素の最初に一致した子要素を返します。一致する子要素が見つからない場合は、「null」が返されます。
var content = document.getElementById('content');
var el = content.querySelector('p');
上記のコードは、「content」ノードの最初の「p」要素を返します。
Element.querySelector メソッドは、任意の複雑な CSS セレクターを受け入れることができます。
document.body.querySelector("style[type='text/css'], style:not([type])");
このメソッドでは擬似要素を選択できないことに注意してください。
カンマで区切られた複数のセレクターを受け入れることができます。
element.querySelector('div, p')
上記のコードは、element の最初の div または p 子要素を返します。
ブラウザが querySelector メソッドを実行すると、まずグローバル スコープで指定された CSS セレクターを検索し、次に現在の要素に属する子要素をフィルターで除外することに注意してください。したがって、直観に反する結果がいくつかあるでしょう。ここに HTML コードのスニペットを示します。
<div>
<blockquote id="アウター">
<p>こんにちは</p>
<div id="インナー">
<p>世界</p>
</div>
</blockquote>
</div>
次に、次のようにクエリを実行すると、実際には 2 番目の要素ではなく、最初の p 要素が返されます。
var external = document.getElementById('outer');
external.querySelector('div p')
// <p>こんにちは</p>
Element.querySelectorAll()
Element.querySelectorAll メソッドは CSS セレクターをパラメーターとして受け取り、一致するすべての子要素を含む NodeList インスタンスを返します。
var el = document.querySelector('#test');
varmatches = el.querySelectorAll('div.highlighted > p');
このメソッドの実行メカニズムは querySelector メソッドと同じで、最初にグローバル スコープ内で検索し、次に現在の要素の子要素をフィルタリングします。したがって、セレクターは実際にはドキュメント全体に固有です。
カンマで区切られた複数の CSS セレクターも受け入れることができます。セレクター内に疑似要素セレクターがある場合、常に空の NodeList インスタンスが返されます。
Element.getElementsByClassName()
Element.getElementsByClassName メソッドは、現在の要素ノードの指定されたクラスを持つすべての子要素ノードをメンバーとする HTMLCollection インスタンスを返します。このメソッドは、検索範囲がドキュメント全体ではなく、現在の要素ノードであることを除いて、document.getElementsByClassName メソッドの使用法に似ています。
element.getElementsByClassName('レッドテスト');
このメソッドのパラメータでは大文字と小文字が区別されることに注意してください。
HTMLCollection インスタンスはライブ コレクションであるため、document オブジェクトへの変更はすぐにインスタンスに反映され、次のコードは有効になりません。
// HTMLコードは以下の通り
// <div id="example">
// <p class="foo"></p>
// <p class="foo"></p>
// </div>
var 要素 = document.getElementById('example');
var match = element.getElementsByClassName('foo');
for (var i = 0; i<matches.length; i++) {
一致[i].classList.remove('foo');
matches.item(i).classList.add('bar');
}
//実行後のHTMLコードは以下のようになります
// <div id="example">
// <p></p>
// <p class="foo bar"></p>
// </div>
上記のコードでは、「matches」コレクションの最初のメンバーがクラス内の「foo」から削除されると、すぐに「matches」から削除され、上記の結果が得られます。
Element.getElementsByTagName()
Element.getElementsByTagName() メソッドは、HTMLCollection インスタンスを返します。そのメンバーは、指定されたタグ名に一致する現在のノードのすべての子要素ノードです。このメソッドは、検索範囲がドキュメント全体ではなく、現在の要素ノードであることを除いて、document.getElementsByClassName() メソッドの使用法に似ています。
var table = document.getElementById('予測テーブル');
var セル = table.getElementsByTagName('td');
HTML タグ名も大文字と小文字が区別されないため、このメソッドのパラメーターでは大文字と小文字が区別されないことに注意してください。
Element.closest()
Element.closest メソッドは CSS セレクターをパラメーターとして受け取り、セレクターに一致する現在のノード (現在のノード自体を含む) に最も近い祖先ノードを返します。 CSS セレクターに一致するノードがない場合は、「null」が返されます。
// HTMLコードは以下の通り
// <記事>
// <div id="div-01">ここが div-01 です
// <div id="div-02">ここが div-02 です
// <div id="div-03">ここが div-03 です</div>
// </div>
// </div>
// </記事>
var div03 = document.getElementById('div-03');
// div-03 最も近い祖先ノード
div03.closest("#div-02") // div-02
div03.closest("div div") // div-03
div03.closest("記事 > div") //div-01
div03.closest(":not(div)") // 記事
上記のコードでは、closest メソッドでも現在のノードが考慮されるため、2 番目の closest メソッドは div-03 を返します。
Element.matches()
Element.matches メソッドは、現在の要素が指定された CSS セレクターと一致するかどうかを示すブール値を返します。
if (el.matches('.someClass')) {
console.log('一致!');
}
イベント関連のメソッド
以下の 3 つのメソッドは、Element ノードのイベントに関連します。これらのメソッドは「EventTarget」インターフェースから継承されます。詳細については、関連する章を参照してください。
Element.addEventListener(): イベントコールバック関数を追加します。Element.removeEventListener(): イベントリスニング関数を削除しますElement.dispatchEvent(): トリガーイベント
element.addEventListener('click', リスナー, false);
element.removeEventListener('click', リスナー, false);
var イベント = 新しいイベント('クリック');
element.dispatchEvent(イベント);
Element.scrollIntoView()
Element.scrollIntoView メソッドは、window.location.hash を設定した場合と同様に、現在の要素をブラウザの表示領域にスクロールします。
el.scrollIntoView(); // el.scrollIntoView(true) と同等
el.scrollIntoView(false);
このメソッドはパラメータとしてブール値を受け入れることができます。 「true」の場合は、要素の上部が現在の領域の表示部分の上部と位置合わせされていることを意味します（現在の領域がスクロール可能である場合）。「false」の場合は、要素の下部がスクロール可能であることを意味します。現在の領域の表示部分の末尾に揃えます (現在の領域がスクロール可能である場合)。現在の領域はスクロール可能です)。このパラメータが指定されない場合、デフォルトは「true」になります。
Element.getBoundingClientRect()
Element.getBoundingClientRect メソッドは、現在の要素ノードのサイズ、位置、その他の情報を提供するオブジェクトを返します。これは基本的に CSS ボックス モデルのすべての情報です。
var rect = obj.getBoundingClientRect();
上記のコードでは、getBoundingClientRect メソッドによって返されるect オブジェクトには次のプロパティがあります (すべて読み取り専用)。
x: ビューポートを基準とした要素の左上隅の横座標y: ビューポートを基準とした要素の左上隅の座標height: 要素の高さwidth: 要素の幅left: ビューポートを基準とした要素の左上隅の横座標。x属性と同じです。right: ビューポートを基準とした要素の右端の横座標 (x + widthに等しい)top: ビューポートを基準とした要素の上部の座標。y属性と同じです。bottom: ビューポートを基準とした要素の下部の座標 (y + heightに等しい)
ビューポートに対する要素の位置はページのスクロールに応じて変化するため、位置を表す 4 つの属性値は固定されません。絶対位置を取得したい場合は、「left」プロパティに「window.scrollX」を追加し、「top」プロパティに「window.scrollY」を追加します。
getBoundingClientRect メソッドのすべてのプロパティは、境界線 (border プロパティ) を要素の一部としてカウントすることに注意してください。つまり、フレームの外縁のさまざまな点から計算されます。したがって、width と height には要素自体 + padding + border が含まれます。
また、上記のプロパティはすべてプロトタイプから継承されたプロパティであるため、Object.keys は空の配列を返します。
var rect = document.body.getBoundingClientRect();
Object.keys(rect) // []
上記のコードでは、rect オブジェクトには独自のプロパティがなく、Object.keys メソッドはオブジェクト自体のプロパティのみを返すため、空の配列が返されます。
Element.getClientRects()
Element.getClientRects メソッドは、ページ上の現在の要素によって形成されるすべての四角形を含む配列のようなオブジェクトを返します (したがって、メソッド名の Rect は複数形です)。各四角形には、「bottom」、「height」、「left」、「right」、「top」、「width」の 6 つの属性があり、ビューポートを基準とした 4 つの座標と、独自の高さと幅を表します。
ボックス要素 (<div> や <p> など) の場合、このメソッドによって返されるオブジェクトには要素のメンバーが 1 つだけあります。インライン要素 (<span>、<a>、<em> など) の場合、このメソッドによって返されるオブジェクトのメンバー数は、その要素がページ上で占める行数によって異なります。これが、インライン要素に対して常に四角形を返す Element.getBoundingClientRect() メソッドとの主な違いです。
<span id="inline">Hello World Hello World Hello World</span>
上記のコードはインライン要素 <span> で、ページ上で 3 行を占める場合、getClientRects メソッドによって返されるオブジェクトは 3 つのメンバーを持ちます。 getClientRects` メソッドにはメンバーのみがあります。
var el = document.getElementById('inline');
el.getClientRects().length // 3
el.getClientRects()[0].left // 8
el.getClientRects()[0].right // 113.908203125
el.getClientRects()[0].bottom // 31.200000762939453
el.getClientRects()[0].height // 23.200000762939453
el.getClientRects()[0].width // 105.908203125
このメソッドは主に、インライン要素が折り返されているかどうかと、インライン要素の各行の位置オフセットを決定するために使用されます。
インライン要素に改行文字が含まれている場合、このメソッドは改行文字を考慮することに注意してください。
<スパン id="インライン">
こんにちは世界
こんにちは世界
こんにちは世界
</スパン>
上記のコードでは、<span> ノード内に 3 つの改行文字があります。HTML 言語が改行文字を無視して 1 行として表示しても、getClientRects() メソッドは 3 つのメンバーを返します。線の幅が非常に狭く設定されており、上記の <span> 要素が 6 行として表示される場合、6 つのメンバーが返されます。
Element.insertAdjacentElement()
Element.insertAdjacentElement メソッドは、現在の要素を基準にして指定された位置に新しいノードを挿入します。このメソッドは、挿入されたノードを返すか、挿入が失敗した場合は「null」を返します。
element.insertAdjacentElement(位置, 要素);
Element.insertAdjacentElement メソッドは合計 2 つのパラメーターを受け取ることができます。最初のパラメーターは挿入位置を示す文字列で、2 番目のパラメーターは挿入されるノードです。最初のパラメータには次の値のみを指定できます。
beforebegin: 現在の要素の前afterbegin: 現在の要素内の最初の子ノードの前beforeend: 現在の要素内の最後の子ノードの後afterend: 現在の要素の後
beforebegin と afterend の 2 つの値は、現在のノードに親ノードがある場合にのみ有効であることに注意してください。現在のノードがスクリプトによって作成されており、親ノードがない場合、挿入は失敗します。
var p1 = document.createElement('p')
var p2 = document.createElement('p')
p1.insertAdjacentElement('afterend', p2) // null
上記のコードでは、p1 には親ノードがないため、失敗した後に p2 を挿入します。
挿入されたノードがドキュメント内の既存のノードである場合、そのノードは元の場所から削除され、新しい場所に配置されます。
Element.insertAdjacentHTML()、Element.insertAdjacentText()
Element.insertAdjacentHTML メソッドは、HTML 文字列を解析して DOM 構造にし、現在のノードを基準にして指定された位置に挿入するために使用されます。
element.insertAdjacentHTML(位置, テキスト);
このメソッドは 2 つのパラメータを受け入れます。1 つ目は指定された位置を表す文字列で、2 つ目は解析される HTML 文字列です。最初のパラメータには、次の 4 つの値のいずれか 1 つだけを設定できます。
beforebegin: 現在の要素の前afterbegin: 現在の要素内の最初の子ノードの前beforeend: 現在の要素内の最後の子ノードの後afterend: 現在の要素の後
// HTML コード: <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// 実行後の HTML コード:
// <div id="one">1</div><div id="two">2</div>
このメソッドは既存の DOM 構造にノードを挿入するだけなので、innerHTML メソッドよりもはるかに高速になります。
このメソッドは HTML 文字列をエスケープしないことに注意してください。つまり、このメソッドを使用してユーザー入力を挿入することはできません。そうしないと、セキュリティ上のリスクが発生します。
Element.insertAdjacentText メソッドは、現在のノードを基準にして指定された位置にテキスト ノードを挿入します。使用方法は Element.insertAdjacentHTML メソッドとまったく同じです。
// HTML コード: <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentText('afterend', 'two');
// 実行後の HTML コード:
// <div id="one">1</div>two
Element.remove()
Element.remove メソッドは ChildNode インターフェイスから継承し、現在の要素ノードを親ノードから削除するために使用されます。
var el = document.getElementById('mydiv');
el.remove();
上記のコードは、DOM ツリーから el ノードを削除します。
Element.focus()、Element.blur()
Element.focus メソッドは、現在のページのフォーカスを指定された要素に移動するために使用されます。
document.getElementById('my-span').focus();
このメソッドはオブジェクトをパラメータとして受け取ることができます。パラメーター オブジェクトの preventScroll プロパティは、表示領域にスクロールするのではなく、現在の要素を元の位置に保持するかどうかを指定するブール値です。
関数 getFocus() {
document.getElementById('btn').focus({preventScroll:false});
}
上記のコードにより、「btn」要素がフォーカスを取得し、表示領域までスクロールします。
最後に、現在フォーカスされている要素を document.activeElement プロパティから取得できます。
Element.blur メソッドは、現在の要素からフォーカスを削除するために使用されます。
Element.click()
Element.click メソッドは、現在の要素上でのマウス クリックをシミュレートするために使用されます。これは、click イベントをトリガーするのと同じです。
参考リンク
- Craig Buckler、DOM から SVG 座標に変換し、再度変換する方法 )
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0