zoukankan      html  css  js  c++  java
  • 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;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{
    			 400px;
    			height: 400px;
    			border: 1px solid blue;
    			position: relative;
    		}
    		#nei{
    			 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+"	
    "+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>
    

      

  • 相关阅读:
    独立安装SharePoint 2013碰到的"SDDL"问题及解决方法
    软件编程21法则
    HtmlAgilityPack 之 HtmlNode类
    SpringBoot集成Hadoop3.1.3
    win10 mysql慢查询
    Java多线程并行计算(Google的Guava使用)
    win10安装hadoop3.1.3
    mapDB的基本用法
    SpringBoot集成JMH
    mysql死锁
  • 原文地址:https://www.cnblogs.com/bb1008/p/7056656.html
Copyright © 2011-2022 走看看