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>