05-DOM相关知识点讲解

2017-07-08  本文已影响83人  magic_pill

DOM

DOM内容主要分为四部分：

什么是DOM和节点

获取节点：

直接获取：获取元素节点常用的方法主要有三种：通过id、标签名、类名：
document.getElementsByTagName("div")[0];   //获取数组中的元素
document.getElementsByClassName("a")[0];   //获取数组中的元素

<div id="box"></div>
<script>
    var div = document.getElementById("box");

    div.onclick = function () {
        alert(1);
    }
</script>
通过访问关系获取；
nodeType == 1，表示的是元素节点`记住`，元素就是标签
nodeTyoe == 2，表示的是属性节点，了解
nodeType == 3，表示的是文本节点，了解

<div id="yijiang" class="jiangjiang" value="jiang">义江</div>
<script>
        var ele = document.getElementById("yijiang");
        var attr1 = ele.getAttributeNode("id");
        var attr2 = ele.getAttributeNode("value");
        var text = ele.firstChild;

        console.log(ele);       //<div id="yijiang" class="jiangjiang" value="jiang">义江</div>
        console.log(attr1);     //id="yijiang"
        console.log(attr2);     //value="jiang"
        console.log(text);      //"义江"

        console.log(ele.nodeType);      //1
        console.log(attr1.nodeType);    //2
        console.log(attr2.nodeType);    //2
        console.log(text.nodeType);     //3

        console.log(ele.nodeValue);      //null
        console.log(attr1.nodeValue);    //yijiang
        console.log(attr2.nodeValue);    //jiang
        console.log(text.nodeValue);     //义江
</script>

function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0;i<p.length;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
}

节点操作（3种）重要：节点的访问关系都是属性，而节点的操作都是函数或者方法。

属性操作（3种）：

//2.绑定事件（利用for循环绑定事件）
for(var aIndex in aArr){
        aArr[aIndex].onclick = function () {
            show.src = this.href;
    //warning       des.innerHTML = aArr[aIndex].title;
            des.innerHTML = this.title;
            return false;
        }
}

- 注：绑定描述时，只能通过this获取title，不能通过aArr[aIndex]获取，因为绑定事件时候，并没有立刻执行事件，当用户点击时已经无法通过Arr[aIndex]获取对应标签。

排它思想

绑定事件：三种方法

onload事件

DOM对象的属性

erweima_s.onmouseover = function () {
        erweima_b.className = "erweima-big show";
    };
erweima_s.onmouseout = function () {
        erweima_b.className = erweima_b.className.replace("show","hide");
    };

<body>
    <hr>禁用/解禁文本框 <br>
    账  号：<input value="yijiangwnag" class="account"><button>禁用</button><button>解禁</button>
    <script>
        window.onload = function () {
            var account = document.getElementsByClassName("account")[0];
            var ban = document.getElementsByTagName("button")[0];
            var banCancel = document.getElementsByTagName("button")[1];
            ban.onclick = function () {
//                account.setAttribute("disabled",true);
                account["disabled"] = true;
            };
            banCancel.onclick = function () {
//                account.removeAttribute("disabled");
                account["disabled"] = false;
            };
        }
    </script>
</body>

<body>
        京东：<input id="jd" value="我是京东"><br>
        淘宝：<input id="tb"><label class="tbLabel">我是淘宝</label><br>
        placeholder：<input placeholder="我是placeholder">
    <script>
        //京东/淘宝输入框
        var jd = document.getElementById("jd");
        var tb = document.getElementById("tb");
        var tbL = document.getElementsByClassName("tbLabel")[0];
        jd.onfocus = function () {
            if (jd.value == "我是京东"){
                jd.value = "";
            }
        };
        jd.onblur = function () {
            if (jd.value == ""){
                jd.value = "我是京东";
            }
        };
        tb.oninput = function () {
            if (tb.value == ""){    //但是淘宝连续输空格label不消失的bug日后解决
                tbL.className = "tbLabel show";
            }else {
                tbL.className = "tbLabel hide";
            }
        };
    </script>
</body>

<body>
    账号：<input id="checkAcc" onblur="fn(this)"> <br>
    密码：<input id="checkSec" onblur="fn(this)">
    <script>
    //要求用户名3~6位，密码在6~8位，如果不正确就高亮显示（显示红色）
    function fn(aaa) {
        console.log(this);
        if (aaa.value.length > 12 || aaa.value.length < 6){
            aaa.className = "wrong";
        }else {
            aaa.className = "right";
        }
    }
    </script>
</body>

    <body>
    <button id="selectFish">水产品</button><button id="rid">去除</button>
    <br>
    <select>
        <option id="banana">香蕉</option>
        <option>茄子</option>
        <option id="fish" >鳄鱼</option>
        <option>西瓜</option>
    </select>
    <script>
        //挑选出下拉列表中的某一项
        var selBtn = document.getElementById("selectFish");
        var ridBtn = document.getElementById("rid");
        var eyu = document.getElementById("fish");
        var banana = document.getElementById("banana");
        selBtn.onclick = function () {
            eyu.selected = true;
        };
        ridBtn.onclick = function () {
            eyu.selected = false;
            banana.selected = true;
        };
    </script>
    </body>

