js和jquery获取元素节点的方法：
一、js通过document节点获取：
document.getElementById("elementId");
document.getElementsByName("elementName");
document.getElementsByTagName("tagName");
document.getElementsByClassName("classname");
二、js通过父节点获取:
parentObj.firstChild和parentObj.lastChild获取第一个子节点，最后一个子节点。parentObj.childNodes
注意：在chrom下，console台都输出：undefined.
在ie9以下，console可以输出：<input type="text" value="快乐">.
但是在现代浏览器，比如chrom、firfox等，会把标签之间的空白节点也解析出来。对于空白节点，控制台输出为：undefined。这也解释了上面
出现的结果的现象，即把<input>前的空白节点当成第一个节点，所以console输出为undefined。
parentObj.childNodes,parentObj.lastChild也同理
代码如下：
<body>
<div>
<input type="text" value="快乐">
<p>开心</p>
</div>
<script type="text/javascript">
console.log( document.getElementsByTagName("div").firstChild);
</script>
</body>
parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。存在同parentObj.firstChild问题
parentObj.children：获取已知节点的直接子节点数组。只检测element元素节点，防范于未然，所以推荐大家以后使用children方法来替代 childNodes
parentObj.firstElementChild:在chrom下输出为undefined.
总结：通过父节点获取子节点的时候，最好的方法是用 parentObj.children
三、js通过子节点获取：
childNode.parentNode：获取已知节点的父节点，还可以嵌套，得到祖父等，如childNode.parentNode.parentNode，主流浏览器都兼容
四、通过临近节点获取:
neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点。
如：console.log( document.getElementsByTagName("p").previousSibling);
console输出结果：undefined。
neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点
如：console.log( document.getElementsByTagName("p").nextSibling);
console输出结果：undefined。
通过观察console台，可以发现<p>的nextSibling和previousSibling的节点类型都是textNode，即把空白节点也算进去了
总结：获取节点的方式通过childNode.parentNode和 parentObj.children在主流浏览器中兼容
jquery方法获取节点：
$("#id")，$(".classname")，$("tagname")等等
$("span").parent()或者$("span").parent(".class")等等，获取直接的父元素，即返回值只有一个
如：
<!doctype html>
<html>
<head>
<title>ssssds</title>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="s.js"></script>
<style type="text/css">
div{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="div1">
<div>
<input type="text" value="快乐">
<p>开心</p>
</div>
</div>
</body>
</html>
console.log($("p").parent());
控制台输出：[div, prevObject: r.fn.init(1)]，即只有一个元素节点
如果写成： console.log($("p").parents());
console: (4) [div, div, body, html, prevObject: r.fn.init(1)], 即有4个父辈元素节点
总结：$("p").parent()返回直接的父亲（1个）；$("p").parents()返回所有的祖先
二、jquery通过父节点查找子节点
$("#div1").children():返回所有直接的孩子节点，不会返回所有的子孙节点
console.log($("#div1").children());
console输出：
即返回所有直接的孩子节点。
$("#div1").contents():返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
总结：jquery通过父节点查找子节点，最好用类似于：$(parentnode).children()这种形式
三、通过兄弟节点查找节点
$(node).prev():返回上一个兄弟节点（只有一个）
$(node).prevAll()，返回所有之前的兄弟节点(多个)
$(node).next()：返回下一个兄弟节点（只有一个）
$(node).nextAll(): 返回所有之后的兄弟节点（多个）
$(node).siblings()：返回兄弟姐妹节点，不分前后
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
