文章目录

  • ​​一、关于Navigator的建议​​
  • ​​二、Window对象方法一览​​
  • ​​三、Document​​
  • ​​1.控制台中直观显示​​
  • ​​2.DOM操作一览​​
  • ​​三、DOM删除的动态性​​
  • ​​四、劫持Cookie原理​​
  • ​​五、阻止表单提交+MD5加密​​
  • ​​1.阻止表单提交​​
  • ​​2.MD5加密​​
  • ​​六、前端学习小技巧​​
  • ​​1.如何巩固JS​​
  • ​​2.如何巩固HTML，CSS​​

一、关于Navigator的建议

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

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

二、Window对象方法一览

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

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

三、Document

1.控制台中直观显示

document可获取具体的文档树结点

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


在Console控制台中，进行获取DOM的测试，更加直观，如图：

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

2.DOM操作一览

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

三、DOM删除的动态性

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


下面这是错误的写法，因此父节点在在删除第一个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

【JavaScript精华荟萃】精华汇总+易混淆知识（下篇）_服务器_07


有些恶意人员，会获取你的cookie信息，上传到他的服务器上

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

淘宝：

【JavaScript精华荟萃】精华汇总+易混淆知识（下篇）_服务器_08


天猫：

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


当我们登录淘宝后：

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


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

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


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

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

1.阻止表单提交

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

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

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>

在get提交方式下

  • 未进行MD5加密
  • 进行加密

在post提交方式下

  • 未进行MD5加密

    • 【JavaScript精华荟萃】精华汇总+易混淆知识（下篇）_服务器_13

  • 进行加密

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

六、前端学习小技巧

1.如何巩固JS

看JQuery源码：网站推荐-https://jquery.cuishifeng.cn/

看游戏源码：网站推荐-https://www.mycodes.net/

2.如何巩固HTML，CSS

扒网站，首先在Elements中删除无用内容，然后右键html标签，在Copy中down下来，对应修改看效果