Dom对象总结介绍&事件介绍&增删查找标签

1、dom有5个属性，属性内容如下

下面开始介绍Dom属性，一共有5个属性

1、document object：文档对象

2、element object：标签对象

3、test object：文本对象

4、attribute object：属性对象

5、comment object：注释对象

　　

2、dom导航方法

Dom下面的导航方法
    parentElement              父标签
    Children                   所有的子标签
    firstElementChild          第一个子标签
    lastElementChild           最后一个子标签
    nextElementSibling         下一个兄弟标签
    previousElementSibling     上一个兄弟标签

　　

先看个实例

实例如下
    <a href="#">百度一下</a>
    <div id="div1">
        <div>hello div</div>
        <p>hello p</p>
    </div>
    <h1>hello h1</h1>
    <script>
        var ele = document.getElementById("div1")

        alert(ele.lastElementChild.nodeName)

        alert(ele.firstElementChild.nodeName)

        alert(ele.children)
        注意：这里返回的是一个数组，可以通过下面的方法循环打印
        var ele_sons = ele.children
        for (var i = 0;i <= ele_sons.length;i++){
            alert(ele_sons[i])
        }

        alert(ele.nextElementSibling.nodeName)

        alert(ele.previousElementSibling.nodeName)
    </script>

　　

3、寻找对象的方式

3_1、全局查找

首先这是全局查找，在整个document中查找
    通过id属性查找标签，因为id是全网唯一的，所以返回的结果就是一个标签
    var ele = document.getElementById("div1")

    通过class属性查找标签
    var ele = document.getElementsByClassName("c1")，这里由于class属性不是全网唯一的，所以这里返回的不是一个标签，而是一个数据，计算class的标签
    只有一个，他也是一个数组，需要通过索引来取具体的标签

    通过标签的名字查找标签
    var ele3 = document.getElementsByTagName()
    通过标签名称查找的结果和class效果是一样的，都是一个数组

    通过name属性的值来查找标签，同样也是返回一个数组，这个用的不多，常用的是上面的三种
     var els3 = document.getElementsByName("sb")

　　

3_2、局部查找

下面看下局部查找，就是查找指定标签下的标签
    把上面的document替换为指定的ele也是可以的,这个就是局部查找

    局部查找支持标签名称
            <div class="c1">
        <div id="c2">hello div
            <p>这是一个子标签的p标签</p>
        </div>

        <p class="c3" name="sb">hello p</p>
    </div>
        <script>
            var ele = document.getElementById("c2")
            var ele2 = ele.getElementsByTagName("p")
            在ele2下面查找p标签

            alert(ele2[0].innerText)

        </script>

    局部对象查找不支持id查找
      var ele3 = ele.getElementById("c4")
      alert(ele3.nodeName)

      这个会报错的
      Uncaught TypeError: ele.getElementById is not a function

    局部查找支持class查找
    var ele4 = ele.getElementsByClassName("c5")[0];
    alert(ele4.nodeName)

    局部查找不支持name属性查找
    var ele5 = ele.getElementsByName("c6")[0];
    alert(ele5.nodeName)

    这个会报错的
    Uncaught TypeError: ele.getElementsByName is not a function

　　

4、Dom事件介绍

