DOM对象(DHTML)与HTML DOM Event(事件)

最新推荐文章于 2021-06-19 22:34:06 发布

Henry_Lv

最新推荐文章于 2021-06-19 22:34:06 发布

阅读量551

点赞数

分类专栏： JavaScript web编程基础

本文链接：https://blog.csdn.net/Henry_Lv/article/details/80237669

版权

web编程基础同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

DOM对象

什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

DOM 节点

整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)

画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

节点(自身)属性:

attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的文本值

推荐导航属性：

parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

节点树中的节点彼此拥有层级关系。

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：

页面查找：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法
通过使用 getElementsByName() 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>
<p>this is p</p>

<script>
   // ---------------查找节点-----------------------
   var div1=document.getElementById("div1");//只有用id来访问时获得一个节点，用其他方式会获取一个列表
   var div2=document.getElementsByClassName('div2');
   console.log(div2);    //HTMLCollection [div.div2]
    console.log(div2[0]);//<div class="div2">i am div2</div>

     // -------------节点属性--------------------
   console.log(div1.nodeName)//DIV
   console.log(div1.nodeValue)//null
   console.log(div1.nodeType)//1
   //innerHTML会将标签内的所以内容都输出包括标签，而innerText只会输出文本内容
   console.log(div1.innerHTML)// <div class="div2">i am div2</div>
                                //  <div name="yuan">i am div2</div>
                                //  <div id="div3">i am div2</div>
                                //  <p>hello p</p>
    console.log(div1.innerText)//i am div2
                                 //i am div2
                                 //i am div2
                                 //hello p
    console.log(div1.attributes)//NamedNodeMap {0: id, id: id, length: 1}


    // ----------------导航属性---------------------
    console.log(div1.parentElement.nodeName)//BODY
    console.log(div1.children)//HTMLCollection(4) [div.div2, div, div#div3, p, yuan: div, div3: div#div3]
    console.log(div1.children[0])//<div class="div2">i am div2</div>
    console.log(div1.nextElementSibling)//<p>this is p</p>


    // ----------------局部查找----------------------
    var div3=div1.getElementsByTagName('p')
    console.log(div3)//HTMLCollection [p]
    // 局部查找除了不能用id进行查找，其他方式都可以

</script>
</body>

</html>

HTML DOM Event(事件)

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect      文本被选中。
onsubmit      确认按钮被点击。

onload：

onload 属性开发中只给 body元素加.
这个属性的触发标志着页面内容被加载完成.

应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

onsubmit:

是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

     // ----------------------------------onload------------------------------------------------

        function f()
        {
            var ele1=document.getElementsByTagName('div')[0]
            console.log(ele1.innerHTML)
        }//如果把js写在前面，因为按从上到下的顺序执行将找不到标签，所以要在body标签里写上οnlοad=f()
        //或者也可以写成
        // window.οnlοad=function()
        // {
        //     var ele1=document.getElementsByTagName('div')[0]
        //     console.log(ele1.innerHTML)
        // }

    </script>
</head>

<body οnlοad="f()"><!--οnlοad='f()'表示在加载完所以标签后执行f()函数-->

<div>this is div</div>


    <!-------------------------------onfocus---------------------------------------------->

<input type="text" id="id1" value="请输入用户名" οnfοcus="f1()" οnblur="f2()"><!--绑定事件方式一-->

<script>
    var ele=document.getElementById('id1');
    function f1()
    {
        if(ele.value=='请输入用户名')
        {
            ele.value='';
        }
    }
    function f2()
    {
        if(!ele.value.trim())
        {
            ele.value='请输入用户名';
        }

    }
</script>

<!--------------------------------------绑定事件---------------------------------------->
<!--除了上面的绑定事件方式之外，还可以不再标签里绑定，而是与通过.事件绑定，实现js与css的解耦-->

<p>this is p</p>

<script>
    var ele2=document.getElementsByTagName('p')[0]
    ele2.οnclick=function ()
    {
        alert(666)
    }

</script>


<!--------------------------------this-------------------------------------------------->

<div id="div1" οnclick="func(this)">this is div1</div><!--当函数参数为this时，点击会自动定位到div标签-->
<script>
    function func(that) //必须要有除了this以外的任意形参
    {
        console.log(that)//that就是div标签
    }
</script>


<!------------------------------------onsubmit------------------------------------------->

<form action="" id="form1">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
<!--将下面的js注释掉会发现在点击提交之后,浏览器会将数据直接提交给后端后，刷新页面-->

