JavaScript回顾02：BOM对象，DOM对象和表单操作

最新推荐文章于 2024-07-19 12:58:53 发布

GrandNovice

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量209

点赞数

分类专栏：复习文章标签： javascript

本文链接：https://blog.csdn.net/XXMRXXX/article/details/109352597

版权

复习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

7 操作BOM对象(重点)
8 操作DOM对象(重点)
9 操作表单(验证)

7 操作BOM对象(重点)

浏览器介绍
JavaScript和浏览器的关系？
JavaScript诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

IE 6~11
Chrome
Safari苹果
FireFox linux默认

三方浏览器

QQ浏览器
360浏览器

window

window代表浏览器窗口

在这里插入图片描述
Navigator

Navigator封装了浏览器的信息

在这里插入图片描述
大多数时候，我们不会使用navigator对象，因为会被人为修改。
不建议使用其属性来判断和编写代码！

screen

代表屏幕尺寸

在这里插入图片描述

location(重要)

location 代表当前页面的URL信息

host:"www.baidu.com"
herf:"https://ww.baidu.com"
protocol:"https:"
reload:f reload() //刷新网页
//设置新地址
location.assign("https://i.csdn.net/#/uc/profile")

在这里插入图片描述
document(内容DOM)

docunment代表当前页面，HTML DOM文档树

在这里插入图片描述
获取具体的文档树结点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById('app');
</script>

获取cookie

在这里插入图片描述
劫持cookie原理

www.taobao.com

举例：同时打开淘宝和天猫页面，登录其中一个，在另一个刷新页面即可登录，这是淘宝内部服务器cookie从一个页面上传到两一个页面的情况。

<script src="getDocument.js"></script>
<!--恶意人员获取你的cookie，通过ajax上传到他的服务器依次获取你的隐私信息-->

服务器端可以设置cookie：httpOnly

history(不建议使用)

history代表浏览器的历史记录。

history.back()  //后退，返回上一个页面
history.forward() //前进

8 操作DOM对象(重点)

DOM：文档对象模型

核心

浏览器网页就是一个DOM树形结构！

更新：修改Dom结点
遍历：得到Dom结点
删除：删除Dom结点
添加：添加Dom结点

要操作一个Dom结点，就必须要先获得这个Dom结点

//对应css的选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var children = father.children;  // 获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;

p1.lastElementChild;
p1.nextElementSibling;

这是原生代码，之后我们都尽量使用jQuery();
在这里插入图片描述

更新节点

操作文本

var id1 = document.getElementById('id1');
id1.innerText = "123";  //修改文本的值
id1.innerHTML = '<strong>123<\strong>'; //改成加粗的文本123 可以解析HTML文本标签

操作css

id1.style.color = 'red';  //设置颜色
id1.style.fontSize = '50px';  //设置字体  _转驼峰命名问题 属性使用字符串包裹
id1.style.padding = '2em';  //设置padding

删除节点

删除节点的步骤：先获取父节点，然后通过父节点删除自己。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>



<script>
    //确定要删除的节点
    var self = document.getElementById('p1');
    //找到要删除节点的父亲节点
    var father = self.parentElement;
    //删除节点
    father.removeChild(self);
    //方式2  删除p2
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);  //会报错，删除后节点发生变化
    father.removeChild(father.children[2]);  //会报错，删除后节点发生变化
</script>
</body>
</html>

删除是一个动态的过程，删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！

插入节点

我们获得某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是如果这个Dom节点已经存在元素了，就不可以这样操作了，会产生覆盖。

追加

<body>
    <p id="js">JavaScript</p>
    <div id="list">
        <p id="javase">JavaSE</p>
        <p id="javaee">JavaEE</p>
        <p id="javame">JavaME</p>
    </div>

    <script>
        var js = document.getElementById('js');
        var list = document.getElementById('list');
        list.appendChild(js);  //追加
    </script>
</body>

在这里插入图片描述

创建一个新的标签，实现插入

//通过JS创建一个新的节点
var newP = document.createElement('p');  //创建一个p标签
newP.id = 'newP';
newP.innerText = 'hello,world!';

//追加到list后面
list.appendChild(newP);

在这里插入图片描述

//创建一个标签节点(通过这个属性，可以设置任意的值)
var myScript = document.createElement("script");
myScript.setAttribute('type', 'text/javascript');

//追加
list.appendChild(myScript);

在这里插入图片描述

// 可以创建一个style标签
var myStyle = document.createElement('style');  //创建了一个空style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: red}';  //设置标签内容

//追加
document.getElementsByTagName('head')[0].appendChild(myStyle);

在这里插入图片描述

insert

在list下的javaee前插入javase

        var javaee = document.getElementById('javaee');
        var javase = document.getElementById('javase');
        var list = document.getElementById('list');

        //list基准节点.insertBefore(newNode, targetNode);
        list.insertBefore(javase, javaee);

9 操作表单(验证)

表单是什么？form DOM树

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得要提交的信息

//得到输入框的值
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');

// boy_radio.value = male;
// girl_radio.value = female; //这样获取没有意义

//修改输入框的值
input_text = '123';

// 对于单选框，多选框等等，boy_radio.value只能取到当前的值
//通过判断是否被选中查看返回结果是否为true
boy_radio.checked;
girl_radio.checked;

提交表单

直接输入，即使密码框在浏览器页面将密码掩盖，但是提交后抓包仍可显示明文！

在这里插入图片描述

使用MD5 加密后！抓包显示密码被加密！！

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5 工具类导入-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>

<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>


    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>

<!--    <input type="submit">-->
    <!--button提交-->
    <!--绑定事件-->
    <button type="submit" onclick="f()">提交</button>
</form>

<script>
    function f() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        console.log(username.value);
        console.log(password.value);
        //MD5 算法加密
        password.value = md5(password.value);
        console.log(password.value);
    }
</script>

</body>
</html>

提交表单 md5加密密码，表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5 工具类导入-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>
<!--
    表单绑定提交事件
        onsubmit = 绑定一个提交检测的函数，true，false
        将这个结果返回给表单，使用onsubmit接收
        οnsubmit="return f()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>


    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>

    <!--更高级的加密方式，不走密码框，实际输入密码在这里，使用此方式不会出现输入密码后点击提交密码变长的情况-->
    <input type="hidden" id="md5-password" name="password">

<!--    <input type="submit">-->
    <!--button提交-->
    <!--绑定事件-->
    <button type="submit">提交</button>
</form>

<script>
    function a() {
        var username = document.getElementById('username');
        var password = document.getElementById('input-password');
        var md5password = document.getElementById('md5-password');

        md5password.value = md5(password.value);
        //可以校验判断表单内容，true通过提交，false阻止提交
        return true;
    }
</script>

</body>
</html>

如果直接使用password.value = md5(password.value);
会出现一个输入password转换成md5加密后的密码的过程，这就是密码文本框中输入密码后，点击提交，感觉密码字符变多的情况，即没有使用hidden！！

在这里插入图片描述
chrome浏览器抓不到password，不知道为什么。。。

GrandNovice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript回顾02：BOM对象，DOM对象和表单操作

文章目录7 操作BOM对象(重点)8 操作DOM对象(重点)9 操作表单(验证)7 操作BOM对象(重点)浏览器介绍JavaScript和浏览器的关系？JavaScript诞生就是为了能够让他在浏览器中运行BOM：浏览器对象模型IE 6~11ChromeSafari苹果FireFox linux默认三方浏览器QQ浏览器360浏览器windowwindow代表浏览器窗口NavigatorNavigator封装了浏览器的信息大多数时候，我们不会使用navigat
复制链接

扫一扫