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.οnlοad=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.οnlοad=function(){

//动态的构建一个divvar 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.οnlοad=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.οnlοad=function(){var small=document.getElementById("small");var left=small.offsetLeft;alert(left);};

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

例：

window.οnscrοll=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.οnlοad=function(){ //等待所有的html标签，img。css。js加载完毕后执行};function addStyle(){var dom=document.getElementById("first");dom.className="mystyle";}