javascript学习总结(二)

1 DOM

1.1 DOM简介

DOM:Document Object Model. 文档对象模型
功能:通过HTML DOM,Javascript能够访问和改变HTML文档的所有元素,将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。

  • W3C DOM 标准被分为 3 个不同的部分:

    • 核心 DOM - 针对任何结构化文档的标准模型
      • Document:文档对象

      • Element:元素对象

      • Attribute:属性对象

      • Text:文本对象

      • Comment:注释对象

      • Node:节点对象,其他5个的父对象

    • XML DOM - 针对 XML 文档的标准模型
    • HTML DOM - 针对 HTML 文档的标准模型

HMTL DOM模型被结构化为对象树。
对象的HTML DOM树如下:
在这里插入图片描述

通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

1.2 核心DOM模型

访问 HTML 页面中的任何元素,总是从访问 document 对象开始。

属性是您能够获取或设置的值(就比如改变 HTML 元素的内容)。

方法是您能够完成的动作(比如添加或删除 HTML 元素)。

1.2.1 Document:文档对象

1. 查找HTML元素

1. document.getElementById(): 通过元素 id 来查找元素对象。id属性值一般唯一
2. document.getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. document.getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. document.getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

2. 添加和删除HTML元素

1. document.createElement(element):创建 HTML 元素
2. document.removeChild(element):删除 HTML 元素
3. document.appendChild(element):添加 HTML 元素
4. document.replaceChild(element):替换 HTML 元素
5. document.write(text): 	写入 HTML 输出流

3. 添加事件处理程序

document.getElementById(id).onclick = function(){code}: 向 onclick 事件添加事件

4. 改变HTML元素

1. element.innerHTML = new html content:改变元素的 inner HTML
2. element.attribute = new value:改变 HTML 元素的属性值
3. element.setAttribute(attribute, value):改变 HTML 元素的属性值
4. element.style.property = new style:改变 HTML 元素的样式

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

<div class="cls1">div4</div>
<div class="cls1">div5</div>

<input type="text" name="username">

<script>
    /*
   Document:文档对象
       1. 创建(获取):在html dom模型中可以使用window对象来获取
           1. window.document
           2. document
       2. 方法:
           1. 获取Element对象:
               1. getElementById()	: 根据id属性值获取元素对象。id属性值一般唯一
               2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
               3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
               4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
           2. 创建其他DOM对象:
               createAttribute(name)
               createComment()
               createElement()
               createTextNode()
       3. 属性
    */

    //2.根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
   // alert(divs.length);

    //3.根据class属性值获取元素对象们,返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
    //alert(div_cls.length);

    //4.根据name属性值获取元素对象们,返回值是一个数组
    var ele_username = document.getElementsByName("username");
    //alert(ele_username.length);

    var table = document.createElement("table");
    alert(table);
</script>
</body>
</html>

运行结果如图
在这里插入图片描述

1.2.2 Element:元素对象

1. 获取/创建:通过document来获取和创建
	2. 方法:
		1. removeAttribute():删除属性
		2. setAttribute():设置属性

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>
<body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">

<script>
    //获取btn
    var btn_set = document.getElementById("btn_set");
    btn_set.onclick = function () {
        //1.获取标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }

    //获取btn
    var btn_remove = document.getElementById("btn_remove");
    btn_remove.removeAttribute("href");
</script>

</body>
</html>

运行结果如图
在这里插入图片描述

1.2.3 Node:节点对象

特点:所有dom对象都可以被认为是一个节点

CRUD dom树:

  • appendChild():向节点的子节点列表的结尾添加新的子节点。
  • removeChild() :删除(并返回)当前节点的指定子节点。
  • replaceChild():用新节点替换一个子节点。

属性

  • parentNode 返回节点的父节点。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>

    <style>

        div{
            border: 1px solid red;
        }

        #div1{
            width: 200px;
            height: 200px;
        }

        #div2{
            width: 100px;
            height: 100px;
        }

        #div3{
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>

    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--<input type="button" id="del" value="删除子节点">-->

    <script>
        //1.获取超链接
        var element_a = document.getElementById("del");
        //2.绑定单击事件
        element_a.onclick = function () {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.removeChild(div2);
        }

        //1.获取超链接
        var element_add = document.getElementById("add");
        //2.绑定单击事件
        element_add.onclick = function () {
            var div1 = document.getElementById("div1");
            //给div1添加结点
            //创建div结点
            var div3 = document.createElement("div");
            div3.setAttribute("id", "div3");
            div1.appendChild(div3);
        }

        /*
        1.可以被点击
        2.点击后跳转到href指定的url

        需求:保留1功能,去掉2功能
        实现:href = "javascript:void(0);"
         */

        var div2 = document.getElementById("div2");
        var div1 = div2.parentNode;
        alert(div1);
    </script>