Dom中的事件，比如我们上面的例子onclick，鼠标点击就会触发onclick事件

    onclick事件:鼠标单击会触发事件
    ondblclick事件:鼠标双击会触发事件
    onfocus事件:元素获得焦点的时候触发的事件,比如一个input输入框，当把鼠标点击输入框，输入就会获得焦点
    onblur事件：元素失去焦点的时候触发的事件

    下面用input标签写一个例子，默认input标签中有默认值，鼠标点击，默认值去掉，鼠标离开，默认值恢复
    <input class="text" type="text" value="默认值" onfocus=func5() onblur=func6()>

    javascript的代码
        function func5() {
            var ret = document.getElementsByClassName("text");
            ret[0].value = "";
        }
        function func6() {
            var ret = document.getElementsByClassName("text");
            ret[0].value = "默认值";
        }

    onchange事件：一般用select标签中，如果select选中的标签被更改，则会触发该事件
    <select onchange=func8()>
            <option>背景</option>
            <option>广州</option>
            <option>深圳</option>
            <option>湖南</option>
            <option>内蒙古</option>
    </select>

    onkeydown事件：按下键盘中的一个键触发的事件，比如我们按回车触发提交
    <input type="button" value="键盘触发" onkeydown="func9()">

    keycode事件：按下指定的键盘中的某个键触发的事件，用的时候自己查文档吧

    onkeydown事件：键盘某个键被按下触发的事件

    onkeyup事件：键盘某个键被松开触发的事件

    onkeypress事件：键盘某个键被按下然后松开触发的事件

    onload事件：一张页面或者一张图加载完成触发的事件

    onmousedown事件：鼠标按下触发的事件

    onmousemove事件：鼠标在标签的范围内移动就会触发的事件

    onmouseout事件：鼠标离开区域，就会触发事件

    onmouseover事件：鼠标进入区域，就会触发事件

    onsubmit事件：这个事件必须给form标签绑定，submit标签提交数据的时候触发的事件，就比如我们向后台提交数据，前台先做校验，通过则提交，不通过则不让往后台提交,不通过则
    return false阻止往后台提交数据

    <form action="#" method="post" onsubmit=func1(event)>
        姓名：<input id="id1" type="text" name="username">
        年龄：<input id="id2" type="text" name="age">
        <input type="submit" value="提交">
    </form>

    javascript代码，有两种方法来实现
        function func1(event) {

        alert("验证失败")
        event.preventDefault()
//        阻止默认的行为

    }

    第二种方法
    <form action="#" method="post" onsubmit="return func2()">
        姓名：<input id="id3" type="text" name="username">
        年龄：<input id="id4" type="text" name="age">
        <input type="submit" value="提交">
    </form>

    javascript代码
    function func2() {
        alert("验证失败");
        return false;
    }

    stoppropation事件:一般用在div标签中，阻止事件的延生，比如下面的例子
        <div id="div1" onclick="func3()">
        <div id="div2" onclick="func4()"></div>
    </div>

    在这个代码中，点击id为div2的标签会弹出div2和div1，但是如果我们想点击div2的时候只弹出div1，该怎么办呢？
    function func3() {
        alert("div1")
    }

    function func4() {
        alert("div2")
    }

    下面这个例子中使用

    <div id="div1" onclick="func3()">
        <div id="div2" onclick="func4(event)"></div>
    </div>

    在下面的代码中，点击id为div2的标签不会弹出div1的事件
    function func4(event) {
        alert("div5")
        event.stopPropagation()
    }

　　

5、Dom实现增删查标签的效果

　　5_1、先看下如何增删标签

增
    只能通过一个父标签，然后通过这个父标签添加子标签
    createElement()创建标签
    appendChild()添加标签到指定的父标签的下面

删
    只能通过一个父标签，然后通过这个父标签去删除子标签

    removeChild():删除指定的子标签

    下面的例子使用添加标签和删除标签的作用
     <div id="div1">
        <div id="div2">hello div2</div>
        <p>hello p</p>
    </div>
    <input type="button" value="添加标签" onclick="func1()">
    <input type="button" value="删除标签" onclick="func2()">

    <script>
        增加标签的函数
        function func1() {
            var father_ele = document.getElementById("div1");
            var son_ele = document.createElement("p");
            son_ele.innerText = "被添加的p标签";
            son_ele.style.fontSize = "20px";
            father_ele.appendChild(son_ele);
        }
        删除标签的函数
        function func2() {
            var father_ele = document.getElementById("div1");
            var remove_ele = father_ele.lastElementChild;
            father_ele.removeChild(remove_ele);
        }
    </script>

　　5_2、在来看下如何修改标签

首先修改标签的文本内容

    改变文本内容
            son_ele.innerHTML = "<a href='www.baidu.com'>百度一下</a>";
            这个出来的效果是a标签，可以解析HTML标签

            son_ele.innerText = "<a href='www.baidu.com'>百度一下</a>";
            这个出来的效果是单纯的字符串,所以innerText只能添加文本，不会解析HTML标签

　　

在来看下如何修改css样式

    改变css的样式

            我们可以做这样一个例子，鼠标点击事件会把字体的名字变大，或者变小，如果字体大小为10px，则把字体大小修改为30px，如果字体大小为30px，则修改字体大小为10px

            <p id="p1" onclick="func3()">测试修改字体属性</p>

            function func3() {
            var ele = document.getElementById("p1");

            if(ele.style.fontSize == "30px"){
                ele.style.fontSize = "10px";
            }else {
                ele.style.fontSize = "30px";
            }
        }

　　

我们还可以直接修改class属性的值

直接修改class属性
    a、首先定义一个css样式
        .big{
            color: red;
            font-size: 30px;
        }
    b、然后写html代码
    <p id="p2" onclick="func4()">测试直接修改class属性</p>

    c、然后写javascript代码
        function func4() {
            var ele = document.getElementById("p2");
            alert(ele.classList);
            查看ele的class的信息

            ele.classList.add("big");
            添加class属性

            alert(ele.classList)

            ele.classList.remove("big")
            删除class属性

            alert(ele.classList)
        }