javascript-----DOM文档对象模型

1.DOM分类

  DOM:文档对象模型，提供了添加、移动、该变、或移除的结构文档的方法和属性

DOM Core：锁定一批标签，看成dom对象，进行业务分析
HTML DOM ：把标签和属性看成是一个DOM，即HTML 文档对象
CSS DOM ：style.cssText
　　　　　　style.属性名：

2.  HTML文档中的每个成分都是一个节点

1〉整个文档时一个文档节点

2〉每个HTML是一个元素节点

3〉每个HTML中的文本是一个文本节点

3.   获取当前节点的子节点集合childNodes，写的时候有空格的话会影响结果，所以应该先获取节点信息，然后判断节点类型（nodeType），1：element 元素节点 ；2：attr  属性节点；   3：#text 文本节点；

例：

window.onload=function(){
	// 能力检测  查看浏览器内核引擎内有没有某个属性
	var str=document.getElementById("box");
	//能力检测
	var  str1=str.childNodes;
	for ( var i=0;i<str1.length;i++) {
		if (str1[i].nodeType==1) {
			alert(str1[i].innerHTML);
		}
	}
	};

4.　创建和插入节点　

 1〉A(父级对象).appendChild(dom); 

2〉  insertBefore(A,B)  表示将A插入到B对象之前

例：

window.onload=function(){
 　　　　　　　　　　//动态的构建一个div
		var str=document.createElement("div");
		str.innerHTML="我是div";
		var bo=document.getElementById("mine");
		var myul=document.getElementById("box");
		bo.insertBefore(str,myul);
		var ss=document.getElementById("first");
		ss.style.background="red";
		};

　

5.替换和删除节点
replaceChild()

　例：

  window.onload=function(){   //等待所有的html标签，img。css。js加载完毕后执行
	    //删除节点 ，A.removeChild(子元素对象)
	    /*    var dom=document.getElementById("first");
	       
	       var box=document.getElementById("box");
	     
          
           box.removeChild(dom); */

  //替换节点
	    };
	    function myreplace(){
	      var myfirst=document.getElementById("first");
          var dom=document.createElement("li");
          dom.innerText="打游戏";
          var box=document.getElementById("box");
          
          box.replaceChild(dom,myfirst);
	    }
	    
	    

6.操作节点样式

1〉dom.style.属性名="属性值";规则：碰到有-的，去掉-，后面的第一个字母变成大写；

2〉一次设置n个样式：dom.style.cssText="属性名1:属性值1;属性名2:属性值2";

例：

  var dom=document.getElementById("first");

	      /* dom.style.属性名="属性值";
　　　　　　　　　　 dom.style.backgroundColor="pink";
          　　　　 dom.style.fontSize="30px"; */
           dom.style.cssText="background-color:pink;font-size:30px;";
	    };

7. 1〉offsetLeft：类似于css中的margin-left；返回他与父级边框之间的距离，但是父级元素必须有相对定位，否则返回的是本身与浏览器边框之间的距离；

例：

     window.onload=function(){
	var small=document.getElementById("small");
	var left=small.offsetLeft;
	alert(left);
	}; 

　2〉scrollTop：返回匹配元素的滚动条的垂直位置

例：

window.onscroll=function(){
	var height=document.documentElement.scrollTop||document.body.scrollTop;
	document.title=height;
	var bigBox=document.getElementById("big");
	bigBox.style.cssText="margin-top:"+height+"px";
	};

8.dom.className="class属性值";  规则：配合样式表使用

例：

  window.onload=function(){   //等待所有的html标签，img。css。js加载完毕后执行
	      
	    };
	    function addStyle(){
	      var dom=document.getElementById("first");
	       dom.className="mystyle";
	    }