UdemyでPythonを勉強した結果を残すブログ。

40歳でプログラミング始めて転職までいけるのかを実録してみます。

javascriptでいろんな要素を取得するとりあえずの一覧

javascript

ざっくりとDOM要素の取得関数一覧。

querySelectorとquerySelectorAllでほぼ大丈夫だけどページ数が多かったりするときはgetElementBy... の方が処理が早いのでいいらしい。

詳細の要素を指定したい場合などはページ数が多くても併用する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>h1タイトル</h1>
    <p id="pId" class="Attr">段落<span>スパン</span></p>
    <p class="Attr">段落2<span>スパン2</span></p>
    <p class="Attr">段落3</p>
    <input type="text" name="nameAttr">
    <input type="password" name="pwdAttr">
  <script>
    const pid = document.getElementById("pId");
    console.log(pid);
    const getClassAttr = document.getElementsByClassName("Attr");
    console.log(getClassAttr)
    const getPAll = document.getElementsByTagName("p")
    console.log(getPAll)
    const getNameTypeText = document.getElementsByName("text");
    const getParentSpan = document.querySelector("span");
    const getParentSpan2 = getParentSpan.closest("p")
    const getH1broTypePass = document.querySelector('h1 ~ [name = "pwdAttr"]');
    const getChildpId = document.querySelector('#pId > *')
    const getNextText = document.querySelector('input + [name="text"]');
    console.log(getNameTypeText)
    console.log(getParentSpan2)
    console.log(getH1broTypePass)
    console.log(getChildpId)
    console.log(getNextText)
  </script>
  </body>

</html>

取得したHTMLを表示・編集などする

console.log(getPAll[1].innerHTML)
console.log(getPAll[0].textContent)