操作BOM对象
BOM：浏览器对象模型
window：代表浏览器窗口（里面的方法是求出浏览器窗口的长宽高信息）
Navigator：封装了浏览器的信息
screen：代表屏幕的尺寸
location：代表当前页面的URL信息
***location.assign(‘域名’) 这个方法使所有想要进去原网站的用户进入你已经设置的网站中
document：代表当前的页面，HTML DOM文档树
<d1 id="app"> <dt>java</dt> <dd>javase</dd> <dd>javaee</dd> </d1> <script> var di = document.getElementById('app'); //可以动态的增加和删除节点 </script>
获取cookie document.cookie 服务器端可以设置：cookie:httpOnly
history
history.back() //后退 history.forward() //前进
操作DOM对象
文档对象类型：浏览器王爷就是一个DOM树形结构
更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的dom节点
要操作一个DOM节点就得先获得一个DOM节点，只要定位到某一结点就可以找到他周围的节点（上一个下一个节点）
<div id="father"> <h1>标题1</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 childrens = father.children; //获取父节点下的所有子集 </script>
更新节点
<div id="lll"> </div> <script> var lll = document.getElementById('lll'); lll.innerText = '666'; //吧空白的div标签添加上666 操作文本 lll.innerHTML = '<strong>123</strong>>'; //可以操作HTML语言 lll.style.color='red'; //还能更新颜色 lll.style.fontStyle = '200px'; //还能传递大小 </script>
删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div id="fu"> <h1 id="h1">h1</h1> <p id="p1">p1</p> <p id="p2">p2</p> </div> <script> var fu = document.getElementById('fu'); var h1 = document.getElementById('h1'); var p1 = document.getElementById('p1'); var p2 = document.getElementById('p2'); fu.removeChild('p2'); //这个步骤是删除p2节点 var p1 = document.getElementById('p1'); var fu = p1.parentElement; //这是间接的通过p1来找她的父类 fu.removeChild(p1) </script>
创建和插入DOM节点
我们获得了某个DOM节点，假设这个节点是空的可以通过innerHTML来增加一个元素了，但是DOM节点已经存在元素了，就会产生覆盖
追加
<p id="js">javaScript</p> <div id="list"> //把js放到div里 <p id="se">javaSE</p> <p id="ee">javaEE</p> <p id="me">javaME</p> </div> <script> var js = document.getElementById('js');//先获取js var list = document.getElementById('list');//在获取list list.appendChild(js) //这样追加 </script>
创建新的节点：
var newP = document.createElement('p'); //创建一个p标签 newP.id = 'newP'; //定义它的id newP.innerText = 'dsds'; //给他赋值 list.appendChild(newP); //放到list里面
标签节点
var myscript = document.createElement('script'); myscript.setAttribute('type','text/javascript') var myStyle = document.createElement('style'); //创建了一个空style标签 myStyle.setAttribute('type','text/css'); myStyle.innerHTML = 'boby{background-color:chartreuse;}';//设置标签的内容 document.getElementsByTagName('head')[0].appendChild(myStyle);
插入到前面
var ee = document.getElementById('ee'); var js = document.getElementById('js'); var list = document.getElementById('list'); list.insertBefore(js,ee); //要插入的节点.insertBefore(前节点,后节点);
操作表单（验证）
表单是： form DOM树
文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
表单目的：提交信息
<form action="post"> <p><span>用户名：</span> <input type="text" id="username"></p> <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'); //文本框的DOM对象,用于操作文本框 var boy_radio = document.getElementById('boy'); //单选框的DOM对象，操作单选框 var girl_radio = document.getElementById('girl'); input_text.value //得到单选框的值 boy_radio.checked; //查看返回结果看看有没有被选中，是否为true。 </script>
提交表单
<!--表单绑定提交时间 onsubmit ：绑定一个提交测试的函数， true false 将这个测试结果返回给表单，使用onsubmit接收 --> <form action="https://www.baidu.com/" method="post" onsubmit="return aaa()"> <p> <span>用户名：</span> <input type="text" id="username" name="username"> </p> <p> <spqn>密码:</spqn><input type="password" id="input-password"> </p> <input type="hidden" id="md5-password" name="password"> <!--绑定事件onclick，被点击的时候会发生什么--> <button type="submit" onclick="aaa()">提交</button> </form> <script> function aaa() { 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是通过 return true; } </script>
