javascript-DOM
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript-DOM相关的知识，希望对你有一定的参考价值。
一、DOM
document object model（文档对象模型）
1.获取节点
1.doucment.getElementById()===>选取有Id节点
2.document.getElementsByTagName()===》选取节点名称
3.document.getElementsByClassName() ===》获取有class节点
******在IE8或者IE8以下不支持
var uls = document.getElementById("uls"); //var lis = document.getElementsByTagName("li"); //文档对象 的 所有的li节点 var lis = uls.getElementsByTagName("li"); //uls 的 所有的li节点 // document.getElementsByTagName 对象IE8以下不兼容需封装函数 /* var lis = document.getElementsByClassName("lis"); for(var i=0;i<lis.length;i++){ lis[i].style.background = "#00ff00"; } */ //封装函数，实现可以获取到class名的节点 function fn(cName){ //1>把页面上所有的节点选取到 //2>每一个节点的class名称和参数(cName)做比较 //3>如果相等，把节点添加到数组中， //4>最后return 数组（返回数组） var dom = document.getElementsByTagName("*"); var arr = []; for(var i=0;i<dom.length;i++){ if(dom[i].className==cName || dom[i].className.indexOf(" "+cName) != -1 || dom[i].className.indexOf(cName+" ") != -1 || dom[i].className.indexOf(" "+cName+" ") != -1){ arr.push(dom[i]); } } return arr; } for(var i=0;i<fn("lis").length;i++){ fn("lis")[i].style.background = "red"; }
2.DOM树
日常能见到的树：
树的部分：树枝、树干、果实....
看不到：树（根）===》最主要的东西
document文档中的老大哥
document---> html--->head|body---->div|p|h1....
3.节点 : DOM "对象"
div,p,h1,input,span....
4.DOM对象（节点）的属性
语法：DOM对象.属性名称
1.childNodes : 返回所有"子节点"的一个集合
****子节点(元素节点、文本节点、属性节点)
2.nodeName:返回节点名称
*****(大写)
3.nodeType：返回数字（节点类型）
***返回的是：1 ===》代表元素节点
返回的是：3===》代表文本节点
5.节点的分类
<div id="box"></div> : 元素节点
<div id="box">123</div> : (123)文本节点
<img src="" title="">：属性节点
var box = document.getElementById("box"); //alert(box); // object HTMLDIVElement ----> 对象 HTMLDIV元素 var uls = document.getElementById("uls"); //alert( uls.childNodes.length ); //alert( uls.childNodes[1] ); //document.write( box.nodeName ); /* for(var i=0;i<uls.childNodes.length;i++){ if(uls.childNodes[i].nodeName=="LI"){ uls.childNodes[i].style.background ="red"; } }*/ for(var i=0;i<uls.childNodes.length;i++){ if(uls.childNodes[i].nodeType==1){ uls.childNodes[i].style.background ="red"; } }
6.节点属性
firstChild：获取到第一个子元素
lastChild：获取到最后一个子元素
firstElementChild：获取到第一个元素节点（子元素）
lastElementChild：获取到最后一个元素节点（子元素）
parentNode ：获取到父节点
nodeValue：文本节点的值
-----------------------------------------------
注意：在IE8或者8以下版本
firstChild这个属性，是获取到第一个元素节点（子元素）
firsteElementChild这个属性，在低级版本不认识
var uls = document.getElementById("uls"); //alert( uls.firstChild ); //alert( uls.childNodes[0] ); //uls.lastChild.style.background = "red"; //alert( uls.firstElementChild ); alert( uls.parentNode ); var box = document.getElementById("box"); //alert(box.innerHTML); alert(box.childNodes[0].nodeValue);
7.节点方法
getAttribute() :获取属性值
setAttribute() :设置属性值
removeAttribute() : 删除属性
var imgs = document.getElementById("imgs"); //alert( imgs.getAttribute("id") ); /* var box = document.getElementById("box"); alert( box.getAttribute("style") ); */ imgs.setAttribute("src","2.png"); imgs.removeAttribute("src");
var imgs = document.getElementById("imgs"); function fn(max,min){ var str= Math.random()*(max-min)+min; return str; } imgs.setAttribute("style","width:"+fn(10,100)+"px;position:absolute;left:"+fn(0,1300)+"px;top:"+fn(0,650)+"px");
8.创建节点
创建元素节点
语法：document.createElement(节点名称)
创建文本节点
语法：document.createTextNode(内容)
添加节点
追加
语法：父元素.appendChild(追加的子元素)
前置
语法：父元素.insertBefor(添加的内容,添加到谁前面)
删除节点
语法：父元素.removeChild(删除的元素==>子元素)
var oDiv = document.createElement("div"); //创建元素节点 document.body.appendChild(oDiv); //追加节点 var box = document.getElementById("box"); var text = document.createTextNode("我是box"); box.appendChild(text); /* var uls = document.getElementById("uls"); var oLi = document.createElement("li"); var lis = document.getElementsByTagName("li"); //uls.appendChild(oLi); uls.insertBefore(oLi,lis[1]); */ var lis = document.getElementsByTagName("li"); var uls = document.getElementById("uls"); lis[1].style.background = "red"; //删除ul uls.removeChild(lis[1]);
9.元素样式
box.style.样式名称 ===》只能获取到行内样式
********如何获取到样式表中的样式******
非IE:
getComputedStyle(元素,null).样式名称
IE:
元素.currentStyle. 样式
(封装函数做兼容)
var box = document.getElementById("box"); //alert( box.style.width ); //alert( getComputedStyle(box,null).width ) //alert( box.currentStyle.width ) function getAttr(dom,value){ if( dom.currentStyle ){ return dom.currentStyle[value]; }else{ return getComputedStyle(dom,null)[value]; } } alert( getAttr(box,"width") );
10.元素大小
offsetWidth
offsetHeight
**注意：
没有加入单位的（类型：数值number）
计算：计算边框（border）+计算内边距(padding)
元素偏移
offsetLeft
offsetTop
**注意：
没有加入单位的（类型：数值number）
计算：计算margin
定位的关系
如果没有定位,返回元素左侧距离浏览器左侧的偏移量
如果有定位.返回元素左侧距离和定义元素距离的偏移量
scrollTop
scrollLeft
var box = document.getElementById("box"); //alert(box.offsetWidth); //300 number //alert(box.offsetHeight); /*alert(box.offsetWidth); alert( getComputedStyle(box,null).width );*/ // 写一个定时器， 每隔50毫秒，实现box盒子宽度增加10px setInterval(function(){ //box.style.width = box.offsetWidth-1+"px"; box.style.width = parseInt(getAttr(box,"width"))-2+"px"; },50) function getAttr(dom,value){ if(dom.currentStyle){ return dom.currentStyle[value]; }else{ return getComputedStyle(dom,null)[value]; } } //------------------------------------------------------ var dv1 = document.getElementById("dv1"); var dv2 = document.getElementById("dv2"); //alert("left===>:"+dv1.offsetLeft); //alert("top===>:"+dv1.offsetTop); alert(dv2.offsetLeft); //---------------------------------------------- var btn = document.getElementById("btn"); btn.onclick = function(){ //alert(box.scrollLeft); //alert(box.scrollTop); }
11.获取宽度和高度(文档、可视区域)
document.documentElement ===》文档 的 文档元素
document.body ===》文档 的 body
****获取可视区域宽度和高度*****
clientWidth
clientHeight
标准模式和混杂模式
标准模式：document.documentElement
混杂模式：document.body
兼容处理：
document.body || document.documentElement
//alert( document.documentElement.clientWidth ); //1920 //alert( document.body.clientWidth ); // 1904 //alert( document.documentElement.clientHeight ) //alert( document.body.clientHeight ) //------------------------------兼容IE var btn = document.getElementById("btn"); btn.onclick = function(){ //alert( document.documentElement.scrollTop ) //alert( document.body.scrollTop ) var top = document.documentElement.scrollTop || document.body.scrollTop; alert(top); }
二、事件流
1.什么是事件：事情的起因
1.事件冒泡：从内到外
2.事件捕获：从外到内
var dv1 = document.getElementById("dv1"); var dv2 = document.getElementById("dv2"); dv1.onclick = function(){ alert(1); } dv2.onclick = function(){ alert(2); }
2.鼠标类事件
1.onclick ====》单击事件
2.ondblclick===》双击事件
3.oncontextmenu ===》右击事件
4.onmouseover ====》鼠标移入（穿过）
5.onmouseout ====》鼠标移出
6.onmousemove ===》鼠标移入（一直会执行的代码）
7.onmousedown ====》鼠标按下
8.onmouseup ===》鼠标释放(松开)
var box = document.getElementById("box"); /* box.onclick = function(){ alert(1); }*/ /* box.ondblclick = function(){ alert("双击"); } */ /* box.oncontextmenu = function(){ alert("右击"); } */ var box = document.getElementById("box"); /* box.onmouseover = function(){ alert("移入"); } box.onmouseout = function(){ alert("移出"); }*/ /* box.onmousemove = function(){ alert(1); }*/ box.onmousedown = function(){ alert("按下"); } box.onmouseup = function(){ alert("放开手"); }
3.键盘类事件
onkeydown ===》键盘按下
onkeyup ===》键盘释放（松开）
********* keyCode ===>属性*******:得到键盘中的值
/* document.onkeydown = function(){ alert("我的键盘已经按下了"); }*/ /* document.onkeyup = function(){ alert("释放键盘"); } */ document.onkeydown = function(e){ if(e.keyCode==13){ alert("回车"); } } ------------------------------------------------- //1>单机btn按钮 ====》出现一个弹出层 //2>按下键盘中的esc键，删除掉弹出层 var btn = document.getElementById("btn"); btn.onclick = function(){ var oDiv = document.createElement("div"); oDiv.setAttribute("id","box"); document.body.appendChild(oDiv); document.onkeydown = function(e){ if(e.keyCode==27){ document.body.removeChild(oDiv); } } } -------------------------------------------------- var box = document.getElementById("box"); document.onkeydown = function(e){ switch(e.keyCode){ case 37: box.style.left = box.offsetLeft-10+"px"; break; case 38: box.style.top = box.offsetTop-10+"px"; break; case 39: box.style.left = box.offsetLeft+10+"px"; break; case 40: box.style.top = box.offsetTop+10+"px"; break; } }
4.其他类事件
1.onload ===》加载（DOM加载完毕）
2.onfocus ===》得到焦点
3.onblur ===》失去焦点
4.onresize ===》浏览器或者框架尺寸发生变化时触发
5.onscroll ===》滚动条发生变化时触发
6.onchange ===》值发生变化时触发
window.onload = function(){ var box = document.getElementById("box"); box.style.background = "red"; } //----------------------------- /* var txt = document.getElementById("txt"); txt.onfocus = function(){ txt.style.background = "red"; } txt.onblur = function(){ txt.style.background = "blue"; } */ /* window.onresize = function(){ alert(1); } */ /*window.onscroll = function(){ alert("滚动条发生变化了"); }*/ //----------------------------- var city = document.getElementById("city"); //下拉列表 city.onchange = function(){ alert("改变值了"); }
5.事件处理程序===》添加
HTML事件处理程序
语法：把事件添加到了节点身上
缺点：HTML和js耦合
<div id="box" onclick="alert( fn(20,10) )">我是box</div> <script src="script.js"></script> <script > function fn(num1,num2){ return num1*num2; } </script>
DOM0级事件处理程序
语法：box.onclick = function(){}
缺点：同样的元素，同样的事件，后面的会覆盖前面
var box = document.getElementById("box"); /* box.onclick = function(){ alert( fn(30,20) ); } /*box.onclick = function(){ alret(1); } box.onclick = function(){ alert(2); }*/
DOM2级事件处理程序
语法：box.addEventListener(事件名称,函数,false|true)
参数1：不需要加on ===>click
参数3: false代表了冒泡
true代表了捕获
缺点：在IE（8或者8以下）不兼容
var box = document.getElementById("box"); box.addEventListener("click",function(){ alert(1); },false); box.addEventListener("click",function(){ alert(2); },false);
IE事件处理程序
语法：box.attachEvent(事件名称,函数)
参数1需要加入on
var box = document.getElementById("box"); box.attachEvent("onclick",function(){ alert(1); }) box.attachEvent("onclick",function(){ alert(2); })
跨浏览器事件处理程序(做兼容)
DOM0事件处理程序
DOM2事件处理程序
IE事件处理程序
var box = document.getElementById("box"); function setEvent(dom,evt,fn){ if(dom.addEventListener){ dom.addEventListener(evt,fn,false); }else if(dom.attachEvent){ dom.attachEvent("on"+evt,fn); }else{ dom["on"+evt] = fn; } } setEvent(box,"click",function(){ alert(1); }) setEvent(box,"click",function(){ alert(2); })
6.删除事件处理程序
dom0级事件处理程序删除===》
语法：DOM对象.事件名称 = null
var box = document.getElementById("box"); box.onclick = function(){ alert(1); } box.onclick = null;
dom2级事件处理程序删除===》
语法：DOM对象.removeEventListener(事件名称,函数,false|true)
参数1》事件名称不需要加入on
参数2》函数,添加和删除必须都是同一个函数，才有效
参数3》false===>冒泡 true===》捕获
var box = document.getElementById("box"); function fn(){ alert(1); } box.addEventListener("click",fn,false); box.removeEventListener("click",fn,false);
IE事件处理程序删除===》
语法：DOM对象. attachEvent(事件名称,函数)
参数1》事件名称需要加入on
参数2》函数,添加和删除必须都是同一个函数，才有效
var box = document.getElementById("box"); function fn(){ alert(222); } box.attachEvent("onclick",fn) box.detachEvent("onclick",fn)
兼容IE删除事件处理程序
/可以删除dom0级 dom2级 IE事件处理程序的函数 function removeEvent(dom,evt,fn){ if(dom.removeEventListener){ dom.removeEventListener(evt,fn,false); }else if(dom.detachEvent){ dom.detachEvent("on"+evt,fn); }else{ dom["on"+evt] = null; } }
7.事件对象
非IE中事件对象====》参数
IE中事件对象===》window.event
跨浏览器事件对象===》window.event || e（参数）
var box = document.getElementById("box"); box.onclick = function(e){ //alert(e); //alert(window.event); //1>非IE ===》参数e //2>IE===》window.event var evt = window.event || e; alert(evt); }
8.事件对象的属性
target(非IE)===》目标（返回对应的DOM节点）
srcElement（IE中）====》目标（返回对应的DOM节点）
处理兼容： 事件对象.target||事件对象.srcElement
var box = document.getElementById("box"); box.onclick = function(e){ var e = window.event||e; //alert(e.target); //alert(e.srcElement); var tar = e.target || e.srcElement; alert(tar); }
clientX ===》返回当前鼠标位置距离浏览器左侧的值
clientY ===》返回当前鼠标位置距离浏览器顶部的值
****注意：返回的结果是没有加入单位的
document.onclick = function(e){ var e = window.event || e; //alert(e.clientX); alert(e.clientY); }
9.事件委托
原理：冒泡的原理
优点：
1》性能较好（提高）
2》即使后添加的也有效
/*我有一个快递（我要去拿） li 让张三兄弟帮我去拿一下快递 ul */ /*var uls = document.getElementById("uls"); var btn = document.getElementById("btn"); btn.onclick = function(){ var li = document.createElement("li"); uls.appendChild(li); } uls.onclick = function(e){ var e = window.event || e; if(e.target.nodeName=="LI"){ e.target.style.background = "red"; } }*/ var btn = document.getElementById("btn"); var lis = document.getElementsByTagName("li"); var uls = document.getElementById("uls"); btn.onclick = function(){ var li = document.createElement("li"); uls.appendChild(li); } for(var i=0;i<lis.length;i++){ lis[i].onclick = function(){ this.style.background = "red"; } }
10.事件阻止冒泡
语法：
事件对象.属性名称
非IE：e.stopPropagation
IE：e.cancelBubble = true;
var dv1 = document.getElementById("dv1"), dv2 = document.getElementById("dv2"); dv1.onclick = function(){ alert("dv1"); } dv2.onclick = function(e){ var e = window.event || e; //e.stopPropagation(); //e.cancelBubble = true; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } alert("dv2"); }
11.事件阻止默认行为
语法：
事件对象.属性名称
非IE：e.preventDefault()
IE：e.returnValue = false;
var oA = document.getElementById("oA"); oA.onclick = function(e){ var e = window.event || e; e.preventDefault(); } var box = document.getElementById("box"); box.oncontextmenu = function(e){ var e = window.event || e; //e.preventDefault(); e.returnValue = false; alert(111); } document.oncontextmenu = function(e){ var e = window.event || e; //e.preventDefault(); //e.returnValue = false; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } alert(1111); }
以上是关于javascript-DOM的主要内容，如果未能解决你的问题，请参考以下文章