|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html><head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<title></title>
<style type="text/css">
#div1
{
width:400px;height:400px;background-color:red;position:relative;margin:100px;
}
#div2
{
width:100px;height:100px;background-color:gray;position:absolute;left:200px;top:200px;
}
</style>
<script type="text/javascript">
window.onload = function
() {
var
oDiv1 = document.getElementById("div1");
var
oDiv2 = document.getElementById("div2");
alert(oDiv2.offsetParent);
//如果div1有相对定位，则，div2根据div1定位，如果div1，没有相对定位，则div2根据body相对定位。可以去掉相对定位，看一下alert出来的内容的区别
}
</script>
</head><body> <div>子类的position：absoulte;父类元素只有相对定位后，移动位置，子类才能跟着移动</div>
<div id="div1">
<div id="div2"></div>
</div>
<!--//总结一下Dom节点
childNodes nodeType 元素节点的 nodeType=1 文本节点的 nodeType=3 使用的时候是 对象.childNodes[i].style.background=‘red‘;
children 都是元素节点 children[i].style.background=‘red‘
parentNode parentNode.style.background="red"
offsetPraent 获取元素在页面上的实际位置
<有兼容性问题>子节点
firstChild firstElementChild
lastChild lastElemetnChild
<有兼容性问题>兄弟节点
nextSiblings nextElementSiblings
previousSiblings previousElementSiblings
-->
</body></html> |