</body>
</html>

运行如图
在这里插入图片描述

1.2.4 innerHTML

修改 HTML 文档内容最简单的方法是,使用 innerHTML 属性。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDON</title>
</head>
<body>
    <div id="div1">
        div
    </div>

    <script>
        var div = document.getElementById("div1");
        var innerHTML = div.innerHTML;
        //alert(innerHTML);
        //div标签中替换一个文本输入框
        //div.innerHTML = "<input type='text'>";

        //div标签中追加一个文本输入框
        div.innerHTML += "<input type='text'>";


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

运行结果如图
在这里插入图片描述

1.2.5 控制样式

  1. 使用元素的style属性来设置
    如:
    //修改样式方式1
    div1.style.border = “1px solid red”;
    div1.style.width = “200px”;
    //font-size–> fontSize
    div1.style.fontSize = “20px”;

  2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制样式</title>

    <style>
        .d1{
            border: 1px solid red;
            width:100px;
            height: 100px;
        }

        .d2{
            border: 1px solid red;
            width:100px;
            height: 200px;
        }

    </style>
</head>
<body>

    <div id="div1">
        div1
    </div>

    <div id="div2">
        div2
    </div>

<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function () {
        //修改样式方式1
        div1.style.border = "1px solid red";

        div1.style.width = "200px";

        //font-size --> fontsize
        div1.style.fontSize = "20px";
    }

    var div2 = document.getElementById("div2");
    div2.onclick =  function () {
        div2.className = "d1";
    }

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

运行结果如图
在这里插入图片描述

1.2.6 绑定事件

如何绑定事件

  1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
  • 事件:onclick— 单击事件
  1. 通过js获取元素对象,指定事件属性,设置一个函数

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
    <img id="light" src="img/off.gif">
<script>
    /*
       分析:
           1.获取图片对象
           2.绑定单击事件
           3.每次点击切换图片
               * 规则:
                   * 如果灯是开的 on,切换图片为 off
                   * 如果灯是关的 off,切换图片为 on
               * 使用标记flag来完成

    */
    //1.获取图片对象
    var light = document.getElementById("light");

    var flag = false;//代表灯是灭的。off

    //2.绑定单机图片
    light.onclick = function (){
        if(flag){//判断如果灯是开的,则灭掉
            light.src="img/off.gif";
            flag = false;
             }
        else{
            //如果灯是灭的
            light.src="img/on.gif";
            flag = true;
        }
    }
</script>
</body>
</html>

运行结果如图

在这里插入图片描述

1.2.7 事件监听机制

