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对象之前
例:
//动态的构建一个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";};window.οnlοad=function(){
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";
例:
/* dom.style.属性名="属性值"; dom.style.backgroundColor="pink";dom.style.fontSize="30px"; */dom.style.cssText="background-color:pink;font-size:30px;";};var dom=document.getElementById("first");
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";}