当前位置：首页 > news >正文

JavaScript基础（BOM对象、DOM节点、表单）

news 来源：原创 2025/5/15 15:13:50

BOM对象

浏览器介绍

BOM：浏览器对象模型

IE
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

window对象

window代表浏览器窗口

window.innerHeight
734
window.innerWidth
71
window.outerHeight
823
window.outerWidth
782

Navigator对象（不常用）

navigator.appName //获得当前应用名
'Netscape'
navigator.appVersion //当前浏览器的版本
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0'
navigator.platform //获得系统版本
'Win32'

注：navigator对象，可被人为修改，不建议使用这些属性来判断和编写代码

screen代表屏幕的尺寸

screen.width
1536px
screen.height
864px

location代表当前页面的url信息

location

host: "www.baidu.com" //主机

href: "https://www.baidu.com/" //当前位置指向

protocol: "https:" //协议

reload: ƒ reload() //刷新网页方法

//设置新的地址

location.assign('http://xxx.xxx.com')

document当前页面信息

HTML DOM文档树

1.document.title //获得标题信息

2.获取具体的文档树节点

<body>
<dl id="lean">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    'use strict'
    let dl=document.getElementById('lean');
</script>
</body>

3.获取cookie

document.cookie

服务器端可以设置cookie:httpOnly

4.history代表浏览器的历史记录

history.back() //后退

history.forward() //前进

DOM节点

DOM：文档对象模型

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

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

获得Dom节点

document.getElementsByTagName("标签名")

document.getElementById("id名")

document.getElementsByClassName("类名")

<body>
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
<script>
    var h1=document.getElementsByTagName("h1")//获得Hh1标签节点
    var p1=document.getElementById("p1");//获得id选择器p1的节点
    var p2=document.getElementsByClassName("p2");//获得类选择器p2的节点
</script>
</body>

父节点选择器名.children，根据父节点获取子节点

father.children //获取所有子节点

father.firstChild //获取第一个子节点

father.lastChild //获取最后一个子节点

nextSibling //同一树级别上的下一个节点

以上为原生代码，后期使用jQuery

更新DOM节点

innerText：修改文本的值

id1.innerText='459'

innerHTML：可以解析HTML文本标签

id1.innerHTML='<strong>456<strong>'

style：修改样式，需要操作JS

注意：

属性值使用字符串
-转驼峰命名

<body>
<div id="id1"></div>
<script>
    var id1=document.getElementById('id1');
    id1.innerText='abc';    //修改id1节点的文本内容为abc
</script>
</body>

id1.style.color='red' //将id1节点字体修改为红色

应用:找到id

获取DOM节点，并设置样式

删除DOM节点

删除节点：

获取父节点
通过父节点删除自己

parentElement:获取父节点

p1.parentElement //通过子节点获取父节点

removeChild（）：删除子节点

father.removeChild(p1) //通过父节点father删除子节点p1

综上：

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var p1=document.getElementById("p1");//获得id选择器p1的节点
    var father=p1.parentElement;//找到p1的父节点并命名为father
    father.removeChild(p1)//删除父节点father的子节点p1
</script>
</body>

法二：通过父节点利用下标找到子节点

若想删除其中某个节点，如第一个节点，如下：

father.removeChild(father.children[0])

注意：删除多个节点时，children是时刻在变，下标会重新排序

插入DOM节点

我们获得某个DOM节点，假设这个DOM节点是空的，我们可以通过inner HTML就可以增加一个元素，若DOM节点原本就存在元素，不可用inner HTML，因为会导致原先的元素被覆盖。

appendChild（）：追加

list.appendChild(js) //将js节点移动到list的子节点中

1.将id选择器js添加到list选择器的子节点中（在已存在的节点中操作）

createElement（）：创建新节点

2.创建新的节点

document.createElement（） //创建新标签

<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 list=document.getElementById('list');
   var newP= document.createElement('p');//创建一个p标签
    newP.id='newP';//为p标签设置id为newP
   newP.innerText='Hello,World！';//为p标签添加文字
   list.appendChild(newP);//将id为newP节点添加到list节点下
</script>
</body>

创建一个标签节点：通过setAttribute（key,value）属性，可以设置任意的值

利用JS为背景设置颜色

//创建style标签
    var myStyle=document.createElement('style');//创建空style标签
    myScript.setAttribute('type','text/css');//设置标签内容
    myStyle.innerHTML='body{    background-color: red;}';//为body设置红色背景
    document.getElementsByTagName('head')[0].appendChild(myStyle);//将style节点设置到head节点下

insertBefore(newNode,targetNode)：在目标节点前插入某节点

在list节点下的ee节点前插入js节点

list.insertBefore(js,ee);

<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');
    var ee=document.getElementById('ee');
//insertBefore(newNode,targetNode)
    list.insertBefore(js,ee);
</script>
</body>

操作表单（验证）

表单form也是DOM树内的一个节点

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

表单的目的：提交信息

DOM节点.value：获得要提交的信息

input_test.value

给表单赋值：

单选框与多选框取值：

1.错误示范：对于单选框和多选框，boy_radio.value只能取到当前的值

2.只能通过if判断，当单选框被选中时，boy_radio.checked会返回true，如下：

提交表单

未加密情况下，在抓包时，可以看见表单提交的信息

function aaa() {
        var uname=document.getElementById('username');
        var upwd=document.getElementById('pwd');
        console.log(uname.value);
        console.log(upwd.value);
    }

1.通过绑定事件onclick被点击，利用MD5加密

<head>
    <meta charset="UTF-8">
    <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>用户名：<input type="text" id="username" name="username"></span>
    </p>
    <p>
        <span>密码：<input type="password" id="pwd" name="pwd"></span>
    </p>
    <!--绑定事件 onclick 被点击-->
    <button type="submit" onclick="aaa()">提交</button>
</form>
<script>
    function aaa() {
        var uname=document.getElementById('username');
        var upwd=document.getElementById('pwd');
        console.log(uname.value);
        console.log(upwd.value);
        //md5算法
        pwd.value=md5(pwd.value)
        console.log(upwd.value);
    }
</script>
</body>