JavaScript (二）

最新推荐文章于 2024-11-16 14:11:26 发布

茉栀。。。

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量80

点赞数

文章标签： javascript safari 前端

本文链接：https://blog.csdn.net/m0_61426204/article/details/126260789

版权

文章目录

八、操作BOM对象（重点）
九、操作DOM对象（重点）
十、操作表单（验证）

八、操作BOM对象（重点）

BOM:浏览器对象模型

8.1、浏览器介绍

JavaScript 和浏览器的关系？

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

IE
Chrome
Safart
FireFox

三方

QQ浏览器
360浏览器

8.2、window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
774
window.innerWidth
150
window.outerHeight
860
window.outerWidth
632
//可以调整浏览器的窗口试试

8.3、Navigator（不建议使用）

Navigator封装了浏览器的信息

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

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

8.4、screen

代表屏幕尺寸

screen.width
1536
screen.height
864

8.5、location(重要）

location代表当前页面的URL信息

host: "new-tab-page"
href: "chrome://new-tab-page/"
protocol: "chrome:"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('http://blog.kuangstudy.com/')

8.6、document（内容）

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

document.title
'新标签页'
document.title='狂神'
'狂神'
//会改变当前页面的标题

获取具体的文档树结点

//获取具体的文档树结点
<body>
<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
     var dl= document.getElementById('app');
</script>
</body>

获取coolie

//获取coolie
document.cookie
''

劫持cookie原理

<script src="aa.js"></script>
//恶意人员，获取你的cookie上传到他的服务器，获取隐私

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

8.7、history（不建议使用）

history代表浏览器的历史记录

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

九、操作DOM对象（重点）

DOM：文档对象模型

9.1、核心

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

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

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

9.2、获得DOM节点

<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    //对应css选择器
   var h1=document.getElementsByTagName('h1');
   var p1=document.getElementsByTagName('p1');
   var p2=document.getElementsByClassName('p2');
   var father=document.getElementById('father');
   var childrens=father.children;//获取父节点下的所有子节点
   // father.firstChild;
    //father.lastChild;
</script>
</body>
</html>

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

9.3、更新节点

<div id="id1">
    
</div>
<script>
    var id1= document.getElementById('id1');
</script>

操作文本：

id1.innerText=‘456’ 修改文本的值
id1.innerHTML=‘123’ 可以解析HTML文本标签

操作JS

id1.style.color='red';//属性使用 字符串 包裹
'red'
id1.style.color='yellow';
'yellow'
id1.style.fontSize='200px';//-转驼峰命名问题 (font-size=>fontSize)
'200px'
id1.style.padding='2em';
'2em'

9.4、删除节点

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

<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(self)
 
 //删除是一个动态的过程，下面的写法会报错
 father.removechild(father.children[0])//移除第一个之后，第一个不存在，第二个会变成第一个，动态的过程
 father.removechild(father.children[1])
 father.removechild(father.children[2])
 </script>

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

9.5、插入节点

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

追加（已有的标签移到后面）

<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);//追加到后面
 </script>

效果：
在这里插入图片描述

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

 <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');//（key,value）
 
 // 可以创建一个style标签
 var mystyle=document.createElement('style');//创建了一个空style标签
 mystyle.setAttribute('type','text/css');
 myStyle.innerHTML='bodyfbackground-color:chartreuse;]';//设置标签内容
 
 document.getElementsByTagName('head')[0].appendchild(mystyle)
 
 </script>

insertBefore（插到前面）

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

十、操作表单（验证）

表单是什么？form DOM树

文本框 text
下拉框
单选框 radio
多选框checkbox
隐藏域 hidden
密码框 password
………
表单的目的：提交信息

10.1、获得要提交的信息

<form action="post">
        <p>45 <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('gir1');
       //得到输入框的值
       input_text.value
       //修改输入框的值
       input_text.value='123'
       //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值boy_radio.checked；//查看返回的结果，是否为true，如果为true，则被选中~girl_radio.checked = true;//赋值
       </script>

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

<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数，true, false
将这个结果返回给表单，使用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() f
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容，true就是通过提交，false，阻止提交
return true;
</script>