<body>
    <input type="text"> <br>
    <input type="text"> <br>
    <input type="text"> <br>
    <input type="text"> <br>
    <input type="text"> <br>
    <button>赋值</button>
    <button>取值</button>
<script>
    var inpArr = document.getElementsByTagName("input");
    var btnArr = document.getElementsByTagName("button");
    //赋值
    btnArr[0].onclick = function () {
        for(var i=0; i<inpArr.length; i++){
            inpArr[i].value = i;
        }
    };
    //取值
    btnArr[1].onclick = function () {
        var valueArr = [];
        for(var i=0; i<inpArr.length; i++){
            valueArr.push(inpArr[i].value);
        }
        console.log(valueArr.join(" "));
    };
</script>
</body>

DOM的样式设置(两种方式)

className
style
var body = document.getElementsByTagName("body");
//或者
var body = document.body;   //document内置了直接获取body的方法

封装

动态创建元素(操作元素)三种方式

动态创建表格（了解）

内置对象

对象名称 对象说明
Arguments 函数实参集合
Array 数组
Boolean 布尔对象
Date 日期时间对象
Error 异常对象
Function 函数构造器
Math 数学对象
Number 数值对象
Object 基础对象
RegExp 正则表达式对象
String 字符串对象
Date
String（Boolean/Number）
字符/字符编码 = Str.charAt/charCodeAt(索引值);

新字符串 = str1.concat(str2);

var s1 = "zhangsan";
var s2 = s1.substring(5);

var s1 = "zhangsan";
//当调用s1.substring(5)时，具体过程解析如下：
var s1Temp = new String(s1);
var s2 = s1Ttemp.substring(5);
s1Temp = null;
HTML方法（了解）
Math
addEventListenner(事件监听器,原事件被执行的时候，后面绑定的事件照样会被执行，不会发生层叠现象，更适合团队开发。如果同一个按钮绑定多个onclick事件，后面的会层叠前面的，只会执行最后一个onclick绑定事件。)
<body>
    <button>按钮一</button>
    <button>按钮二</button>

    <script>
        var btn1 = document.getElementsByTagName("button")[0];
        var btn2 = document.getElementsByTagName("button")[1];

        btn1.onclick = function () {
            console.log("我是王老大");
        };

        fn("click",fn1,btn1);
        fn("click",fn2,btn1);
        fn("click",fn3,btn1);
        fn("mouseover",fn2,btn2);

        function fn1() {
            console.log("黄河入海流；关公耍大刀");
        }
        function fn2() {
            console.log("我自横刀向天笑，去留肝胆两昆仑");
        }
        function fn3() {
            console.log("床前明月光，一片白茫茫");
        }

        function fn(str, func, ele) {
            var oldFunc = ele["on"+str];
            ele["on"+str] = function () {
                if (oldFunc){
                    oldFunc();
                }
                func();
            }
        }
    </script>
</body>

var btn3 = document.getElementsByTagName("button")[2];
btn3.addEventListener("click",fn33);
function fn33() {
        console.log("你点了addEventListener");
}

var btn4 = document.getElementsByTagName("button")[3];
btn4.attachEvent("onmouseover",fn44);
function fn44() {
        console.log("你碰到attachEvent了");
}

//兼容性写法，定义一个对象EventListen
        EventListen = {
            addEvent: function (ele,fn,str) {
                if (ele.addEventListener){
                    ele.addEventListener(str,fn);
                }else if (ele.attachEvent){
                    ele.attachEvent("on"+str,fn);
                }else{
                    ele["on"+str] = function () {
                        console.log("都不能绑定");
                    }
                }
            }
        };

        EventListen.addEvent(btn4,fn44,"mouseover");

EventListen = {
        deleteEvent:function (ele,fn,str) {
            if (ele.removeEventListener){
                ele.removeEventListener(str, fn);
            }else if (ele.detachEvent){
                ele.detach("on"+str,fn);
            }else {
                ele["on"+str] = null;
            }
        }
};
EventListen.deleteEvent(btn4,fn,"click");

//封装
EventListen = {
    addEvent: function (ele,fn,str) {
        if (ele.addEventListener){
            ele.addEventListener(str,fn);
        }else if (ele.attachEvent){
            ele.attachEvent("on"+str,fn);
        }else{
            ele["on"+str] = function () {
                console.log("都不能绑定");
            }
        }
    },

    deleteEvent:function (ele,fn,str) {
        if (ele.removeEventListener){
            ele.removeEventListener(str, fn);
        }else if (ele.detachEvent){
            ele.detach("on"+str,fn);
        }else {
            ele["on"+str] = null;
        }
    }
};
var btn = document.getElementsByTagName("button")[4];
EventListen.addEvent(btn,fn1,"click");
EventListen.deleteEvent(btn,fn1,"click");

事件（DOM重点）

什么是事件
注册事件的两种方式
上一篇 下一篇

猜你喜欢

热点阅读