LANG SELRCT

コードを書く場所についてはこちら

2018年2月25日日曜日

JavaScriptで指定した要素の親要素を取得する


指定した要素の親要素を取得するコードの例です


コード.gsを実行すると

#document/html/body/div/p/textarea

のようにアラート表示されます



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




index.html
<!DOCTYPE html>
<html>
  <body>
    <div>
      <p>
        <textarea id="ta">hello</textarea>
        <button id="bt">button</button>
      </p>
    </div>
    <script>
document.getElementById("bt").onclick = get_path;

function get_path() {
  var node = document.getElementById("ta");
  var result = node.nodeName;
  for(var i = 0; node.parentNode; i++){
    result = node.parentNode.nodeName + "/" + result;
    node = node.parentNode;
    }
    alert([result.toLowerCase(), i]);
}
    </script>
  </body>
</html>
意訳
 


div要素
p要素
テキストエリア
ボタン



idがbtの要素がクリックされたらget_pathを実行する

この機能がやること
idがtaの要素を取得して
そのnode名を取得して
そのnodeの親要素がある限り以下を繰り返す
親要素のnode名/node名
nodeにnodeの親要素を入れる

resultを小文字にしてiの値もログに出す