<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 300px;
height: 300px;
margin: 50px auto;
border: 5px solid #000;
padding: 50px;
background: orange;
}
#inner{
width: 200px;
height: 200px;
/*margin: 50px auto;*/
border: 5px solid #000;
padding: 50px;
background: yellow;
}
#center{
width: 100px;
height: 100px;
/*margin: 50px auto;*/
border: 5px solid #000;
padding: 50px;
background: green;
}
</style>
<div id="outer">
<div id="inner">
<div id="center"></div>
</div>
</div>
<script type="text/javascript">
var outer = document.getElementById("outer"),
inner = document.getElementById("inner"),
center = document.getElementById("center");
// 1. parentNode:父节点 HTML结构层级关系中的上一级元素
// center.parentNode // -> inner
// inner.parentNode // -> outer
// outer.parentNode // -> body
// 2. offsetParent: 父级参照物 在同一个平面中, 最外层的元素是里面所有元素的父级参照物(和HTML层级结构没有必然的联系)
// 一般来说一个页面中的所有元素的父级参照物都是body
// center.offsetParent // -> body
// inner.offsetParent // -> body
// outer.offsetParent // -> body
// document.body.offsetParent // -> null
// 想要改变父级参照物需要使用position定位来进行改变
// position: absolute;
// position: relative;
// position: fixed;
// 这几个值都可以把父级参照物进行修改
// outer.style.position = "relative";
// console.log(center.offsetParent); // -> outer
// console.log(inner.offsetParent); // -> outer
// console.log(outer.offsetParent); // -> body
// outer.style.position = "relative";
// inner.style.position = "relative";
// console.log(center.offsetParent); // -> inner
// console.log(inner.offsetParent); // -> outer
// console.log(outer.offsetParent); // -> body
// null和undefined的区别?
// null和undefined都代表没有,
// 但null是属性在但值不存在;undefined是连属性都不存在
// document.parentNode (浏览器天生自带的一个属性: 父亲节点的属性) -> null -> 因为一个页面中的document已经是最顶级元素了,他没有父亲
// document.parentnode -> undefined (因为没有parentnode属性)
</script>
网友评论