DOM(Document Object Model)
直接查找
var obj = document.getElementById('i1')
间接查找
文本内容操作：
innerText 仅文本
innerHTML 仅内容
value
input 获取当前标签中的值
select 获取选中的value值（selectIndex）
textarea 获取当前标签中的值
搜索框的事例
<input id="i1" type="text" onfocus="Focus();" onblur="Blur();" value="请输入搜索关键字"/>
// onfocus 鼠标放到上面点击触发，鼠标移走点击其他地方触发
<script>
function Focus(){
var tag = document.getElementById('i1');
if (tag.value == "请输入搜索关键字"){
tag.value = '';
}
}
function Blur() {
var tag = document.getElementById('i1');
if (tag.value.length == 0){
tag.value = "请输入搜索关键字";
}
}
</script>
注意：最新版的浏览器不用写上述JS代码，只需写一行<input type="text" placeholder="请输入关键字" />即可搞定
样式操作：
className
classList
classList.add
classList.remove
更细粒度的操作
obj.style.fontSize = '16px';
obj.style.backgroupColor = 'red';
obj.style.color = 'green';
# 注意样式的书写规则：如有短横杠的，把原style样式中短横杠去掉，后面第一字母变成大写，如font-size ---> fontSize
属性操作
obj = document.getElementById('i1')
obj.getAttribute('value') 获取属性
obj.setAttribute('he','tom') 设置属性 key--value的形式
obj.removeAttribute('he')
创建标签并添加到HTML中
方式一：字符串的方式
<input type="button" onclick="AddEle();" value="+"/>
<div id="i1">
<input type="text"/>
</div>
<script>
function AddEle() {
//创建标签
//将标签添加到id='i1'里面
var tag = "<p><input type='text'/></p>"
document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
}
</script>
#注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'，
这几个参数的意思分别是：在选中的标签 开头之前的位置，开头的之后位置，结束之前的位置，结束之后的位置
方式二：对象的方式
<input type="button" onclick="AddEle();" value="+"/>
<div id="i1">
<input type="text"/>
</div>
<script>
function AddEle() {
//创建标签
//将标签添加到id='i1'里面
var tag = document.createElement('input');
tag.setAttribute('type', 'text');
tag.value = '搜索';
tag.style.fontSize = '16px';
tag.style.color = 'red';
var p = document.createElement('p');
p.appendChild(tag);
document.getElementById('i1').appendChild(p);
}
</script>
提交表单
任何标签都可以通过DOM提交表单
document.getElementById('form').submit()
其他操作：
console.log() 输出框
alert 弹出框
var v = confirm(信息) 确认框 v = 'true' or 'false'
//URL和刷新
location.href
location.href = "" #重定向，跳转
location.href = location.href === location.reload()
//定时器
setInterval 多次定时器
clearInterval 清除多次定时器
setTimeout 单次定时器
clearTimeout 清除单次定时器
//定时器，一直执行
var o1 = setInterval(function(){},5000); # 一直执行，每隔5秒执行一次
clearInterval(ol) # 清除多次定时器
如何让它只执行一次？
var obj = setInterval(function(){};
clearInterval(obj);
5000);
//只执行一次
var o2 = setTimeout(function (){}, 5000); # 5秒后执行，只执行一次
clearTimeout(o2); #清除单次定时器
#定时器应用QQ邮箱删除功能
<div id="i1"></div>
<input id="i2" type="button" value="删除" onclick="DeleteEle();"/>
<script>
function DeleteEle() {
document.getElementById("i1").innerText = "已删除";
setTimeout(function () {
document.getElementById("i1").innerText = "";
}, 5000)
}
</script>
事件
前奏：如何写出行为，样式，结构相分离的页面？
前端中的DOM0操作，也是初级程序员最低级的写法。
<style> // ----样式
#test{
background-color: red;
100px;
height: 50px;
margin: auto;
}
</style>
</head>
<body>
<div id="test" onclick="t1();"></div> //-----标签
<script> // -----JS操作
function t1() {
console.log('hello world')
}
</script>
</body>
#这种写法的弊端：当有大量的标签时，此时会出现很多的属性。占用空间，比较乱。
标准的写法：DOM1,做到了行为，样式，结构相分离的页面
<style>
#test{
background-color: red;
100px;
height: 50px;
margin: auto;
}
</style>
</head>
<body>
<div id="test"></div>
<script>
var mydiv = document.getElementById("test");
mydiv.onclick = function () {
console.log('hello world')
}
</script>
绑定事件的方式：
a, 直接标签绑定 onclick="xxx()"
b, 现获取Dom对象，然后进行绑定
document.getElementById('xxx').onclick
document.getElementById('xxx').onfocus
this,当前触发事件的标签 *****
a，第一种绑定方式
<input type='button' onclick='ClickOn(this)'/>
function ClickOn(self){
// self代指当前点击的标签，接收this（这里的self也可写成其他任意字符）
xxx
}
b，第二种绑定方式（优先选择第二种）
<input id='i1' type='button'/>
document.getElementById('i1').onclick = function(){
// this 代指当前点击的标签
}
第二种绑定方式例子: 为什么下面要用this而不用myTrs[i](作用域的原因)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-test{
300px;
}
table, table td{ border:1px solid #000 }
</style>
</head>
<body>
<table class="pg-test">
<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>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
var myTrs = document.getElementsByClassName("pg-test");
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 = '';
}
}
</script>
</body>
</html>
补充：
第三种绑定的情况：一次绑定多个事件（工作当中用的比较少）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test{
300px;
height: 500px;
background: #7a43b6;
color: #fff;
}
</style>
</head>
<body>
<div id="test">你好</div>
</body>
<script>
var mydiv = document.getElementById('test');
mydiv.addEventListener('click', function(){console.log('aaa')}, false);
mydiv.addEventListener('click', function(){console.log('bbb')}, false);
//true 代表的是：捕获模型(从上向下一级级执行html-->..>body->外层div>内层div)
//false或者不填代表的是：默认是冒泡模型(和上面相反)
</script>
</html>
#注意true和false的区别可以通过下一个例子体现出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
500px;
height: 400px;
background: teal;
}
#content{
200px;
height: 100px;
background: springgreen;
}
</style>
</head>
<body>
<div id="main">
<div id="content">
</div>
</div>
<script>
var mymain = document.getElementById('main');
var mycontent = document.getElementById('content');
// mymain.addEventListener('click',function () {console.log('main')},false);
// mycontent.addEventListener('click',function () {console.log('content')},false)
mymain.addEventListener('click',function () {console.log('main')},true);
mycontent.addEventListener('click',function () {console.log('content')},true)
</script>
</body>
</html>
JavaScript词法分析：（JS核心）
<script>
function t1(age) {
console.log(age);
var age = 27;
console.log(age);
function age() {};
console.log(age);
}
t1(3)
</script>
//输出结果
function age() {}
27
27
active object ====> AO
1,形式参数
2,局部变量
3,函数声明表达式
1，形式参数
AO age = undefined
AO age = 3
2, 局部变量 (这属于词法分析阶段，不做任何改变)
AO age = undefined
3,函数声明表达式（优先级最高,覆盖之前的变量）
AO age = function()
下面开始执行：
开始从活动对象（active object）去找
第一个console.log(age) ----> function()
第二个console.log(age) ---->27
函数未被执行
第三个console.log(age) ---->27