TageName/for应用/csstext/this
【1】getElementByTageName('')
与id方法获取元素的三点不同:
1.id方法前面只能加document,tagename前面可以是变量名
2.id方法只能获取一个元素,tagename方法获取的是一个集合,集合元素的先后顺序有元素在文档中的内容决定。
3.id方法是静态的,tagename是动态的。
注意,tagename必须用[]。
【2.】for循环
1.) var i = 0 ;
2.) i<3; //关键
3.)i++;
[表达式1]
for (var i=0; i<3;i++){
alert(i)
}
[表达式2]
var i = 0;
for (;i<3;){
alert(i);
i++;
}
[for循环的简单应用]
遍历二维数组
1.通过访问列表 ,循环往列表里面添加内容
<body>
<ui>
<li></li>
<li></li>
<li></li>
</ui>
</body>
<script>
var oBy = document.getElementsByTagName('body');
var oLi = document.getElementsByTagName('li')
var arr = ['今天','昨天','明天'];
for(i=0;i<arr.length;i++){
oLi[i].innerHTML += arr[i];
};
</script>
</html>
2.自动在页面添加200个按钮
var oBy = document.getElementsByTagName('body');
var oLi = document.getElementsByTagName('li')
for(var i=0;i<200;i++){
oBy[0].innerHTML += '<input type="button" value="按钮"/>';
}
3.性能优化
实现原理:不与页面产生 多次交互
var str = ''
for(var i=0;i<800;i++){
str += '<input type="button" value="按钮"/>';
}
oBy[0].innerHTML = str;
【this】调用当前方法(函数)的那个对象;
//this
alert(this); //object window
//window 是js老大;
alert = window.alert( );
function fn( ){
alert(this);
}
//fn1( );
window.fn1( );
oBtn.click = fn1
此处
嵌套函数内为window;
![](https://images2017.cnblogs.com/blog/1154467/201709/1154467-20170924193845540-1781528266.png)
eg:制作兼容ie6的触发事件
csstext
csstext直接作用于元素内,具有最高优先级,彻底清空style里面的样式是样式重置为最初状态
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>csstext</title>
<style>
div{
width:300px;
height:400px;
border:1px solid red;
}
input{
margin-left: 70px;
}
</style>
</head>
<body>
<div id = 'div1'></div>
<input type="button" value ="提交">
<input type="button" value ="重置">
<script>
var oBtn = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');
oBtn[0].onclick = function (){
oDiv.style.height = '80px';
};
oBtn[1].onclick = function (){
oDiv.style.cssText = '';
}
</script>
</body>
</html>