2018年5月26日土曜日

指定した要素の子要素の最後の要素を取得したい


  1. elem.childrenで指定した要素の子要素を取得
  2. elem.children.lengthでその数を取得
  3. elem.children[len - 1]でその最後の要素を取得

という感じでinnerHTMLまで取得してみる


コード.gs 
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する


index.html 
<!DOCTYPE html>
<html>
  <body>
    <div id="main_div">
      <div>あめ</div>
      <div>ちょこ</div>
      <div>がむ</div>
    </div>
  </body>
  <script>
  get_last_elem("main_div")
  function get_last_elem(id){
    var elem = document.getElementById(id);
    var len = elem.children.length;
    var last_elem = elem.children[len - 1];
    alert(last_elem.innerHTML);
  }
  </script>
</html>
意訳
 


main_divの要素
あめ div
ちょこ div
がむ div



get_last_elem()でmain_divの最後の要素を取得する
この機能がやること
受け取ったidから一致する要素を取得して
その要素の子要素の数を取得して
その要素の最後の子要素を取得して
innerHTMLをアラートに出す

.getElementsByTagNameで取得する


index.html
<!DOCTYPE html>
<html>
  <body>
    <div id="main_div">
      <div>あめ</div>
      <div>ちょこ</div>
      <div>がむ</div>
    </div>
  </body>
  <script>
  get_last_elem("main_div")
  function get_last_elem(id){
    var elem = document.getElementById(id);
    var divs = elem.getElementsByTagName("div");
    var len = divs.length;
    var last_elem = divs[len - 1];
    alert(last_elem.innerHTML);
  }
  </script>
</html>

参考

ParentNode.children
https://developer.mozilla.org/ja/docs/Web/API/ParentNode/children

document.getElementsByTagName
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName