DOM小结

目录

01、DOM获取元素的方法（8个）

02、DOM中的节点和关系属性

03、DOM中的节点和关系属性—综合应用

04、DOM增删改

05、DOM增删改—综合应用

00、DOM概念

DOM：document object model 文档对象模型

DOM 就是描述整个html 页面中节点关系的图谱

在DOM中，提供了很多的获取元素的方法和之间关系的属性以及操作这些元素的方法

01、DOM获取元素的方法（8个）

<!--<input type="text" name="tab">-->

<div id="tab" class="tab">

    <ul>

        <li>视频</li>

        <li>新闻</li>

        <li>综艺</li>

    </ul>

    <div></div>

    <div></div>

    <div></div>

    <!--通过name来分组-->

    <input type="radio" name="sex" value="男" checked="checked">男

    <input type="radio" name="sex" value="女">女

    <input type="button" value="获取性别" id="btn">

</div>

<!--<div id="tab"></div>-->

1)document.getElementById("元素的ID");

在整个文档中，通过元素的ID获取到这个元素对象(获取的是一个元素)

注意：如果页面中ID重复了，这个方法默认获取第一个元素

在IE6和IE7中，会把表单元素(input)的name属性值当做ID来使用

在IE6、7中，不区分ID的大小写

项目实战注意：不要让表单元素的name 和其他元素的ID 重复、不要用ID 的大小写来区分我们的不同元素

如果没有获取到元素，返回的结果是null

我们可以直接的用元素的ID来代表当前这个元素的对象(不推荐)

console.log(tab);//不推荐

tab.style.border="1px solid red";//不推荐

var oDiv=document.getElementById("tab");

console.log(oDiv.tagName);

2) 通过元素的标签名，来获取一组元素( 有几个就获取几个)

document.getElementsByTagName("元素标签名");//在整个文档中，通过元素的标签名获取一组元素

获取的是一个对象数据类型结果，并且是一个类数组(以数字作为索引，索引从0开始，逐级递增，索引代表的是当前对应的某一个元素，有一个叫做length的属性，代表获取元素的个数)

此处的document称之为上下文(context)，就是我们自己可以限定当前获取元素的范围[getElementById的上下文只能是document]

var oTab=document.getElementById("tab");

var oLis=oTab.getElementsByTagName("li");

console.dir(oLis);

oLis.length代表获取元素的个数 oLis["length"]

oLis[0]获取第一个li或者oLis.item[0]，oLis.0是不行的，数字属性名不能用 对象.数字属性名 的方式

3) context. getElementsByName()  通过元素的name 属性的值来获取一组元素

在IE浏览器下只对表单元素起作用

这个方法应用于获取具有同样name的表单元素

<input type="radio" name="sex" value="男" checked="checked">男

<input type="radio" name="sex" value="女">女

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

btn.οnclick= function () {

    var oSex=document.getElementsByName("sex");

    var cur="";

    for(var i=0;i<oSex.length;i++){

        if(oSex[i].checked===true){

            cur=oSex[i].value;

            break;

        }

    }

    console.log(cur);

}

4) context. getElementsByClassName() 通过元素的类型(class 值)

是项目中最常用的一种方法，但是，这个方法不兼容 IE6~8中会报错

获取多个元素的这几个方法，即使你获取的只有一个，他也是类数组，也是一个集合，如果想用其中的第一个，你也要通过索引拿出来用

var oList=document.getElementsByClassName("tab");

console.dir(oList);

5) document.documentElement;获取HTML元素

  document. body; 获取body 元素

这两种用于获取当前页面的位置信息

var curWidth=document.documentElement.clientWidth||document.body.clientWidth;//兼容所有浏览器，获取当前屏幕的宽度

var curHeight=document.documentElement.clientHeight||document.body.clientHeight;//兼容所有浏览器，获取当前屏幕的宽度

6)在移动端获取元素常用的方法(IE6~8不兼容)

document.querySelector();//获取一个

document.querySelectorAll();//获取多个 类数组集合

var oDiv=document.querySelector("#tab");//"#id" ".class" "标签名"

var oLis=document.querySelectorAll("#tab li");//#tab下的所有li

document.querySelectorAll("input[type='radio']");//获取所有type=radio的input元素

querySelector、jQuery中的选择器是参考css选择器的规则

02、DOM中的节点和关系属性

1) 节点： Node  一个页面中的标签、文字、注释... 都是节点

2) 获取关系的属性

childNodes：获取所有的子节点

children：获取所有的元素子节点

parentNode：获取父亲节点

previousSibling：获取上一个哥哥节点

nextSibling：获取下一个弟弟节点

firstChild：获取所有子节点中的第一个

lastChild：获取所有子节点中的最后一个

3)在js中需要我们掌握的节点类型：

	nodeType	nodeName	nodeValue
元素节点(元素标签)	1	大写的标签名	null
文本节点(文字)	3	#text	文本内容
注释节点(注释)	8	#comment	注释内容
document	9	#document	null

在标准浏览器下，我们把space(空格)和Enter(回车)都当做我们的文本节点处理

4)方法：模拟我们的children方法，实现获取指定元素下的元素子节点

/**

* getMyChildren：获取指定元素下的所有元素节点

* @param:

*  ele：我们要获取谁下面的，就把谁传进来

*  tagName:你告诉我的获取哪种类型的元素，例如："div"就是代表只获取div元素节点

* @return:

*  我们最后获取的元素子节点

* by LittleGao on 2017/07/15

*/

function getMyChildren(ele,tagName){

    //1、用一个空盒子放我们想要的元素，然后获取ele下的所有子节点(包含文本、注释、元素)

    var ary=[],nodes=ele.childNodes;

    //2、循环所有的子节点

    for(var i=0;i<nodes.length;i++){

        //3、把每一次循环得到的对应的节点赋值给cur，，而且可能是文本、注释、元素

        var cur=nodes[i];

        //4、我们只需要把元素节点放到盒子中就可以了，nodeType等于1的就是元素节点

        if(cur.nodeType===1){

            if(tagName){

                //5、如果你传递给我tagName了,那么进一步筛选(没有传递tagName就是undefined,假)，在这里我们的nodeName是大写，我们的tagName可能是大写，也可能是小写，所以我们先把两边调用toLowerCase(),都转化成小写再比较

                if(cur.nodeName.toLowerCase()===tagName.toLowerCase()){

                    ary.push(cur);

                }

            }else{

                //6、如果没有传递，默认就把所有的元素都扔到盒子里

                ary.push(cur);

            }

        }

    }

return ary;

}

var oDiv=document.getElementById("div1");

console.log(getMyChildren(oDiv,"ul"));

//        console.log(oDiv.nodeType);//1

//        console.log(oDiv.nodeName);//DIV

//        console.log(oDiv.nodeValue);//null

//        console.log(oDiv.childNodes);

//        console.log(oDiv.children);

//        console.log(oDiv.parentNode);

//        console.log(oDiv.previousSibling);

//        console.log(oDiv.nextSibling);

//        console.log(oDiv.firstChild);

//        console.log(oDiv.lastChild);

03、DOM中的节点和关系属性— 综合应用

//        如果我想获取li3的上一个哥哥元素节点，我们发现，直接previousSibling获取的不一定是元素，可能是#text节点，往上再找多少级也不知道

        var oLi3=document.getElementById("li3");

//        console.log(pre(oLi3));

//        console.log(preAll(oLi3));

//        console.log(next(oLi3));

//        console.log(nextAll(oLi3));

//        console.log(nearSibling(oLi3));

        console.log(allSilbing(oLi3));

        //获取上一个哥哥元素节点

        function pre(ele){

            var pre=ele.previousSibling;

            //若哥哥节点存在，且不为元素节点，则继续循环

            while(pre && pre.nodeType!==1){

                pre=pre.previousSibling;

            }

            return pre;

        }

        //获取所有的哥哥元素节点

        function preAll(ele){

            var ary=[],pre=ele.previousSibling;

            while(pre){

                if(pre.nodeType===1){

                    ary.unshift(pre);//ary.unshift()头部添加

                }

                pre=pre.previousSibling;

            }

            return ary;

        }

        //获取下一个弟弟元素节点

        function next(ele){

            var next=ele.nextSibling;

            while(next && next.nodeType!==1){

                next=next.nextSibling;

            }

            return next;

        }

        //获取所有的弟弟节点

        function nextAll(ele){

            var ary=[],next=ele.nextSibling;

            while(next){

                if(next.nodeType===1){

                    ary.push(next);

                }

                next=next.nextSibling;

            }

            return ary;

        }

        //获取相邻的两个元素节点

        function nearSibling(ele){

            var ary=[];

            ary.push(pre(ele));

            ary.push(next(ele));

            return ary;

        }

        //获取所有的兄弟节点元素

        function allSilbing(ele){

            var ary=preAll(ele).concat(nextAll(ele));//10、 数组链接 var c=a.concat(b);

            return ary;

        }

04、DOM增删改

动态创建一个元素标签
document.createElement:创建一个元素标签对象
appendChild：把这个元素添加到指定容器的末尾位置 容器.appendChild(元素)

insertBefore：把新的元素newEle添加到老的元素oldEle元素之前，oldEle.parentNode.insertBefore(newEle,oldEle);

removeChild

cloneNode

replaceChild

（1）动态创建一个div元素对象

//动态创建一个div元素对象

var oDiv=document.createElement('div');

//设置对象属性

oDiv.id='div1';

oDiv.style.width='200px';

oDiv.style.height='100px';

oDiv.style.border='1px solid red';

（2）把对象添加到我们的页面中

//把对象添加到我们的页面中

document.body.appendChild( oDiv);

var oP=document.createElement('p');

oP.id='p1';

oP.style.width='200px';

oP.style.height='100px';

oP.style.border='1px solid black';

//以下两种均可

document.body.insertBefore(oP,oDiv);

oDiv.parentNode.insertBefore(oP,oDiv);

（3）删除元素

oDiv.parentNode.removeChild(oDiv);//删除元素

（4）克隆元素

var clo=oP.cloneNode(true);//克隆元素 true:把元素里面的子子孙孙都克隆，默认是false(不写也是false) 只克隆当前的，子孙不要

clo.style.backgroundColor='yellow';

document.body.appendChild(clo);

（5）替换掉元素

var dd=document.createElement('div');

dd.style.width='200px';

dd.style.height='100px';

dd.style.border='1px solid blue';

oP.parentNode.replaceChild(dd,oP);//替换掉oP

（6）增加自定义属性

把clo看做一个对象数据类型，我们在它开辟的空间中增加一个属性名

类似于var obj={};obj.name='jack';

clo.lastName;//这种方法不会改变html元素的结构

clo['lastName']='little';

console.log(clo['lastName']);//只能使用这种方法来获取

setAttribute(属性名，属性值)：设置元素的属性(包含自定义属性)

修改html元素的结构(使用这个方法在html上可以体现出来)

//        <p id="p1" .... lastname="LittleGao"></p>

clo.setAttribute('lastName','LittleGao');

console.log(clo.getAttribute('lastName'));//只能使用这种方法来获取

clo.removeAttribute('lastName');//删除属性

在IE6~8下这个方法不能修改class属性，clo.setAttribute('class','cloneeee')

clo. className= 'cloneee'; // 这样可以

05、DOM增删改—综合应用

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>DOM增删改案例</title>

    <style type="text/css">

        body,div,input{

            margin: 0;

            padding: 0;

            font-family: "Microsoft YaHei", "微软雅黑", tahoma, arial, simsun, "宋体";

            font-size: 14px;

        }

        html,body{

            width: 100%;

            height: 100%;

            overflow: hidden;

        }

        input{

            display: block;

            margin: 10px auto;

            width: 100px;

            height: 30px;

            line-height: 30px;

        }

        #bg{

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: #000;

            opacity: 0.1;

        }

        #layer{

            width: 300px;

            height: 300px;

            /*border: 1px solid #ccc;*/

            background: #fff;

            position: absolute;

            top: 0;

            left: 0;

            background: -webkit-radial-gradient(#ffff00,green);

            box-shadow: inset 0 0 20px 5px #000;

            border-radius:50px 150px ;

        }

    </style>

</head>

<body>

    <input type="button" id="btn" value="登录">

    <script type="text/javascript">

        var cw=document.body.clientWidth||document.documentElement.clientWidth;

        var ch=document.body.clientHeight||document.documentElement.clientHeight;

        //绑定监听事件

        var btn=document.getElementById('btn');

        btn.οnclick= function () {

            //动态创建bg和layer

            var bg=document.createElement('div');

            bg.id='bg';

            var layer=document.createElement('div');

            layer.id='layer';

            layer.style.top=(ch-300)/2+'px';

            layer.style.left=(cw-300)/2+'px';

            //将bg和layer添加到页面,添加顺序不能乱 覆盖

            document.body.appendChild(bg);

            document.body.appendChild(layer);

            //点击关闭bg和layer

            layer.οnclick= function () {

                document.body.removeChild(layer);

                document.body.removeChild(bg);

            }

        }

    </script>

</body>

</html>