JavaScript(三)

最新推荐文章于 2024-08-26 20:25:07 发布

李大哥1

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量120

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42330641/article/details/127900689

版权

1 DOM

1.1 DOM基本知识

DOM是文档对象模型；
DOM提供操作和访问html的方法；
浏览器把结构化文档以树的形式存储在浏览器内存中；
DOM有三个节点：
- 元素节点：
  
  div就称为元素节点，即标签
- 属性节点：
  
  class和id就奔称为属性节点；
- 文本节点：
  
  div中的标签和值就被称为文本节点；

1.2 查找节点

方法	描述
document.getElementById	根据id获取节点
document.getElementsByName	根据name属性获取节点，name属性不是唯一所以返回的是数组
document.getElementsByClassName	根据class属性获取节点，calss属性不是唯一所以返回的是数组
document.getElementsByTagName	根据标签名获取节点，标签名不是唯一所以返回的是数组
document.querySelector	根据css选择器获取节点，不能使用伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    div.test1{ }
</head>

<body>
    <p id="001">我是一个段落</p>
    <h3 name="段落">我是一个标题</h3>
    <h3>我是一个标题</h3>
    <div class="test">我是第一个块级元素</div>
    <div class="test">我是第二个块级元素</div>
    <div class="test1">我是第三个块级元素</div>
    <script>
        //根据id查找节点
        var testname1 = document.getElementById("001");
        console.log(testname1); //<p id="001">我是一个段落</p>
        //根据name属性查找节点 返回的数组
        var testname2 = document.getElementsByName("段落");
        console.log(testname2[0]); //<h3 name="段落">我是一个标题</h3>
        //根据标签查找节点 返回的数组
        var testname3 = document.getElementsByTagName("div");
        console.log(testname3[0]); //<div class="test">我是一个块级元素</div>
        console.log(testname3[1]); //<div class="test1">我是二个块级元素</div>
        //根据class属性查找节点 返回的数组
        var testname4 = document.getElementsByClassName("test");
        console.log(testname4[0]);
        console.log(testname4[1]);
        //根据css选择器查找节点
        var testname5 = document.querySelector("div.test1");
        console.log(testname5);
    </script>


</body>

</html>

在这里插入图片描述

1.3 对元素进行操作

方法	说明
element.attribute	修改元素的属性
element.setattribute(key,value)	设置新的属性
element.style.property	为元素设置属性
element.innerHTML	为元素设置子元素或者返回子元素
element.innerText	为元素设置文本或者返回所有子元素的所有文本
element.children	返回该节点的子节点对象，只会返回html对象数组
element.childNodes	返回该节点的子节点对象，会返回文本，属性、html节点数组
element.firstChild	返回该节点第一个子节点对象
element.firstChild	返回该节点最后一个子节点对象
element.parentNode	返回该节点的父节点对象
element.nextSibling	返回该节点的同级下一个节点对象，没有则返回为null 数组
element.priviousSibling	返回该节点的上一级同级对象，没有则返回为null组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div class="test3">
        我是帅哥
        <p id="001">我是一个段落</p>
        我是小帅哥
        <h3 name="段落">我是一个标题</h3>
        <h3>我是一个标题</h3>
        <div class="test">我是第一个块级元素</div>
        <div class="test">我是第二个块级元素</div>
        我是大帅哥
    </div>
    <div class="test1">我是同级元素</div>
    <script>
        //获取节点
        var testname1 = document.querySelector("div.test3");
        //修改节点的属性
        testname1.className = "test2";
        //为节点增加属性
        testname1.setAttribute("id", "0002");
        //返回节点的所有子元素；
        console.log(testname1.innerHTML);
        console.log("----------------我是分割线----------");
        //返回节点的所有子元素的文本；
        console.log(testname1.innerText);
        console.log("----------------我是分割线----------");
        console.log(testname1);
        console.log("----------------我是分割线----------");
        //返回当前元素的子节点
        var testname2 = document.getElementsByTagName("div");
        console.log(testname2[0].childNodes);
        console.log("----------------我是分割线----------");
        console.log(testname2[0].children);
        console.log("----------------我是分割线----------");
        console.log(testname2[0].firstChild);
        console.log("----------------我是分割线----------");
        console.log(testname2[0].lastChild);
        console.log("----------------我是分割线----------");
        var testname3 = document.getElementById("001");
        //返回testname3的父级元素
        var testname4 = testname3.parentNode;
        //返回testname3的同级上一个元素
        var testname5 = testname3.previousSibling;
        console.log(testname5);
        //返回testname3的同级下一个元素
        var testname6 = testname3.nextSibling;
        console.log(testname6);
    </script>

</body>

</html>

在这里插入图片描述

1.4 操作节点

方法	说明
doucument.createElement(element)	创建html
doucument.removeChild(element)	删除html
doucument.replaceChild(element)	替换html
doucument.appendChild(element)	添加html
doucument.write(text)	可写⼊ HTML