概念:某些组件被执行了某些操作后,触发某些代码的执行。

  • 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了

  • 事件源:组件。如: 按钮 文本输入框…

  • 监听器:代码。

  • 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。

  • 常见的事件

    1. 点击事件:

      1. onclick:单击事件
      2. ondblclick:双击事件
    2. 焦点事件

      1. onblur:失去焦点
      2. onfocus:元素获得焦点。
    3. 加载事件:

      1. onload:一张页面或一幅图像完成加载。
    4. 鼠标事件:

      1. onmousedown 鼠标按钮被按下。
      2. onmouseup 鼠标按键被松开。
      3. onmousemove 鼠标被移动。
      4. onmouseover 鼠标移到某元素之上。
      5. onmouseout 鼠标从某元素移开。
    5. 键盘事件:

      1. onkeydown 某个键盘按键被按下。
      2. onkeyup 某个键盘按键被松开。
      3. onkeypress 某个键盘按键被按下并松开。
    6. 选择和改变

      1. onchange 域的内容被改变。
      2. onselect 文本被选中。
    7. 表单事件:

      1. onsubmit 确认按钮被点击。
      2. onreset 重置按钮被点击。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>

    <script>
        /*
        常见事件:
             1. 点击事件:
                1. onclick:单击事件
                2. ondblclick:双击事件
            2. 焦点事件
                1. onblur:失去焦点。
                    * 一般用于表单验证
                2. onfocus:元素获得焦点。

            3. 加载事件:
                1. onload:一张页面或一幅图像完成加载。

            4. 鼠标事件:
                1. onmousedown	鼠标按钮被按下。
                    * 定义方法时,定义一个形参,接受event对象。
                    * event对象的button属性可以获取鼠标按钮键被点击了。
                2. onmouseup	鼠标按键被松开。
                3. onmousemove	鼠标被移动。
                4. onmouseover	鼠标移到某元素之上。
                5. onmouseout	鼠标从某元素移开。


            5. 键盘事件:
                1. onkeydown	某个键盘按键被按下。
                2. onkeyup		某个键盘按键被松开。
                3. onkeypress	某个键盘按键被按下并松开。

            6. 选择和改变
                1. onchange	域的内容被改变。
                2. onselect	文本被选中。

            7. 表单事件:
                1. onsubmit	确认按钮被点击。
                    * 可以阻止表单的提交
                        * 方法返回false则表单被阻止提交。
                2. onreset	重置按钮被点击。
         */
        //2.加载完成事件  onload
        window.onload = function () {
            //1.失去焦点事件
        /*    document.getElementById("username").onblur = function () {
                alert("失去焦点!");
            }*/

            //2.绑定鼠标移动到元素之上事件
         /*   document.getElementById("username").onmouseover = function () {
                alert("鼠标来了!");
            }*/

            //3.绑定鼠标点击事件
            document.getElementById("username").onmousedowm = function (event) {
                //alert("鼠标点击了!");
                alert(event.button);
            }

           document.getElementById("username").onkeydown = function (event) {
                if(event.keyCode == 13){
                    alert("提交表单");
                }
            }

            /*document.getElementById("username").onchange = function (event) {
                alert("改变了!");
            }*/

            document.getElementById("username").onsubmit = function () {
                //校验用户名格式是否正确
                var flag = false;
                return flag;
            }


        }


        function checkForm() {
            return true;
        }

    </script>
</head>
<body>
    <form action="#" id="form" onclick="return checkForm();">
    <input name="username" id="username">
    <select id="city">
        <option>--请选择--</option>
        <option>北京</option>
        <option>上海</option>
        <option>西安</option>
    </select>
    <input type="submit" value="提交">
</form>

</body>
</html>

运行结果如图
在这里插入图片描述

2 BOM

2.1 DOM简介

  1. 概念:Browser Object Model 浏览器对象模型

    • 将浏览器的各个组成部分封装成对象。
  2. 组成:

    • Window:窗口对象
    • Navigator:浏览器对象
    • Screen:显示器屏幕对象
    • History:历史记录对象
    • Location:地址栏对象

不存在浏览器对象模型(BOM)的官方标准。

现代的浏览器已经(几乎)实现了 JavaScript 交互相同的方法和属性,因此它经常作为 BOM 的方法和属性被提到。

2.2 核心BOM模型

2.2.1 window 窗口对象

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
</head>
<body>
    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">

