DOM获取⼦节点
childNodes
使⽤childNodes获取⼦节点的时候,childNodes返回的是
⼦节点的集合,是⼀个数组的格式。他会把换⾏和空格也当
成是节点信息。
children
children不会返回⽂本节点,返回的是元素节点
DOM获取⽗节点
parentNode
获取的是当前元素的直接⽗元素,是w3c的标准
parentElement
获取的是当前元素的直接⽗元素,是ie的标准
offsetParent
获取离当前节点最近的⼀个有定位的⽗节点或祖先节点,如
果没有即为获取body
判断节点的类型
nodeType 1为元素节点 3为⽂本节点(即空格或换⾏,字符)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#bigdiv{
position: relative;
}
</style>
</head>
<body>
<div id="bigdiv">
<div id="div1">
<div>111</div>
<div>222</div>
</div>
</div>
<script type="text/javascript">
var oDiv = document.getElementById('div1')
/*使⽤childNodes获取⼦节点的时候,childNodes返回的是⼦节点的集合,
是⼀个数组的格式。他会把换⾏和空格也当成是节点信息*/
//console.log(oDiv.childNodes)
var div1 = oDiv.childNodes
//children不会返回⽂本节点,返回的是元素节点
//console.log(oDiv.children)
//parentNode 获取的是当前元素的直接⽗元素,是w3c的标准
//console.log(oDiv.parentNode)
//parentElement 获取的是当前元素的直接⽗元素,是ie的标准
//console.log(oDiv.parentElement)
//offsetParent 获取离当前节点最近的⼀个有定位的⽗节点或祖先节点,如果没有即为获取body
//console.log(oDiv.offsetParent)
//判断节点的类型
//nodeType 1为元素节点 3为⽂本节点(即空格或换⾏,字符)
console.log(div1[0].nodeType)
console.log(div1[1].nodeType)
</script>
</body>
</html>