JavaScript 操作BOM对象和操作表单

已工作的小白

已于 2022-04-25 17:02:00 修改

阅读量1.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2022-04-25 17:00:26 首次发布

本文链接：https://blog.csdn.net/code34/article/details/124397225

版权

JavaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文章目录

1.操作BOM对象（重点）
2.操作DOM对象
3.操作表单（验证）

1.操作BOM对象（重点）

浏览器介绍

javascript和浏览器关系？
BOM：浏览器对象模型
IE6~11、Chrome、Safari、FireFox、Opera
三方浏览器：QQ浏览器、360浏览器

window

window代表浏览器窗口
window

window.innerHeight
66
window.innerWidth
191
window.outerHeight
831
window.outerWidth
782

Navigator(不建议使用)

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
navigator.platform
'Win32'

大多数时候，我们不会使用navigator对象，因为会被认为修改!
不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸，单位为像素

screen.width
1536
screen.height
864

location（重要）

location代表当前页面的URL信息

host: "localhost:63342"
href:"http://localhost:63342/JavaScript/lesson04/3.%E7%BB%A7%E6%89%BF/index.html_ijt=co46m3lfimct89je90id2deuaa&_ij_reload=RELOAD_ON_SAVE"
protocol: "http:"
reload: ƒ reload()
//设置新地址
location.assign('https://www.baidu.com')

document（内容DOM）

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

document.title
'百度一下，你就知道'
document.title="xiaobai"
'xiaobai'
//获取具体的文档树节点
document.getElementsById="s_is_result_css"
's_is_result_css'

获取cookie

document.cookie
'BIDUPSID=805092302CD89251B07BFC1F8A22E8D4; PSTM=1641461925; BAIDUID=5429447E9368156B2575943DD94368B3:FG=1; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; channel=baidusearch; BAIDUID_BFESS=5429447E9368156B2575943DD94368B3:FG=1; BA_HECTOR=852g8ka0018l0g85jh1h69djd0r; COOKIE_SESSION=46774_2_2_1_8_1_1_0_1_1_37_0_154988_285789_26_0_1650767494_1650720697_1650767468%7C9%23285801_14_1650720694%7C9; baikeVisitId=5dc6d44d-4909-48ae-9b20-48b653820cac; BD_HOME=1; H_PS_PSSID=36309_31254_36165_34584_36121_36338_36073_36280_36126_36297_36236_26350_22157_36061'

劫持cookie原理

<script src="aa.js">
//恶意人员会获取Cookie上传到他的服务器
</script>

服务器端可以设置cookie为httpOnly

history(代表浏览器的历史记录)

history.back();//回退
history.forword();//前进

2.操作DOM对象

1.获取DOM节点

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

</head>
<body>
<h1>标题一</h1>
<div id="div">
    <p id="p1">woshidiyi</p>
    <p class="p2">woshidier</p>
</div>
<script>
    //这是原生代码，之后我们尽量都使用jQuery()
    //对应css选择器
    var h1= document.getElementsByTagName('h1');
    var div= document.getElementById('div');
    var p1= document.getElementById('p1');
    var p2= document.getElementsByClassName('p2');
    //获取父节点下的所有节点
    div.children;
    div.firstChild;
    div.lastChild;
</script>
</body>
</html>

2.JS操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="h1">12232</h1>
<script>
    var h1=document.getElementById('h1');
    //将12232设置成452
    //innerText修改文本的值
    h1.innerText='452';
    //将452加粗
    //可以解析HTML文本标签
    h1.innerHTML='<strong>452</strong>';
    //设置字体红色
    h1.style.color='red';
    //字体大小200px
    h1.style.fontSize='200px';
    //padding2em
    h1.style.padding='2em';
</script>
</body>
</html>

3.删除节点

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="h1">12232</h1>
<div id="div">
    <p id="p">dsasad</p>
    <p class="p2">woshidier</p>
</div>
<script>
    //删除节点
    var h1= document.getElementsByTagName('h1');
    var div= document.getElementById('div');
    var p= document.getElementById('p');
    var p2= document.getElementsByClassName('p2');
    var father = p.parentElement;
    //father.removeChild(p);
    //删除是一个动态的过程
    father.removeChild(father.children[0]);
    father.removeChild(father.children[0]);
</script>
</body>
</html>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。

4.插入节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="" type="text/css">
    <script type="text/javascript" src=""></script>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    //追加一个节点
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    list.appendChild(js);
    //创建一个新节点
    //创建一个p标签
    var newP = document.createElement('p');
    newP.id='newP';
    newP.innerText='hello';
    //创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    //可以创建一个style标签
    var myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    //设置标签内容
    myStyle.innerHTML = 'body{background-color:chartreuse}'

    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
</body>
</html>

交换节点顺序

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

3.操作表单（验证）

表单是什么？
form-----DOM树

文本框----text

下拉框----select

单选框----radio

多选框----checkbox

隐藏域----hidden

密码框----password
表单的目的提交信息

获得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username"/>
    </p>
    <!--多选框的值就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="man"/>男
        <input type="radio" name="sex" value="woman" id="woman"/>女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');
    var man_radio = document.getElementById('man');
    var woman_radio = document.getElementById('woman');
    //得到输入框值
    input_text.value;
    input_text.value='123';
    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    man_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中。
    woman_radio.checked = true;//赋值
</script>
</body>
</html>

提交表单。
md5加密密码，表单优化
onsubmit = “return aaa()”
onclick
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>
<!--表达绑定提交事件
    οnsubmit= 绑定一个提交检测的函数，true，false
    将这个结果返回给表单，使用onsubmit接收
-->
<form action = "https://www.baidu.com" method = "post" onsubmit = "return aaa()">
    <p>
        <span>用户名：</span><input type="text" id = "username" name = "username"/>
    </p>
    <p>
        <span>密码：</span><input type="password" id = "password" />
    </p>
    <input type = "hidden" id = "md5-password" name = "password">

    <!--绑定事件 onclick 被点击-->
    <button type = "submit">提交</button>

</form>

<script>
    function aaa(){
        alert(1);
        var username = document.getElementById("username");
        var pwd = document.getElementById("password");
        var md5pwd = document.getElementById("md5-password");
        //pwd.value = md5(pwd,value);
        md5pwd.value = mad5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return false;

    }
</script>

</body>
</html>

已工作的小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 操作BOM对象和操作表单

文章目录1.操作BOM对象（重点）浏览器介绍windowNavigator(不建议使用)screenlocation（重要）document（内容DOM）history(代表浏览器的历史记录)2.操作DOM对象1.获取DOM节点2.JS操作3.删除节点4.插入节点3.操作表单（验证）1.操作BOM对象（重点）浏览器介绍javascript和浏览器关系？BOM：浏览器对象模型IE6~11、Chrome、Safari、FireFox、Opera三方浏览器：QQ浏览器、360浏览器windowwi
复制链接

扫一扫