<script>
    /*
            Window:窗口对象
                1. 创建
                2. 方法
                     1. 与弹出框有关的方法:
                        alert()	显示带有一段消息和一个确认按钮的警告框。
                        confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                            * 如果用户点击确定按钮,则方法返回true
                            * 如果用户点击取消按钮,则方法返回false
                        prompt()	显示可提示用户输入的对话框。
                            * 返回值:获取用户输入的值
                     2. 与打开关闭有关的方法:
                        close()	关闭浏览器窗口。
                            * 谁调用我 ,我关谁
                        open()	打开一个新的浏览器窗口
                            * 返回新的Window对象
                     3. 与定时器有关的方式
                        setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                            * 参数:
                                1. js代码或者方法对象
                                2. 毫秒值
                            * 返回值:唯一标识,用于取消定时器
                        clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

                        setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
                        clearInterval()	取消由 setInterval() 设置的 timeout。

                3. 属性:
                    1. 获取其他BOM对象:
                        history
                        location
                        Navigator
                        Screen:
                    2. 获取DOM对象
                        document
                4. 特点
                    * Window对象不需要创建可以直接使用 window使用。 window.方法名();
                    * window引用可以省略。  方法名();

         */

    /*alert("hello window");
    window.alert("hello a");*/

    //确认框
    /*var flag = confirm("您确认要退出吗?");
    if(flag){
        //退出操作
        alert("欢迎再次光临!");
    }else{
        //提示
        alert("手别抖。");
    }*/

    //输入框
    /*var result = prompt("请输入用户名");
    alert(result);*/


    //打开新窗口
    //open("https://www.baidu.com");
   /* var openBtn = document.getElementById("openBtn");
    var newWindow;
    openBtn.οnclick=function () {
        //打开新窗口
        newWindow =window.open("https://www.baidu.com");
    }
    //关闭新窗口
   var  closeBtn = document.getElementById("closeBtn");
    closeBtn.onclick = function () {
        //关闭新窗口
        newWindow.close();
    }
*/
   //一次性定时器
   //setTimeout("alert('boom1~~')",3000);
    //setTimeout("fun();",2000);
    //var id = setTimeout(fun,1000);
    //clearTimeout(id);


  /*  function fun(){
        alert('boom~~');
    }
    //循环定时器
   var id1 = setInterval(fun,2000);
    clearTimeout(id1);
*/

  //获取历史
    var h1 = window.history;
    var h2 = history;

    alert(h1);
    alert(h2);

    var openBtn = window.document.getElementById("openBtn");
    alert(openBtn);

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

运行结果如图
在这里插入图片描述

2.2.2 location 地址栏对象

  1. 创建(获取):
    1. window.location
    2. location

    1. 方法:
      • reload() 重新加载当前文档。刷新
    2. 属性
      • href 设置或返回完整的 URL。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>
</head>
<body>
    <input type="button" id="btn" value="刷新">
    <input type="button" id="goItcast" value="去传智">

    <script>
        //reload方法,定义一个按钮,点击按钮,刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function () {
            //3.刷新页面
            location.reload();
        }
        //获取Href
        var href = location.href;
        //1.获取按钮
        var goItcast = document.getElementById("goItcast");
        //2.绑定单击事件
        goItcast.onclick = function () {
            //3.访问baidu.com
            location.href = "https://www/baidu.com";
        }
    </script>
</body>
</html>

运行结果如图
在这里插入图片描述

2.2.3 history 历史对象

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History</title>
</head>
<body>
    <input type="button" id="btn" value="获取历史记录个数">
    <a href="09_History对象2.html">09页面</a>
    <input type="button" id="forward" value="前进">

<script>
    /*
    History:历史记录对象
        1.创建(获取)
            1.window.history
            2.history

        2.方法
            *back()  加载history 列表中的前一个url
            * forward() 加载history列表中的下一个url
            * go(参数) 加载history列表中的某个具体页面
                *参数
                    *正数:前进几个历史记录
                    * 负数:后退几个历史记录
         3.属性:
            *length  返回当前窗口历史列表中的url数量

     */
    //1.获取按钮
    var btn = document.getElementById("btn");
    //2.绑定单机事件
    btn.onclick = function () {
        //3.获取当前窗口历史记录个数
        var length = history.length;
        alert(length);
    }

    //1.获取按钮
    var forward = document.getElementById("forward");
    //2.绑定单机事件
    forward.onclick = function (){
        //前进
        history.forward();
    }
</script>
</body>
</html>

运行结果如图
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页