parentElement

parentElement 父元素 / children 子元素

該parentElement屬性返回指定元素的  父元素。
得到的父元素的節點名元素：
var x = document.getElementById("myid").parentElement.nodeName; x 的結果將是：p ,
var x = document.getElementById("myid").parentElement.id;  x 的結果將是父元素 id ,
var x = document.getElementById("myid").parentElement.style.backgroundColor = 'red' ; 父元素 底色設為紅色 .
var x = document.getElementById("myid").parentElement.style.display = 'none'; 隱藏父元素 .

元素.children , 屬性返回指定元素的 子 元素 , 會傳來一個集合 (HTMLCollection) 因此需要指定陣列 index ，才能夠鎖定子元素 .
x.children.length 指定元素對下有幾多子元素  /  x.children.item(i).tagName ; 子 元素名 .  /  x.children.item(i).id; 子 元素i d

<div id="div1"> <p onclick="alert('我父ID ' + this.parentElement.id)"> click me </p> </div>

00

<div id="div1"> <p onclick="alert('我父元素 ' + this.parentElement.nodeName)"> click me </p> </div>

00

<div id="div1"> <p onclick="this.parentElement.style.backgroundColor = 'red';"> click me </p> </div>

00

<div id="div1"> <p onclick="this.parentElement.style.display = 'none';"> click me </p> </div>

00

<div id="div1"> <div id="div1"> <div onclick="showChildsTag()" >click me </div> <select id="selectA1" > <option>名城 </option> <option> 新都城 </option> <option> 沙田第一城 </option> <option> 日出康城 </option> <option> 瓏門 </option> <option> 太古城 </option> <option> 嘉湖山莊 </option> </select> <script language="JavaScript"> function showChildsTag(){ var strTags = ""; for (var i=0; i<selectA1.children.length; i++){ strTags += i + " " + selectA1.children.item(i).tagName +" "; strTags += selectA1.children.item(i).innerHTML +" "; strTags += "\n"; } alert(strTags); } </script>

00

<div onclick="showChildsTag(this)"> <p id="p"> click me</p> <b id="b">HI</b> <i id="i">HI</i> </div> <script language="JavaScript"> function showChildsTag(x){ var strTags = ""; for (var i=0; i<x.children.length; i++){ strTags += i + ") tagName: " + x.children.item(i).tagName ; strTags += " id : " + x.children.item(i).id ; strTags += "\n"; } alert(strTags); } </script>

00