https://uga-box.hatenablog.com/entry/2024/06/10/000000

State of HTML 2023を眺めていて、Form や Interactivity に関して理解が曖昧だったことを調べた

2023.stateofhtml.com

HTMLInputElement: invalid イベントとHTMLInputElement: checkValidity()メソッド

invalid イベントは、送信可能な要素が制約検証を受け、制約を満たしていない場合に発行されるイベント

HTMLInputElement: invalid イベント - Web API | MDN

checkValidity()は、その要素の値の妥当性を示す論理値を返し、値が無効である場合に invalid イベントを発行する

HTMLInputElement: setCustomValidity() メソッド

その要素にカスタム検証メッセージを設定することができる

function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity("You gotta fill this out, yo!");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("We need a higher number!");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("That's too high!");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}

input.validityは検証の状態を返すプロパティで、これを使って検証失敗の原因を知ることができる

ValidityState - Web API | MDN

最後にinput.reportValidity();を実行しないと、何も起こらないので注意

element.toggleAttribute(name, force)

属性名を指定して toggleAttribute を呼べば、属性の有無をトグル的に切り替えることができる

例えばdisabledの属性をつけたり、消したりする方法が今まではまどろっこしかった、かつ、true/falseでの制御ではないので直感的ではなかった

target.setAttribute("disabled", "");
target.removeAttribute("disabled");

これが、toggleAttributeで切り替えられるようになる

Jxckさんの記事
Element.toggleAttribute | blog.jxck.io

insertAdjacentHTML

指定されたテキストを HTML または XML として解釈し、結果のノードを DOM ツリーの指定された位置に挿入する

insertAdjacentHTML(position, text)

指定できるposition

beforebegin: 要素の前。要素が DOM ツリー内にあり、親要素がある場合にのみ有効
afterbegin: 要素のすぐ内側、最初の子の前
beforeend: 要素のすぐ内側、最後の子の後
afterend 要素の後。要素が DOM ツリー内にあり、親要素がある場合にのみ有効

似たようなメソッドに insertAdjacentElement() があるが、insertAdjacentHTMLの方は第二引数のtextをパースして使用するのに対して、insertAdjacentElement()はdocument.createElement()を使ってHTML要素を事前に生成してから第二引数に指定する違いがある

生成されるDOMは同じ

Document fragments

developer.mozilla.org

複数のノードの仮親になれるノード

例えば、documentを頂点とする木構造に複数のノードをループしながらappendChildしたとすると、ブラウザによってはappendChildをするたびに画面を書き直す必要があるためよろしくない

そこで、Document fragmentsに一時的にappendChildしておき、最終的にDocument fragmentsを一回だけappendChildすることで、画面の書き直し回数を減らすことができる

七章第四回ノードをまとめて扱う：DocumentFragment — JavaScript初級者から中級者になろう — uhyohyo.net