javaScript操作DOM对象
1,DOM--Document object Model (文档对象模型)
2，节点属性：
（1）parentNode 返回父节点
（2）childNode 子节点集合
（3）firstChild 第一个子节点
（4）lastChild 最后一个子节点
（5）nextSibling 下一个节点
（6）previousSibling 上一个节点
3，使用上面的节点
<!DOCTYPE html>
<html>
<head>
<title>javascript操作DOM对象</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.onload=function(){
var str=document.getElementById("first");
//返回父节点
var myparent=str.parentNode;
alert(myparent);
//返回子节点
//首先能力检测 查看浏览器内核引擎有没有某个属性
var str=document.getElementById("box");
var mychild=str.childNodes;
for(var i=0;i< mychild.length;i++){
if(mychild[i].nodeType==1){
alert(mychild[i].innerHTML);
}
}
//获得第一个子节点
var str=document.getElementById("box");
var my=str.firstElementChild;
alert(my.innerHTML);
//使用添加方法 添加一个p标签
var myp=document.createElement("p");
myp.innerText="我的同桌女的？";
var mydiv=document.getElementById("tt");
mydiv.appendChild(myp);
//使用删除和替换方法
var mydiv=document.getElementById("box");
var man=mydiv.firstChild;
mydiv.removeChild(man);
};
</script>
</head>
<body id="tt">
<ul id="box">
<li id="first">吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
</body>
</html>
4，在 javascript 中添加样式
（1）需要添加样式的元素对象.style.样式=“样式值” 列如：
var mybox2=document.createElement("div");
// 添加的元素左浮动
mybox2.style.float="left";
（2）添加多个样式
mybox2.style.cssText="background-color:#D1E8FF;width:400px;height:300px;border:1px solid #91BDE9";
5，获取左外边距+获取元素高度+定位元素在要买呢中的位置
<!DOCTYPE html>
<html>
<head>
<title>定位网页中的元素</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
*{
margin: 0px auto;
padding: 0px;
}
#he{
width: 400px;
height: 400px;
border: 1px solid blue;
position: relative;
}
#nei{
width: 200px;
height: 200px;
border: 1px dashed red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var myleft=document.getElementById("nei");
//使用offsetLeft 来获取里头盒子与外面盒子的左边距离
//要想实现上面的提示，记得把外面的里头的两个盒子设置成相对定位和绝对定位
var leftvalue=myleft.offsetLeft;
alert(leftvalue);
//获取元素高度clientHeight和offsetHeight
//clientHeight获取到的是不加border边框厚度的元素高度
//offsetHeight：获取到的高度是包括border边框厚度
var height=myleft.clientHeight;//一种
var heightborder=myleft.offsetHeight;//第二种
alert(height+"\t\n"+heightborder);//查看两者 的区别
};
window.onscroll=function(){
//定位盒子 在我滚动鼠标的时候 盒子不改变位置
var height=document.documentElement.scrollTop||document.body.scrollTop;
document.title=height;//在页面标题位置显示滚动条与页面上部的距离
var myhe=document.getElementById("he"); //获取你要定位的元素
myhe.style.cssText="margin-top:"+height+"px";
};
</script>
</head>
<body>
<div id="he">
<div id="nei">二笔同桌</div>
</div>
</body>
</html>