<script>
    var ele3=document.getElementById('form1')
    ele3.οnsubmit=function(event)//event为特殊的形参，表示事件的状态
    {
        alert('输入格式错误')
        //如果不希望将数据上传至后端可以返回false，这样前段就不会上传数据也不会刷新页面，通常用于前段格式验证
        return false
        //同样可以用event的preventDefalt属性阻止上传数据与刷新
        // event.preventDefault()
    }
</script>


<!------------------------------------事件传播------------------------------------------->

<div id="abc_1" style="background: lightseagreen;width:300px;height:300px;">
    <div id="abc_2" style="background: aqua;width:200px;height:200px;"></div>
</div>
<script >
    document.getElementById("abc_1").οnclick=function()
    {
        alert('111');
    }
    document.getElementById("abc_2").οnclick=function(event)
    {
        alert('222');
        //如果注释掉会发现点击里面的小方块，外面的alert也会被触发，这就是传播
        event.stopPropagation(); //阻止事件向外层div传播.
    }
</script>
</body>
</html>

应用

遮罩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            background: white;
        }
        .div2{
            background: #b4b4b4;
            opacity: 0.5;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .div3{
            position: absolute;
            width: 300px;
            height: 150px;
            margin-top: 15%;
            margin-left: 40%;
            background: aqua;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="div1">this is content
    <button οnclick="show()">show</button></div>
<div class="div2 hide"></div>
<div class="div3 hide"><button οnclick="hide()">hide</button></div>

<script>
    var ele1=document.getElementsByClassName('div2')[0];
    var ele2=document.getElementsByClassName('div3')[0];
    function show()
    {
        ele1.classList.remove('hide')
        ele2.classList.remove('hide')
    }
    function hide()
    {
        ele1.classList.add('hide')
        ele2.classList.add('hide')
    }
</script>
</body>
</html>

正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px" cellpadding="15px">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
        <tr>
        <td colspan="4" style="text-align:center">
            <button οnclick="selectall()">全选</button>
            <button οnclick="cancelall()">取消</button>
            <button οnclick="reverse()">反选</button>
        </td>
    </tr>
</table>
<script>

    var eles=document.getElementsByTagName('input');

    function selectall() {
        for(var i=0;i<eles.length;i++)
        {
            eles[i].checked='checked'
        }

    }

    function cancelall()
    {
     for (var i=0;i<eles.length;i++)
     {
         eles[i].checked=false;
     }
    }

    function reverse()
    {
     for(var i=0;i<eles.length;i++)
     {
         eles[i].checked=!eles[i].checked;
     }
    }
</script>
</body>
</html>

二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select id="province">
    <option>请输入省份</option>
</select>
<select id="city">
    <option>请输入城市</option>
</select>
<script>

    data={湖北:['武汉','孝感','黄冈'],河南:['郑州','洛阳','开封'],福建:['福州','厦门','泉州']};
    //javascript中字典关键字可以直接写，不用字符串

    // console.log(typeof data);//类型为Object
    // console.log(data);
    // console.log(data.湖北[0]);//通过data.关键字或者data[关键字]都可以获得相应值


    var ele_pro=document.getElementById('province');
    var ele_city=document.getElementById('city');

    //添加省份
    for(var i in data)//i值就是关键字
    {
        // console.log(i)
        var ele_p=document.createElement('option');
        ele_p.innerHTML=i;
        ele_pro.appendChild(ele_p);
    }

    //为省份select绑定onchange事件，当select发生改变时触发函数
    ele_pro.οnchange=function()
    {
        ele_city.options.length=1;//在添加城市之前去除之前省份的城市option

        var ele=ele_pro.getElementsByTagName('option');
        for(var i=0;i<ele.length;i++)
        {
         if(ele[i].selected)//选中的option的selected为true
         {
             for(var j in data[ele[i].innerHTML])
             {
                 var ele_c=document.createElement('option');
                 ele_c.innerHTML=data[ele[i].innerHTML][j];
                 ele_city.appendChild(ele_c);
             }
         }
        }
    }

    //下面是更简便的写法

    // ele_pro.οnchange=function ()
    // {
    //     console.log(this.selectedIndex)//this会定位到ele_Pro标签,.selectedIndex是选中的标签的索引
    //     console.log(this.options[this.selectedIndex]);
    //
    //     ele_city.options.length=1;
    //
    //     for(var i=0;i<data[this.options[this.selectedIndex].innerHTML].length;i++)
    //     {
    //         var ele=document.createElement('option');
    //         ele.innerHTML=data[this.options[this.selectedIndex].innerHTML][i];
    //         ele_city.appendChild(ele);
    //     }
    // }

</script>
</body>
</html>