DOM
查找
直接查找 var obj = document.getElementById('i1')
间接查找
文本内容操作：innerText 仅文本
innerText 全内容
value 对于input标签 value获取当前标签中的值
select 获取选中的value值 （selectedIndex）
textarea value获取当前标签中的值
样式操作：
className
classList
classList.add
classList.remove
<style>
.c1{
font-size:16px;
color:red;
}
</style>
<div class='c1 c2' style='font-size':16px;background-color></div>
obj.style.fontSize = '16px'
obj.style.backgroundColor = 'red'
obj.style.color = 'red'
属性操作：
obj.attributes 获取所有属性
obj.setAttribute('xxx','liyang')
obj.removeAttribute('value')
创建标签，并添加到HTML中
a.字符串形式
b.对象的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" onclick="AddEle1();" value="+"/> <input type="button" onclick="AddEle2();" value="+"/> <div id="i1"> <p><input type="text"/></p> </div> <script> function AddEle1(){ //创建一个标签 //将标签添加到i1里面 var tag = "<p><input type='text' /></p>"; //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag); } function AddEle2(){ //创建一个标签 //将标签添加到i1里面 var tag = document.createElement('input'); tag.setAttribute('type','text'); tag.style.fontSize = '16px'; tag.style.color = 'red'; //创建p标签 var p = document.createElement('p'); //将input标签放到p标签里面 p.appendChild(tag); document.getElementById('i1').appendChild(p); } </script> </body> </html>
提交表单：
任何标签通过DOM都可以提交表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="http://www.baidu.com"> <input type="text" /> <input type="submit" value="提交" /> <a onclick="submitForm();">点击提交</a> </form> <script> function submitForm(){ document.getElementById('f1').submit(); } </script> </body> </html>
上面可以看到两个input，第一个input用老方法，第二个input用的是DOM
加告警
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="http://www.baidu.com"> <input type="text" /> <input type="submit" value="提交" /> <a onclick="submitForm();">点击提交</a> </form> <script> function submitForm(){ //document.getElementById('f1').submit(); alert("告警了"); } </script> </body> </html>
确认按钮(真的要删除吗)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="f1" action="http://www.baidu.com"> <input type="text" /> <input type="submit" value="提交" /> <a onclick="submitForm();">点击提交</a> </form> <script> function submitForm(){ //document.getElementById('f1').submit(); //alert("告警了"); var v = confirm("真的要删除吗？"); console.log(v); } </script> </body> </html>
确定返回true，取消返回false
其他操作：
console.log 输出框
alert 弹出框confirm 确认框 // URL和刷新location.href 获取URLlocation.href = "url" 重定向location.reload() 重新加载，页面刷新 // 定时器setInterval 多次定时器clearInterval 清除多次定时器setTimeout 单次定时器clearTimeout 清除单次定时器
基础例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="600px;margin:0 auto;"> <input id="i1" onfocus="Focus();" onblur="Blur()" type="text" value="请输入关键字"/> </div> <script> function Focus(){ var tag = document.getElementById('i1'); var val = tag.value; if(val == "请输入关键字"){ tag.value = ""; } } function Blur(){ var tag = document.getElementById('i1'); var val = tag.value; if(val.length == 0){ tag.value = "请输入关键字"; } } </script> </body> </html>
这个例子等同于：
<input type="text" placeholder="请输入关键字" /> 这是新版本浏览器的功能
事件
onclick onblur onfocus
实现行为（js） 样式（css） 结构（html） 相分离的页面
绑定事件的两种方式：
a.直接标签绑定 onclick='xxx()' onfocus
b.先取Dom队形，然后进行绑定
document.getElementById('xxx').onclick
document.getElementById('xxx').onfocus
this,当前触发事件的标志
a.第一种绑定方式
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(self){
self 当前点击的标签
}
b.第二种绑定方式
<input id='i1' type='button'>
document.getElementById('i1').onclick = function(){
//this代指当前点击的标签
}
c.第三种绑定方式
var mymain = document.getElemetById("main");
var mycontent = document.getElementById("content");
mymain.addEventListener("click",function(){console.log("main")},true);
mycontent.addEventListener("click",function(){console.log("content")},true);
//true 捕捉 （main先出来，content后出来。）；false 冒泡（content先出来，main后出来。底层先打印）
第一种方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body> <table border="1" width="300px"> <tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1</td><td>2</td><td>3</td></tr> <tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1</td><td>2</td><td>3</td></tr> <tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1</td><td>2</td><td>3</td></tr> </table> <script> function t1(n){ var myTrs = document.getElementsByTagName("tr")[n]; myTrs.style.backgroundColor = "red"; } function t2(n){ var myTrs = document.getElementsByTagName("tr")[n]; myTrs.style.backgroundColor = ""; } </script> </body> </html>
第二种方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body> <table border="1" width="300px"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <script> var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for (var i=0;i<len;i++){ myTrs[i].onmouseover = function(){ this.style.backgroundColor = "red"; } myTrs[i].onmouseout = function(){ this.style.backgroundColor = ""; } } // 谁调用函数，this就指向谁，这里this就是myTrs[i] </script> </body> </html>
第三种绑定方式（略）