JavaScript，你好！(二)

操作BOM对象

浏览器介绍

JavaScript和浏览器的关系？

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

BOM:浏览器对象模型

• IE 6~11
• Chrome
• Safari
• FireFox

第三方

• QQ浏览器
• 360浏览器

window

window代表 浏览器窗口

Navigator

Navigator，封装了浏览器的信息

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

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

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

screen

screen.width
1920px
screen.height
1080px

location(重要)

location代表当前页面的URL信息

href: "https://www.baidu.com/?tn=02003390_5_hao_pg"
ancestorOrigins: DOMStringList
origin: "https://www.baidu.com"
protocol: "https:"
host: "www.baidu.com"

document

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

document.title
"百度一下，你就知道"
document.title='你长得真好看'
"你长得真好看"

获取具体的文档树节点

<dl id='app'>
      <dt>Java</dt>
      <dd>JavaSE</dd>
      <dd>JavaEE</dd>
</dl>
<script>
      var dl = document.getElementById('app');
</script>

获取Cookie

document.cookie
"PSTM=*******...";

history

history代表浏览器的历史记录

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

操作DOM对象

核心

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

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

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

获得DOM节点

//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementByClassName('p2');
var father = document.getElementById('father');

var childrens = father.children;      //获取父节点下的所有子节点
//father.firstChild
//father.lastChild

更新节点

<div id="id1">

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

操作文本

id1.innerText='456';//修改文本的值
id1.innerHTML='<strong>123<strong>'//可以解析HTML文本标签

操作css

id1.style.color = 'yellow'; //属性使用 字符串 包裹
id1.style.fontsize = '20px'; //注意驼峰命名问题
id1.style.padding = '2em';

删除节点

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

<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是在时刻变化的，删除节点的时候一定要注意。

插入节点

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

追加:

<script>
var js = doument.getElementById('js');
var list = doument.getElementById('list');
list.appendChild(js);      //追加到后面
</script>

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

<script>
var js = doument.getElementById('js');      //已经存在的节点
var list = doument.getElementById('list');
//通过js创建一个新的节点
var newP = document,createElement('p'); //创建一个p标签
newP.id = 'newP';
newP.innerText = "hello,world!";
//创建一个标签节点
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{back-ground-color:chartreuse;}';//设置标签内容

document.getElementsByTagName('head')[0].appedChild(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);

操作表单

表单是什么 form DOM 树

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

表单的目的是用来提交数据

获得要提交的信息

<form action="post">
<p>
      用户名：<input type="text" id="username">
</p>

<!--多选框的值，就是定义好的value-->
<p>
性别：<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');

      //得到输入框的值
      input_text.value
      //修改输入框的值
      input_text.value="123"

      //对于单选框，多选框等等固定的值，boy_radio.value只能取得当前的值
      boy_radio.checked;      //查看返回的结果，是否为true，如果为true，则被选中
      boy_radio.checked = true;      //赋值
</script>

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

<form action='https://www.bilibili.com' method='post' onsubmit='return run()'>
      <p>
      用户名：<input type='text' id='username' name='username'>
      </p>
      <p>
      密码：<input type='password' id='input-password'>
      </p>
      <input type='hidden' id='md5-password' name='password'>

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

<script>
      function run(){
    alert("冲");
      var username = 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>