
parentNodechildNode:
parentObjfirstChild:如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持parentObjfirstChildfirstChildfirstChild的形式,如此就可以获得更深层次的节点。
在 JS获取div高度的方法 中,整理了几个有关于获取div高度的方法,后来又遇到一个问题,怎么获取DIV在页面中的绝对位置,因此在这篇笔记中记录一下。
页面结构
样式
getBoundingClientRect用于获取某个元素 相对于视窗 的位置集合。集合中有top, right, bottom, left等属性。
offsetLeft指的是元素相对于 版面或 由 offsetParent 属性指定的 父坐标 的计算上侧位置,整型,单位像素。
借用这个思路,当我们想获取元素的绝对位置时,可以递归遍历,直到元素的父元素为body为止。
关于offsetParent属性,有以下几点Tips。
jquery中parent()可以获取父级元素,所以获得某元素父级的父级可以使用
$(selector)parent()parent();示例如下
创建Html代码及css样式
<div class="class1">class1
<div class="class2">
class2
<div class="class3">
class3
</div>
</div>
</div>div{padding:10px 20px;border:4px solid #ebcbbe;}
divclass1{width:200px;height:120px;}
编写jquery代码
$(function(){$("divclass3")click(function() {
obj = $(this)parent()parent();
alert(objprop('class'));
});
})
查看效果
<body>
<table class="tbeTarget" id="tbeTarget">
<tr>
<td class="tips1" id="tips1"> 12345abcd </td>
<td class="tips2" id="tips2"> 23456fvbg </td>
</tr>
</table>
<input type="button" onclick="getTdValue();" value="GETTDVALUE">
</body>
获取标签建议还是用ID来获取,简单方便
用getElementById("tbeTarget")可获取table
用getElementById("tips2")可获取到tips2
有ID的话,getElementById("tbeTarget")tips2也能得到你要的 tips2
特殊情况实在不能用ID时,也可用getElementsByTagName
var o=documentgetElementsByTagName("table"); 这个就获取到了所有的table标签,返回值是数组类型的
像你这个代码的话,只有个一个table,那 o[0]就是你要的table标签了
实在要用getElementByClassName的话,
var o=documentgetElementByClassName("tbeTarget");
var ot=ogetElementsByTagName("td"); //直接用ogetElementByClassName("tips2")应该也可以
for(var i=0;i<otlength;i++){
if(ot[i]class=="tips2"){
alert(ot[i]); //在这if里面,用ot[i]调用到的就是你要的 tips2了
}
}
$(document)ready(function(){
$("#container")width(getAllWidth("#container div"));
});
//定义一个获取对象列表宽度的方法
var getAllWidth = function(objIcon){
var obj = $(objIcon);
var _width = 0;
if(objlength > 0){
for(var i=0;i<objlength;i++){
_width += $(obj[i])width();
}
}
return _width;
}
上面代码我引入的jquery,如果不用jquery的话我也可以帮你写一份
以上就是关于js里parentNode是获得父节点,那么怎么获得子节点呢全部的内容,包括:js里parentNode是获得父节点,那么怎么获得子节点呢、原生JS获取页面中DIV绝对位置的方法、JQUERY如何获得某元素父级的父级等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)