在前端编程中,少不了使用jquery,在其中要结合DOM树来进行数据处理,那就离不开数据对结点的操作。
故在此总结一下对结点获取方法:
1、向上对父及祖父结点访问
parents()与parent()
(1)对祖父结点的获取
使用parents([selecter])方法;括号内部填写祖父结点的名字,便于确定从具体的哪一层结点开始找。
例如:$(this).parents(".img_href"),this表示当前结点,整体的意思是:从当前结点往上找,找到名为img_href的哪一层父结点。
(2)对父结点的获取
使用parent()方法,返回被选元素的直接父元素(起点当前元素的直接父元素)。
获取的是上一层的内容,即仅由返回一层的内容。返回值为一个对象,包含很多内容,具体内容可以自己写一个例子来查看。使用方法如下:
var parent = $(".img_href").parent(); // 获取class为img_href的父节点,返回内容为对象。
console.log(parent); //打印返回的具体内容。一般用alert方法只会返回一个object的提示,用该方法可以在控制台看到很多内容。
(3)closest(selector)方法 (起点为本身)
从当前元素开始,沿DOM树向上匹配,返回被选元素的第一个祖先元素。
遇到a嵌套a标签的情况下,获取最近的a标签,会有2个,即起点为自身的a,再向上获取一个a,然后停止。
2、向下获取子节点
(1)获取子节点
使用.children(selector)方法,单一层级
返回被选元素的所有直接子元素,不返回文本结点,可以直接使用contents()获取文本内容。
**** 不含selector则返回所有的子孙元素,含selector则返回对应selector下的所有子孙结点。
(2)find()获取子结点
返回被选元素的后代元素,可以是子、孙、曾孙等,直至最后一层的后代。
【注】 children()与find()可以获取同样的数据,children里面不需要参数,find()里面给定参数。
具体例子如下:
<ul class="img_href">
<li></li>
<li></li>
<li></li>
</ul>
调用方法:find
var child = $(".img_href").find("li");
console.log(child);
调用方法:children
var child = $(".img_href").children();
console.log(child);