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

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文本标签

image-20210303095230979

操作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>

追加结果：

image-20210303104242195

image-20210303104219993

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

<!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{background-color:chartreuse;}';//设置标签内容


    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

下拉框

单选框 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>

image-20210303115855775

提交表单

<!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接受
      οnsubmit="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/

版权声明：本文为doudoutj原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。