zoukankan      html  css  js  c++  java
  • 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)
            }
    

      

  • 相关阅读:
    智器SmartQ T7实体店试用体验
    BI笔记之SSAS库Process的几种方案
    PowerTip of the Day from powershell.com上周汇总(八)
    PowerTip of the Day2010071420100716 summary
    PowerTip of the Day from powershell.com上周汇总(十)
    PowerTip of the Day from powershell.com上周汇总(六)
    重新整理Cellset转Datatable
    自动加密web.config配置节批处理
    与DotNet数据对象结合的自定义数据对象设计 (二) 数据集合与DataTable
    在VS2003中以ClassLibrary工程的方式管理Web工程.
  • 原文地址:https://www.cnblogs.com/bainianminguo/p/8661037.html
Copyright © 2011-2022 走看看