DOM样式
一个元素节点的style属性即对应的css，就直接在script里面更改元素的css属性。
比如通过给元素的style.display 赋值，改变显示还是隐藏，更改的是style属性。
<script>
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>但是这样写的缺点是他的样式名称和css里有点不一样，需要重新记忆一套样式名称，就很麻烦，所以后边学了JQuery就提供了别的方法，后边再说。
练习：
写法比之前css简单多啦。
<table id="biaoge">
<tr>
<td>
<a href="#" οnclick="Sortid()">id</a>
</td>
<td>
<a href="#" οnclick="Sortid()">英雄</a>
</td>
<td>
<a href="#" οnclick="Sortid()">血量</a>
</td>
<td>
<a href="#" οnclick="Sortid()">伤害</a>
</td>
</tr>
<tr class="ban">
<td>
1
</td>
<td>
gareen
</td>
<td>
340
</td>
<td>
58
</td>
</tr>
<tr>
<td>
2
</td>
<td>
teemo
</td>
<td>
320
</td>
<td>
76
</td>
</tr>
<tr class="ban">
<td>
3
</td>
<td>
annie
</td>
<td>
380
</td>
<td>
38
</td>
</tr>
<tr>
<td>
4
</td>
<td>
deadbrother
</td>
<td>
400
</td>
<td>
90
</td>
</tr>
</table>
<style type="text/css">
tr{
border-bottom:1px solid;
text-align: center;
}
table{
border-collapse: collapse;
width: 900px;
height: 200px;
}
</style>
<script type="text/javascript">
var ban = document.getElementsByTagName('tr');
for(var i = 0;i < ban.length;i ++)
{
if(i%2==1)
{
ban[i].style.backgroundColor="lightgray"
}
}
</script>DOM事件
| onfocus onblur |
焦点事件 |
| onmousedown onmouseup onmousemove onmouseout |
鼠标事件 |
| onkeydown onkeypress onkeyup |
键盘事件 |
| onclick ondblclick |
点击事件 |
| onchange | 变化事件 |
| onsubmit | 提交事件 |
| onload | 加载事件 |
| this | 当前组件 |
| return false | 阻止事件的发生 |
焦点事件
焦点相关的事件，分别有获取焦点和失去焦点，大概就是你的操作到了哪一块。
当组件获取焦点的时候，会触发onfocus事件
当组件失去焦点的时候，会触发onblur事件
鼠标事件
鼠标事件，由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成
当在组件上鼠标按下的时候，会触发onmousedown事件
当在组件上鼠标弹起的时候，会触发onmouseup事件
当在组件上鼠标经过的时候，会触发onmousemove事件
当在组件上鼠标进入的时候，会触发onmouseover事件
当在组件上鼠标退出的时候，会触发onmouseout事件
注: 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，区别在于无论鼠标在组件上如何移动，onmouseover只会触发一次，onmousemove每次移动都会触发，会一直触发，一直触发。
键盘事件
键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成
当在组件上键盘按下的时候，会触发onkeydown事件
当在组件上键盘按下的时候，也会触发onkeypress事件
当在组件上键盘弹起的时候，会触发onkeyup事件
只要记得keydown和keypress都表示点下了键，其实是差不多的，随便用吧。
点击事件
点击事件，由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件
当在组件上双击的时候，会触发ondblclick事件
注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果
变化事件
当组件的值发生变化的时候，会触发onchange事件
注：对于输入框而言，只有在失去焦点的时候，才会触发onchange，所以需要点击一下"按钮" 造成输入框失去焦点
提交事件
可以在form元素上，监听提交事件
当form元素@提交的时候，会触发onsubmit事件
加载事件
当整个文档加载成功，或者一个图片加载成功，会触发加载事件
当body元素或者img@加载的时候，会触发onload事件
当前组件
this表示触发事件的组件，可以在调用函数的时候，作为参数传进去
阻止事件的发生
比如在提交一个表单的时候，如果用户名为空，弹出提示，并阻止原本的提交
1. 在调用函数的时候，增加一个return
2. 在函数中，如果发现用户名为空，则返回false
3. 当onSubmit得到的返回值是false的时候，表单的提交功能就被取消了
比如下面在onsubmit事件写的时候是有return的。
<form method="post" action="/study/login.jsp" οnsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
return true;
}
</script>练习：
<style type="text/css">
.cl{
text-decoration:none;
}
.tb{
border:1px solid;
cursor:pointer
}
#t1{
position: absolute;
left:7px;
top: 29px;
display: none;
}
#t2{
position: absolute;
left:45px;
top: 29px;
display: none;
}
#t3{
position: absolute;
top: 29px;
left: 81px;
display: none;
}
</style>
<body>
<a class = "cl" id = "a1" href="#" οnmοuseοver="Intera1()" οnmοuseοut="Outera1()">武器</a>
<a class = "cl" id = "a2" href="#" οnmοuseοver="Intera2()" οnmοuseοut="Outera2()">护甲</a>
<a class = "cl" id = "a3" href="#" οnmοuseοver="Intera3()" οnmοuseοut="Outera3()">英雄</a>
<table id="t1" class="tb">
<tr οnmοuseοver="int1()" οnmοuseοut="out1()" id = "tr1">
<td>大剑</td>
</tr>
<tr οnmοuseοver="int2()" οnmοuseοut="out2()" id = "tr2">
<td>饮血</td>
</tr>
<tr οnmοuseοver="int3()" οnmοuseοut="out3()" id = "tr3">
<td>无尽</td>
</tr>
<tr οnmοuseοver="int4()" οnmοuseοut="out4()" id = "tr4">
<td>破甲</td>
</tr>
</table>
<table id = "t2" class="tb">
<tr>
<td>狂徒</td>
</tr>
<tr>
<td>日炎</td>
</tr>
<tr>
<td>蓝盾</td>
</tr>
<tr>
<td>反甲</td>
</tr>
</table>
<table id="t3" class="tb">
<tr>
<td>盖伦</td>
</tr>
<tr>
<td>安妮</td>
</tr>
<tr>
<td>死歌</td>
</tr>
<tr>
<td>寒冰</td>
</tr>
</table>
</body>
<script type="text/javascript">
var matter1 = document.getElementById('t1');
var matter2 = document.getElementById('t2');
var matter3 = document.getElementById('t3');
function Intera1() {
// body..
matter1.style.display="block";
matter2.style.display="none"
matter3.style.display="none"
}
function Intera2() {
// body..
matter2.style.display="block";
matter1.style.display="none"
matter3.style.display="none"
}
function Intera3() {
// body..
matter3.style.display="block";
matter2.style.display="none"
matter1.style.display="none"
}
function int1(){
var t = document.getElementById("tr1");
t.style.backgroundColor="lightgray";
}
function int2(){
var t = document.getElementById("tr2");
t.style.backgroundColor="lightgray";
}
function int3(){
var t = document.getElementById("tr3");
t.style.backgroundColor="lightgray";
}
function int4(){
var t = document.getElementById("tr4");
t.style.backgroundColor="lightgray";
}
function out1() {
// body...
var t = document.getElementById("tr1");
t.style.backgroundColor="transparent";
}
function out2() {
// body...
var t = document.getElementById("tr2");
t.style.backgroundColor="transparent";
}
function out3() {
// body...
var t = document.getElementById("tr3");
t.style.backgroundColor="transparent";
}
function out4() {
// body...
var t = document.getElementById("tr4");
t.style.backgroundColor="transparent";
}
</script>节点关系
| parentNode | 父节点关系 |
| previousSibling nextSibling |
同胞节点关系 |
| childNodes | 子节点关系 |
| childNodes children |
childNodes和children的区别 |
节点关系图：
注意：在使用previousSibling和nextSibling两个方法获取前一个或者后一个的节点时，要注意！！！，如果两个标签不是紧挨的，那么中间会出现一个#text类型，因为不是紧挨着 标签之间有任何字符、空白、换行都会产生文本元素。
包括firstNode，lastnode，或者统计节点个数的时候，都会有这个问题。
childNodes和children都可以获取一个元素节点的子节点。
childNodes 会包含文本节点
children 会排除文本节点
创建节点
| createElement | 创建元素节点 |
| createTextNode | 创建文本节点 |
| createAttribute | 创建属性节点 |
通过createElement 创建一个新的元素节点
接着把该元素节点，通过appendChild加入到另一个元素节点
创建的节点的内容，需要用创建文本节点createTextNode的方式，然厚通过appendChild加入到创建好的节点中。
属性的添加就不用创建文本节点
var href = document.createAttribute("href");
href.nodeValue="http://12306.com";
a.setAttributeNode(href);直接用对nodeValue赋值就行，然后setAttributeNode（）添加到创建的属性上面。
删除节点
| removeChild | 删除元素节点 |
| removeAttribute | 删除属性节点 |
| removeChild | 删除文本节点 |
删除的时候需要获取到父节点才行。
删除文本节点
1. 通过childNodes[0] 获取文本节点
注:children[0] 只能获取第一个子元素节点，不能获取文本节点
2. 通过removeChild删除该文本节点
但是这种方式比较麻烦，一般都是直接通过innerHTML设置为空即可。
注: 通过innerHTML=""的方式，同样会导致文本子节点被删除。
替换节点
与删除节点一样，替换节点也需要先获取父节点，然后通过父节点替换子节点。
1. 获取父节点
2. 创建子节点
3. 获取被替换子节点
4. 通过replaceChild进行替换
插入节点
| appendChild | 追加节点 |
| insertBefore | 在前方插入节点 |
有时候，需要在指定位置插入节点，而不是只是追加在后面。
这个时候就需要用到insertBefore
1. 创建新节点
2. 获取父节点
3. 获取需要加入的子节点
4. 通过insertBefore插入
练习：
<body>
<input type="button" value="点我" οnclick="jss()">
<script type="text/javascript">
function jss() {
// body...
var ss = document.createElement("script");
var srcc = document.createAttribute("src");
srcc.nodeValue="4013.js";
ss.setAttributeNode(srcc);
var bb = document.getElementsByTagName('body')[0];
bb.appendChild(ss);
}
</script>
</body>