在这里插入代码片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div class="test3" id="002">
        我是帅哥
        <p id="001">我是一个段落</p>
        我是小帅哥
        <h3 name="段落">我是一个标题</h3>
        <h3>我是一个标题</h3>
        <div class="test">我是第一个块级元素</div>
        <div class="test">我是第二个块级元素</div>
        我是大帅哥

    </div>
    <div class="test1">我是同级元素</div>
    <script>
        //创建一个元素
        var testname1 = document.createElement("div");
        testname1.setAttribute("id", "006")
        console.log(testname1);
        //删除一个元素
        var testname2 = document.getElementById("002");
        var testname3 = document.getElementById("001");
        testname2.removeChild(testname3);
        console.log(testname2);
        //替换一个元素
        var testname4 = document.getElementsByName("段落")[0];
        testname2.removeChild(testname4, testname1);
        console.log(testname2);

        //添加一个元素
        var testname8 = document.createElement("div");
        testname8.setAttribute("id", "008");
        testname8.innerHTML = "我是一个标题";
        testname2.appendChild(testname8)
        console.log(testname2);

        //直接写入javacript
        document.write("<h1>我是一级标题</h1>");
    </script>


</body>

</html>

在这里插入图片描述

1.5 事件

1.5.1 常用的事件

事件	说明
onchange	HTML元素发生了改变
onclick	鼠标点击了元素
onmouseover	鼠标移动到了该元素
onmousedown	鼠标移开元素
onload	页面加载结束
onkeydown	按下键盘

1.5.2 事件使用

内联事件：给元素绑定一个事件属性或者函数；
给定一个事件属性；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1 onmouseover="var a =1;console.log(a);">1级标题</h1>
</body>

</html>

在这里插入图片描述

给定一个函数；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1 onmouseover="test()">1级标题</h1>
    <script>
        function test() {
            console.log("小李 小曾")
        }
    </script>
</body>

</html>

在这里插入图片描述

JS中绑定1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1 id="001">1级标题</h1>
    <script>
        var test = document.getElementById("001");
        test.onclick = test1;
        test.onclick = test2;


        function test1(e) {
            console.log("小辜")
        };

        function test2(e) {
            console.log("小曾")
        };
        //使用同一个节点绑定2个函数onclick的形式则会被覆盖
    </script>
</body>

</html>

在这里插入图片描述

JS中绑定2使用addEventListener监听
- addEventListener语法 target.addEventListener(type listener usecapture)
  - target 是操作的节点对象；
  - type 事件的类型比如说：click change…;
  - listener 事件监听的后续操作函数，这个函数必须是继承了listener的接口
  - usecapture 这个指的是监听的顺序 false 是冒泡，true 是捕获；
一个事件绑定一个函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1 id="001">1级标题</h1>
    <script>
        var test = document.getElementById("001");
        test.addEventListener("click", test1)

        function test1(e) {
            console.log("小辜 小曾")
        }
    </script>
</body>

</html>

在这里插入图片描述

一个事件绑定多个函数；
- 会代码按照顺序执行；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <h1 id="001">1级标题</h1>
    <script>
        var test = document.getElementById("001");
        test.addEventListener("click", test1)
        test.addEventListener("click", test2)

        function test1(e) {
            console.log("小辜")
        }

        function test2(e) {
            console.log("小曾")
        }
    </script>
</body>

</html>

在这里插入图片描述

1.5.3 事件的解绑

使用on****的形式解绑可以赋值null的形式接触绑定例如 οnclick=null；
使用removeEventListener移除对事件的绑定；removeEventListener的语法和参数和addEventListener相同；

1.5.4 dom的事件流

事件流有3个阶段捕获阶段、处于目标阶段、冒泡阶段；
- 捕获阶段是事件的第一个阶段，指的是事件从根节点流向对象节点，途经的各节点会触发各阶段的捕获事件；
- 处于目标阶段，指的是事件到了对象节点触发了事件；
- 冒泡阶段，事件到达了对象节点后，并不会停止，会根据dom树向根节点回流；
  捕获举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="001">
        最外层
        <div id="002">
            中层
            <div id="003">
                内层
            </div>
        </div>

    </div>
    <script>
        var test4 = document.getElementById("001");
        test4.addEventListener("click", test1, false)
        var test5 = document.getElementById("002");
        test5.addEventListener("click", test2, false)
        var test6 = document.getElementById("003");
        test6.addEventListener("click", test3, false)



        function test1(e) {
            console.log("我是最外层的事件")
        };

        function test2(e) {
            console.log("我是最中层的事件")
        };

        function test3(e) {
            console.log("我是最内层的事件")
        }
    </script>
</body>

</html>

在这里插入图片描述
冒泡举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="001">
        最外层
        <div id="002">
            中层
            <div id="003">
                内层
            </div>
        </div>

    </div>
    <script>
        var test4 = document.getElementById("001");
        test4.addEventListener("click", test1, true)
        var test5 = document.getElementById("002");
        test5.addEventListener("click", test2, true)
        var test6 = document.getElementById("003");
        test6.addEventListener("click", test3, true)



        function test1(e) {
            console.log("我是最外层的事件")
        };

        function test2(e) {
            console.log("我是最中层的事件")
        };

        function test3(e) {
            console.log("我是最内存的事件")
        }
    </script>
