第54天学习打卡（操作BOM对象操作DOM对象操作表单）

2023-10-04 09:21:34

7 操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系？

JavaScript诞生就是为了能够让他在浏览器中运行。

BOM：浏览器对象模型

IE6~11

Chrome

Saferi

FireFox：Linux默认火狐

三方：

QQ浏览器

360浏览器

window

window代表浏览器窗口

 window.alert(1)
 undefined
 window.innerHeight
 1062
 window.innerWidth
 225
 window.outerHeight
 796
 //可以调整浏览器窗口大小试试

Navigator：类（不建议使用）

Navigator.封装了浏览器的信息

 navigator.appVersion
 "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36 Edg/88.0.705.81"
 navigator.userAgent
 "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.182 Safari/537.36 Edg/88.0.705.81"
 navigator.platform
 "Win32"

大多数时候，我们不会使用navigator对象，因为会被人人为修改。

不建议使用这些属性来判断和编写代码。

screen

代表屏幕和尺寸

 screen.width
 1536 px
 screen.height
 864 px

location(重要)

location 代表当前页面的URL信息

 host:"www.baidu.com"
 href:"https://www.baidu.com"//当期指向的地址
 protocol:"https:"
 reload:f reload()//刷新网页
 //设置新的地址
 loaction.assign('https://blog.kuangstudy.com/')

 document

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

 document.title
 "百度一下，你就知道"
 document.title = '狂神说'
 "狂神说"

获取具体的文档数节点

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 
 <dl id="app">
 <!--dt代表标题   dd代表里面的每一列-->
     <dt>Java</dt>
     <dd>JavaSE</dd>
     <dd>JavaEE</dd>
 
 </dl>
 
 <script>
     var dl = document.getElementById('app');
 </script>
 </body>
 </html>

获取cookie

 document.cookie//客户端的本地信息，这些信息会被发送到服务器
 "lang=zh-CN; wc_sf=41; dz_id=70852; uUiD=95569160445490834762453; localNav=fa

劫持cookie原理

恶意人员：获取你的cookie上传到他的服务器

服务器端可以设置cookie:httpOnly来保证安全性。

history（不建议使用）

history代表浏览器的历史记录

 history.back()//后退
 history.forward()//前进

8 操作DOM对象（重点）

DOM：文档对象模型

核心

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

更新：更新Dom节点

遍历dom节点：得到Dom节点

删除：删除一个Dom节点

添加：添加一个新的节点

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

获得dom节点

 <!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 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
 
 </script>
 </body>
 </html>

这是原生代码，之后我们尽量都是用jQuery();

更新节点

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <div id="id1">
 
 </div>
 
 <script>
     var id1 = document.getElementById('id1');
 </script>
 </body>
 </html>

id1.innerText = '123'修改文本的值

id1.innerHTML='123'可以解析HTML文本标签

操作JS

 id1.style.color = 'red'
 "red"
 id1.style.color = 'yellow'//属性使用字符串包裹
 "yellow"
 id1.style.color = 'red'
 "red"
 id1.style.fontSize = '20px';//驼峰命名
 "20px"
 id1.style.fontSize = '200px'
 "200px"
 id1.style.padding = '2em';
 "2em"
 
 document.getElementById('su')
 <input type=•"submit" value=•"百度一下" id=•"su" class=•"btn self-btn bg s_btn">•
 document.getElementById('su');
 <input type=•"submit" value=•"百度一下" id=•"su" class=•"btn self-btn bg s_btn">•
 var ss = document.getElementById('su')
 undefined
 ss.style.padding = '10px'
 "10px"
 ss.style.padding = '20px'
 "20px"
 ss.style.padding = '5px'
 "5px"

删除节点

