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>

posted on 2017-06-20 22:28 蒙古码农阅读(144) 评论(0) 收藏举报