DOM(Document Object Model)
直接查找
var obj = document.getElementById('i1')
间接查找
文本内容操作:
innerText 仅文本
innerHTML 仅内容
value
input 获取当前标签中的值
select 获取选中的value值(selectIndex)
textarea 获取当前标签中的值
搜索框的事例
<input id="i1" type="text" οnfοcus="Focus();" οnblur="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" οnclick="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" οnclick="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="删除" οnclick="DeleteEle();"/>
<script>
function DeleteEle() {
document.getElementById("i1").innerText = "已删除";
setTimeout(function () {
document.getElementById("i1").innerText = "";
}, 5000)
}
</script>
事件
前奏:如何写出行为,样式,结构相分离的页面?
前端中的DOM0操作,也是初级程序员最低级的写法。
<style> // ----样式
#test{
background-color: red;
width: 100px;
height: 50px;
margin: auto;
}
</style>
</head>
<body>
<div id="test" οnclick="t1();"></div> //-----标签
<script> // -----JS操作
function t1() {
console.log('hello world')
}
</script>
</body>
#这种写法的弊端:当有大量的标签时,此时会出现很多的属性。占用空间,比较乱。
标准的写法:DOM1,做到了行为,样式,结构相分离的页面
<style>
#test{
background-color: red;
width: 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, 直接标签绑定 οnclick="xxx()"
b, 现获取Dom对象,然后进行绑定
document.getElementById('xxx').onclick
document.getElementById('xxx').onfocus
this,当前触发事件的标签 *****
a,第一种绑定方式
<input type='button' οnclick='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{
width: 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{
width: 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{
width: 500px;
height: 400px;
background: teal;
}
#content{
width: 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