JS复习笔记（三） - 草稿

1.操作BOM对象

（1)浏览器 BOM可以理解为浏览器对象模型

常用的浏览器：ie 6~11 Chrome， Safari（Mac系统），火狐（较常用）

（2）window——浏览器的窗口

弹窗--window.alert

内部高度--window.innerHeight

内部宽度--window.innerWidth

外部高度--window.outerHeight

外部宽度--window.outerWidth

（举个例子）

（3）navigator—存储封装浏览器的信息

应用名--navigator.appName

浏览器版本—navigator.appVersion

用户信息--navigator.userAgent

系统版本--navigator.platform9（安全性低，易被修改）

（4）screen—屏幕尺寸

屏幕宽度--screen.width

屏幕高度--screen.height

（5) location--代表当前页面的URL信息

【URL是统一资源定位符，是互联网上标准资源的地址。而互联网上的每个文件都有唯一的一个的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。】

主机—host www.baidu.com

当前指向的位置—href https://www.baidu.com 用来跳转网页

协议—protocol https

重新加载—reload:f reload()

设置新地址—location.assign()

（取自百度）

（6)document—当前页 DOM树

页面标题 document.title

如何能获取文档树结点？

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

（7)history 代表浏览器的历史记录

history.forward() 等价于“前进键”

后退 history.back()等价于“后退键”

2.操作DOM对象

浏览器网页的就是DOM树形结构，包括更新、遍历、删除、添加

要操作首先要获得

</div>

var h1 = document.getElementsByTagName('h1');

var p1 = document.getElementById('p1');

var p2 = document.getElementsByClassName('p2');

var father = document.getElementById('father');

var childrens = father.children;

</script>

如何获取父节点的第一个子节点

father.firstChild

获取父节点的最后一个子节点

father.lastChild

（1)更新

操作文本的值 id1.innerText

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

操作CSS id1.style.属性='值'

“属性”用字符串形式

“属性-连接”用驼峰命名

（2）删除

方法：先获取父节点，再通过父节点删除自己

var self = document.getElementById('p1');
var father = p1.parentElemnt;
father.removeChild(self);

删除是动态的操作，如下举例以避免操作失误

father.removeChild(father.children[0]);

father.removeChild(father.children[1]);

father.removeChild(father.children[2]);//错误的

（3）创建和插入

追加到list的最后！

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

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

var js = document.getElementById('js');
var list = document.getElementById('list');

通过js创建一个新节点

var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'HelloWorld';
list.appendChild(newP);

添加script标签

var myScript = document.createElement('script')
myScript.setAttribute('type','text/javascript')；
body.appendChild(myScript);

创建style标签

var myStyle = document.createElement('style')
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:blue}';
document.getElementsByTagName('head')[0].appendChild(myStyle);
insertBefore

3.操作表单验证

表单的目的：提交信息

<input type="radio" name="sex" value="man" id="boy">男

<input type="radio" name="sex" value="woman" id="girl">女

</form>

input_text.value;（用来获取输入框的值，赋值并进行修改）

boy_radio.checked;（如果返回结果为true，boy目前被选中）

girl_radio.checked = true;（可以通过赋值方式，去选择girl）

</script>

(1）前段加密MD5

初级验证：required必填属性 placeholder

js验证：https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js

<form action="#" method="POST" onsubmit="return aa()">
<span>用户名：</span><input type="text" id="username" name="username">
<span>密码：</span><input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
<button type="submit">提交</button>
</form>
<script>
function aa() {
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);
return true;（true是代表通过，而false可以阻止提交）
}
</script>

表单验证时绑定一个事件onsubmit，将这个返回的结果给表单，再使用onsubmit来接收。