javascript-DOM

时间：2017-09-20 20:57:34 阅读：350 评论：0 收藏：0 [点我收藏+]

标签：单击 margin 加载缺点 border jpg es2017 创建 idt

一、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";
}

View Code

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";
    }

}

View Code

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);

View Code

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");

View Code

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");

屏幕随机出现demo

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]);

View Code

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")   );

View Code

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);

}

View Code

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);

}

View Code

二、事件流

1.什么是事件：事情的起因

1.事件冒泡：从内到外

2.事件捕获：从外到内

var dv1 = document.getElementById("dv1");
var dv2 = document.getElementById("dv2");


dv1.onclick = function(){

    alert(1);
}

dv2.onclick = function(){

    alert(2);

}

View Code

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("放开手");
}

View Code

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;

    }

}

View Code

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("改变值了");

}

View Code

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>

View Code

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);
}*/

View Code

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);

View Code

IE事件处理程序
语法：box.attachEvent(事件名称,函数)

参数1需要加入on

var box = document.getElementById("box");

box.attachEvent("onclick",function(){

    alert(1);

})


box.attachEvent("onclick",function(){

    alert(2);

})

View Code

跨浏览器事件处理程序(做兼容)

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);
})

View Code

6.删除事件处理程序

dom0级事件处理程序删除===》

语法：DOM对象.事件名称 = null

var box = document.getElementById("box");

box.onclick = function(){

    alert(1);
}
box.onclick = null;

View Code

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);

View Code

IE事件处理程序删除===》

语法：DOM对象. attachEvent(事件名称,函数)

参数1》事件名称需要加入on

参数2》函数,添加和删除必须都是同一个函数，才有效

var box = document.getElementById("box");


function fn(){

    alert(222);
}


box.attachEvent("onclick",fn)

box.detachEvent("onclick",fn)

View Code

兼容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;
    }

}

View Code

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);

}

View Code

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);
}

View Code

clientX ===》返回当前鼠标位置距离浏览器左侧的值

clientY ===》返回当前鼠标位置距离浏览器顶部的值

****注意：返回的结果是没有加入单位的

document.onclick = function(e){

    var e = window.event || e;

    //alert(e.clientX);
    alert(e.clientY);

}

View Code

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";

    }
}

View Code

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");

}

View Code

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);

}

View Code

技术分享

javascript-DOM

标签：单击 margin 加载缺点 border jpg es2017 创建 idt

原文地址：http://www.cnblogs.com/elet/p/7553736.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行