【JavaScript精华荟萃】精华汇总+易混淆知识（下篇）

本文深入探讨了前端开发中的关键技术，包括Navigator对象的应用建议、Window对象的方法、DOM操作及动态删除特性、Cookie劫持原理及其应用案例、表单提交的阻止与MD5加密实践，同时还分享了巩固JavaScript和HTML/CSS的学习技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、关于Navigator的建议

如下图，window.navigator为浏览器对象，用于获取浏览器信息，但是不建议用这些属性来判断和编写代码（例如if这个属性等于，就…），因为这些配置信息可以人为修改，自定义，因此，这些是可变的属性。
在这里插入图片描述

二、Window对象方法一览

因为JS最初就是为了作为浏览器的脚本，因此其操作浏览器的知识就显得格外重要，常用方法如图：
在这里插入图片描述

三、Document

1.控制台中直观显示

document可获取具体的文档树结点
在这里插入图片描述
在Console控制台中，进行获取DOM的测试，更加直观，如图：

2.DOM操作一览

在这里插入图片描述

三、DOM删除的动态性

在这里插入图片描述
下面这是错误的写法，因此父节点在在删除第一个p子节点后，下一个需要删除的还是第一个结点，而不是以静态的思想认为是第二个子结点。

<script>
	var pNode1 = document.getElementById('p1');
	var pFather = pNode1.parentElement;
	
	pFather.removeChild(pFather.children[0]);
	//错误写法：
	pFather.removeChild(pFather.children[1]);
	pFather.removeChild(pFather.children[2]);
</script>

四、劫持Cookie原理

例如，document可获取cookie
在这里插入图片描述
有些恶意人员，会获取你的cookie信息，上传到他的服务器上

但劫持cookie同样可以带来正面的效果，使用户更加方便，例如淘宝和天猫就是这样的

淘宝：
在这里插入图片描述
天猫：

当我们登录淘宝后：

刷新天猫的页面，也会自动登录

因此，可有以下猜想：在登录淘宝页面后，淘宝给我们生成了我们浏览器客户端的cookie，并发给我们，但同时也封装好了我们用户的唯一标识，其中也装入了给天猫服务器传此用户当前cookie或唯一标识的js脚本，于是天猫服务器上也将查找并接收此用户，并将天猫服务端的cookie传递给用户。整体思路就是这样，如果还有总控制服务器或其它实现方法，那么也还是偏离不了cookie劫持的思想。

五、阻止表单提交+MD5加密

1.阻止表单提交

form标签中，如果onsubmit事件值为false，那么表单就不会提交，可借此来传递函数，从而在函数中进行部分检验，来进行提示或是阻止提交。
在这里插入图片描述

2.MD5加密

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

   <form action="ok.html" method="post" onsubmit="return userValid()">
       <p>
           <span>用户名：</span>
           <input type="text" id="username" name="username">
       </p>
       <p>
           <span>密码：</span>
           <input type="password" id="input-password">
       </p>
       <input type="submit" id="Btn">

       <input type="hidden" id="md5-password" name="password">
   </form>

    <script>
        function  userValid() {
            var uname = document.getElementById('username');
            var pwd = document.getElementById('input-password');
            var md5pwd = document.getElementById('md5-password');

            md5pwd.value = md5(pwd.value);
            //相关校验代码...
            return true;
        }
    </script>
</body>
</html>