</body>

</html>

在这里插入图片描述

停止冒泡、捕获的方法

event.stopPropagation();

1.6 常用的定时器

语法：(延后执行)setTimeout(function(){},delay,param1,param2,…);
- function(){} 等待被执行的函数；
- delay 等待的毫秒数；
- param1 可选参数函数里面的参数；
- clearTimeout(timer) timer是setTimeout返回的数据；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        var time = setTimeout(test, 5000, "小辜");
        var time1 = setTimeout(test1, 5000);
        var time2 = setTimeout(test2, 5000);
        //小梅不会被执行
        clearTimeout(time2);

        function test(a) {
            console.log(a)
        };

        function test1() {
            console.log("小红")
        };

        function test2() {
            console.log("小梅")
        };
    </script>
</body>

</html>

在这里插入图片描述

语法：(定时执行)setInterval(function(){},delay,param1,param2,…);
- function(){} 执行的函数频率；
- delay 毫秒数执行频率；
- param1 可选参数函数里面的参数；
- clearInterval(timer) timer是setTimeout返回的数据；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        var time = setInterval(test, 2000, "小辜");
        var time1 = setInterval(test1, 2000);
        var time2 = setInterval(test2, 2000);
        //小梅不会被执行
        clearInterval(time2);

        function test(a) {
            console.log(a)
        };

        function test1() {
            console.log("小红")
        };

        function test2() {
            console.log("小梅")
        };
    </script>
</body>

</html>

在这里插入图片描述

2 BOM

2.1 BOM的基本知识

BOM浏览器对象模型，提供很多操作浏览器的功能的对象；
- window是最顶层的对象流，以window.属性，window.方法()调用window下有六大对象分为是；
  - doucment
  - history
  - location
  - navigator
  - screen
  - frames

2.2 window的常用方法

window弹窗
- alert 普通弹窗，没有返回值，只有确认按钮；
- confirm 选择弹窗有返回值，确定返回true 取消返回false；
- prompt 输入弹窗返回输入的值；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        alert('Hello world!!!');

        var boolean1 = confirm("请选择确认或者取消")
        console.log(boolean1);

        var prompt1 = prompt("请输入：")
        console.log(prompt1);
    </script>
</body>
</html>

在这里插入图片描述

window窗口
- window.open(url,窗口名称，窗口的属性)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        window.open('http://www.baidu.com');
    </script>
</body>

</html>

在这里插入图片描述

window定时器
- 详细可以见本文章的1.6

2.3 location 常用方法

window.location.href 获取整个url地址；
window.location.protocol 获取通信协议；
window.location.host 获取域名；
window.location.hostname 获取主机名；
window.location.port 获取端口；
window.location.pathname获取路径；
window.location.search 获取？后面的参数
window.location.assign();跳转到其他地址，必须是正确的地址不然会报错；
window.location.replace();跳转到其他地址；必须是正确的地址不然会报错；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        console.log(window.location.href);
        console.log(window.location.protocol);
        console.log(window.location.host);
        console.log(window.location.hostname);
        console.log(window.location.port);
        console.log(window.location.pathname);
        console.log(window.location.search);
        // window.location.assign("https://www.baidu.com")
        // window.location.replace("https://www.cnblogs.com/changx/p/10971916.html")
    </script>
</body>

</html>

在这里插入图片描述

2.4 history常用方法

window.history.back();网页向后退；
window.history.forward();//前进；
window.history.go(-1);//跳转到指定的页数，负数往后退，正数往前进；

2.5 navigator常用方法

navigator 用于获取客户端(浏览器)的信息；
navigator.userAgent属性返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息。
window.navigator.platform 浏览器操作系统的平台；
window.navigator.plugins.length 返回浏览器的操插件列表（数组）;
window.navigator.mimeTypes.length 返回浏览器支持的minne类型；

2.6 dcument设置cookie

设置Cooke语法
- document.cookie=“username=Nick; expires=Thu, 18 Dec 2043 12:00:00 GMT”;
删除 Cooke语法
- 给cookie赋值为空
简单运用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        window.onload = function() {
            checkCookie();
        }

        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
            var expires = 'expires=' + d.toGMTString();
            document.cookie = cname + '=' + cvalue + ';' + expires;
        }
        // 获取cookie
        function getCookie(cname) {
            var name = cname + '=';
            var ca = document.cookie.split(';'); // 将多个cookie字符串以;分割数组;
            for (var i = 0; i < ca.length; i++) {
                if (ca[i].indexOf(name) >= 0) {
                    return ca[i].split('=')[1]
                }
            }
            return '';
        }
        //
        function checkCookie() {
            var user = getCookie("username");
            if (user) {
                alert("欢迎 " + user + " 再次访问");
            } else {
                user = prompt("请输⼊你的名字:", "");
                if (user) {
                    setCookie("username", user, 30);
                }
            }
        }
    </script>
</body>

</html>