删除节点的步骤：先获取父节点，在通过父节点删除子节点

 <div id = "father">
     <h1>标题一</h1>
     <p id="p1">p1</p>
     <p class="p2">p2</p>
 </div>
 <script>
 var self = document.getElementById('p1');
 var father = p1.parentElement;
 father.removeChild(p1)
     
     
     //删除是一个动态的过程 比如里面有三个数 数组下标为0 1 2 你先删除了第一个 还剩两个  所有它的数组里面只有两个了下标就变了 变成0 1
     father.removeChild(father.children[0])
     father.removeChild(father.children[1])
     father.removeChild(father.children[2])
 </script>

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

 father.children
 HTMLCollection(3) [h1, p#p1, p.p2, p1: p#p1]
 father.children[0]
 <h1>•标题一•</h1>•
 father.children[1]
 <p id=•"p1">•p1•</p>•

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个dom节点已经存在元素了，我们就不能这么干了，会覆盖先前的元素。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </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.append(js);//把js追加到后面
 
 </script>
 
 </body>
 </html>

追加结果：

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </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');
 
     //通过js创建一个新的节点
    var newP = document.createElement('P');//创建一个p标签
     newP.id = 'newP';
     newP.innerText = 'Hello,kuangshen';
     
     //创建一个标签节点(通过这个属性，可以设置任意的值)
     var myScript = document.createElement('script');
     myScript.setAttribute('type','text/javascript')
 
     
 </script>
 
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 
 </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');
 
     //通过js创建一个新的节点
    var newP = document.createElement('P');//创建一个p标签
     newP.id = 'newP';
     newP.innerText = 'Hello,kuangshen';
 
     //创建一个标签节点
     var myScript = document.createElement('script');
     myScript.setAttribute('type','text/javascript')
 
     //可以创建一个Style标签
      var myStyle = document.createElement('style');//创建了一个空style
     myStyle.setAttribute('type','text/css');
     myStyle.innerHTML = 'body{}';//设置标签内容
 
 
     document.getElementsByTagName('head')[0].appendChild(myStyle)
 
 
 
 
 </script>
 
 </body>
 </html>

Insert

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 
 </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 ee = document.getElementById('ee');
     var js = document.getElementById('js');
     var list = document.getElementById('list');
 
     //list类似于父节点   insertBefore(newNode,targetNode)把新节点插到目标节点前面
     
     list.insertBefore(js,ee);
 </script>
 
 </body>
 </html>

9操作表单（验证）

表单是什么 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="boy">男
         <input type="radio" name="sex" value="women" id="girl">女
     </p>
 
 </form>
 
 <script>
     var input_text = document.getElementById('username');
     var boy_radio = document.getElementById('boy');
     var girl_radio = document.getElementById('girl');
 
     //对于单选框，多选框等固定的值boy_radio.value只能取到当前的值
     //boy_radio.checked;查看返回的结果，是否为true，如果为true，则被选中
     //boy_radio.checked = true;//赋值
 
 
 
 </script>
 
 </body>
 </html>

提交表单

 <!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>
 <!--    绑定事件 onclick  被点击-->
     <button type="submit" onclick="aaa()">提交</button>
 
 
 </form>
 <script>
     function aaa() {
       var uname = document.getElementById('username');
       var pwd = document.getElementById('password');
       console.log(uname.value);
       console.log(pwd.value);
 
       //MD5 算法
       pwd.value = md5(pwd.value);
       console.log(pwd.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
       但是true false 赋值给submit没有意义 将这个结果返回给表单,使用onsubmit接受
       onsubmit="return aaa()
 
 -->
 <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 = "input-password"  >
     </p>
     <input type="hidden" id="md5-password" name="password">
 <!--    绑定事件 onclick  被点击-->
     <button type="submit" >提交</button>
 
 
 </form>
 <script>
     function aaa() {
         alert(1);
       var uname = document.getElementById('username');
       var pwd = document.getElementById('input-password');
       var md5pwd = document.getElementById('md5-password');
         // pwd.value = md5(pwd.value);这个提交的一瞬间密码边长
 
       md5pwd.value = md5(pwd.value);
       //可以校验判断表单内容，true就是通过提交,false就是阻止提交
       return true;
 
     }
 </script>
 
 </body>
 </html>

10jQuery

JavaScript

jQuery库，里面存在大量的JavaScript函数

获取jQuery

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    cnd引入-->
     <script src=https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
 </head>
 <body>
 
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 <!--    cnd引入-->
     <script crossorigin="anonymous" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
 </head>
 <body>
 <!--
    公式: $(selector).action()
 -->
 <a href="" id="test-jquery">点我</a>
 <script>
     document.getElementById('id');
     //选择器是css选择器
     $('#test-jquery').click(function () {
         alert('hello.jQuery');
     })
 </script>
 
 </body>
 </html>

选择器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <script>
     //原生js,选择器少，麻烦不好记
     //标签
     document.getElementsByTagName();
     //id
     document.getElementById();
     //类
     document.getElementsByClassName();
 
     //在jQuery里面 css中的选择器它全部都能用
     $('p').click()//标签选择器
     $('#id1').click()//id选择器
     $('.class1').click()//class选择器
 </script>
 
 </body>
 </html>

文档工具站：https://jquery.cuishifeng.cn/

码农公寓

7 操作BOM对象（重点）

8 操作DOM对象（重点）

9操作表单（验证）

10jQuery

相关文章