001.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入れ子になったulタグとその親のliタグのclassnameを取得する</title>
<style type="text/css">
</style>
</head>
<body>
<h3>JavaScript</h3>
<ul id="menu">
<li>配列</li>
<li class="parent_1">関数
<ul class="child_1">
<li>Functionオブジェクト</li>
<li class="parent_2">関数の呼び出し
<ul class="child_2">
<li><a href="#">メソッド呼び出しパターン</a></li>
<li><a href="#">関数呼び出しパターン</a></li>
<li><a href="#">コンストラクタ呼び出しーンパターン</a></li>
<li><a href="#">apply呼び出しパターン</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
window.onload=function(){
var element = document.getElementById("menu").getElementsByTagName("ul");
for(i=0;i<element.length;i+=1){
console.log("element[" + i + "].className="+element[i].className);
console.log("element[" + i + "].parentNode.className="+element[i].parentNode.className);
}
}
/*
"element[0].className=child_1"
"element[0].parentNode.className=parent_1"
"element[1].className=child_2"
"element[1].parentNode.className=parent_2"
*/
</script>
</body>
</html>
解説
jQuery等のライブラリの使用せずに、入れ子になったulタグとその親のliタグのclassnameを取得する。
var element = document.getElementById("menu").getElementsByTagName("ul");
element.length//2
javascriptを勉強して長いが、document.getElementById().getElementsByTagName()って初めて書いた。
element.lengthって3じゃなく2であることに驚いた。