jQuery遍历DOM元素

自下而上(获取父节点)

通过jQuery对象可以向上遍历DOM树

parent()返回被选元素的直接父元素。该方法只会向上一级对DOM 树进行遍历。返回要给jQuery对象
parents([type])

- 返回被选元素的祖先元素
- 可传入字符串过滤类型，返回被选元素中为该类型的祖先元素

parentsUntil("type") 返回介于两个给定元素之间的所有祖先元素

<body><div id="myDiv2">myDiv.parents<div>myDiv.parent<div id="myDiv">myDiv</div></div></div><button id="btn">返回myDiv元素</button><button id="btn2">返回myDiv元素父节点</button><button id="btn3">返回myDiv元素祖先节点</button><button id="btn4">返回myDiv元素div祖先节点</button><button id="btn5">返回myDiv与myDiv2元素中间的节点</button>
</body>
<script type="text/javascript">$(function(){$("#btn").click(function(){console.log($("#myDiv").text())})$("#btn2").click(function(){console.log($("#myDiv").parent().text())})$("#btn3").click(function(){console.log($("#myDiv").parents().text())//返回html节点内容})$("#btn4").click(function(){console.log($("#myDiv").parents("div").text())//返回html节点内容})$("#btn5").click(function(){console.log($("#myDiv").parentsUntil("#myDiv2").text())//})})
</script>

自上而下（获取子/后代节点）

children() 返回被选元素的所有直接子元素

- 可传入字符串过滤类型，返回被选元素中为该类型的子元素

find() 返回被选元素的后代元素，一路线下直到最后一个后代

- 可传入字符串过滤类型，返回被选元素中为该类型的后代元素

<body><div id="myDiv">myDiv.parents<div>myDiv.parent<div>myDiv</div></div></div><button id="btn">返回myDiv元素的子元素</button><button id="btn2">返回myDiv元素的后代元素</button>
</body>
<script type="text/javascript">$(function(){$("#btn").click(function(){console.log($("#myDiv").children().text())})$("#btn2").click(function(){console.log($("#myDiv").find("div").text())})})
</script>