元素获取的第二种方法:getElementsByTagName()
与getElementsByid方法的区别:
#list{} var oUl = document.getElementById(‘list’); //静态方法,找一个元素
li{} document.getElementsByTagName(‘li’) //动态方法,括号内是标签名
#list li{} var aLi = oUl.getElementsByTagName(‘li’);
//aLi => [li li li]元素的集合
aLi.length = 3
aLi[0] 可以使用数组的性质
//在用TagName的时候,必须要加上:【】
<script>
window.onload = function () {
var oUl = document.getElementById('list'); //id值
var aLi = oUl.getElementsByTagName('li'); //标签值
alert(aLi.length);
}
</script>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
window.onload = function () {
var oUl = document.getElementsByTagName('ul')[0]; //标签名
//只要是getElementsByTagName,就必须加上:【数值】
var aLi = oUl.getElementsByTagName('li'); //标签名
}
</script>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
</body>
如果用document.getElementById(‘li’); 可能会造成ul标签和ol标签里的li元素一起改变
所以选择getElementsByTagName()
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
document.title = 123;
document.body.innerHTML = 'abc';
}
</script>
</head>
<body>
</body>
如果body里只有一个元素,可以用document.body来改变其内容
同理,title也可以用document.title来改变
但是title可以直接在等号后面写上要改变的字符
而body要用innerHTML,如document.body.innerHTML = ‘abc’;
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var aBtn = document.getElementsByTagName('input');
//alert(aBtn.length); 显示0个
document.body.innerHTML = '<input type="button" value="按钮"/><input type="button" value="按钮"/><input type="button" value="按钮"/>';
//alert(aBtn.length); 显示3个
aBtn[0].onclick = function () {
alert(1);
}
aBtn[1].onclick = function () {
alert(2);
}
aBtn[2].onclick = function () {
alert(3);
}
}
</script>
</head>
<body>
</body>
</html>
for循环:
for循环执行顺序
有一组数字推算出任意递增数字
<script>
var m = 1;
for(var i = 0 ; i<3 ; i++){
alert(m++);
}
</script>
</head>
<body>
</body>
<script>
window.onload = function () {
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var arr = ['a','b','c'];
for(var i = 0; i < aLi.length ; i++){
aLi[i].innerHTML = arr[i];
}
}
</script>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
</body>
//加载20000个,网页会崩溃
for(var i=0 ; i<20000; i++){
document.body.innerHTML += '<input type="button" value="按钮">';
}
可以先把20000个放在str里,在显示出来
var str = '';
for(var i=0 ; i<20000; i++){
str += '<input type="button" value="按钮">';
}
document.body.innerHTML = str;
实例:转化绝对定位坐标值
<script>
window.onload = function () {
var aDiv = document.getElementsByTagName('div');
for(var i=1; i<11;i++){
document.body.innerHTML +='<div>'+i+'</div>';
}
for(var i=1;i<aDiv.length;i++){
aDiv[i].style.left = i * 55 + 'px';
}
}
</script>
选取多个元素
生成多个元素:先生成、后获取
for套for筛选多组指定元素
关键字:this
this是什么
1、当前方法、函数的调用对象
2、通过事件调用函数的对象
函数套函数中的this指向
1、嵌套函数的this
2、this的变量引用
this运用
1、this选取当前元素
2、this选取当前元素内的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//this:这个
//this:指的是调用当前 方法(函数)的那个对象
// alert(this) -> [object window]
// window是JS的“老大”
// window.alert(this);
function fn1() {
alert( this );
}
// fn1();
// window.fn1();
var oBtn = document.getElementById('btn1');
oBtn.onclick = fn1;
</script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
</body>
</html>
自定义属性:
什么是自定义属性
运用for循环为一组元素添加开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var aBtn = document.getElementsByTagName("input");
// aBtn[0].abc = 123; //自定义属性
// //alert(aBtn[0].abc);
//js可以为任何HTML元素添加任意个自定义属性
for(var i = 0;i < aBtn.length;i++){
aBtn[i].abc = 123;
aBtn[i].xyz = true;
}
}
</script>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
</body>
</html>
实例:点击当前列表,切换各自的class
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { list-style:none; width:114px; height:140px;
background:url(img/1.jpg); float:left;
margin-right:20px; }
</style>
<script>
window.onload = function (){
var aLi = document.getElementsByTagName('li');
// var onOff = true; // 只能控制一组!
//但是只能onOff只有一组,而li元素有三组,要设置三次,不方便
for( var i=0; i<aLi.length; i++ ){
aLi[i].onOff = true; //解决方案
aLi[i].onclick = function (){
// alert( this.style.background );
// 背景不能判断
// color red #f00 不能作为判断条件
// 相对路径 不能作为判断条件
if ( this.onOff ) {
this.style.background = 'url(img/2.jpg)';
this.onOff = false;
} else {
this.style.background = 'url(img/1.jpg)';
this.onOff = true;
}
};
}
};
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
实例:实现按钮上value值的变换:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var aBtn = document.getElementsByTagName('input'); //先找元素
var arr = [ 'A', 'B', 'C', 'D' ];
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].num = 0; //自定义属性
aBtn[i].onclick = function (){
// alert( arr[ this.num ] );
this.value = arr[ this.num ];
this.num++;
if( this.num === arr.length ){
this.num = 0;
}
};
}
};
</script>
</head>
<body>
<input type="button" value="0" />
<input type="button" value="0" />
<input type="button" value="0" />
</body>
</html>
添加索引值
index索引值
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].index = i;// 也是自定义属性,但是叫做索引值,index也可以换成x,y,z等等
aBtn[i].onclick = function (){
//alert( i ); => 3 //for循环里包function函数使用i不靠谱
alert( this.index );
};
}
};
</script>
</head>
<body>
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
</body>
</html>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
// 想建立“匹配”“对应”关系,就用索引值
var arr = [ 'aa', 'bb', 'cc' ];
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].index = i; // 自定义属性(索引值)
aBtn[i].onclick = function (){
alert( arr[ this.index ] );
this.value = arr[ this.index ];
};
}
};
实例:通过按钮改变p元素中的文字
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
var aBtn = document.getElementsByTagName('input');
var aP = document.getElementsByTagName('p');
// 想建立“匹配”“对应”关系,就用索引值
var arr = [ 'aa', 'bb', 'cc' ];
for( var i=0; i<aBtn.length; i++ ){
aBtn[i].index = i; // 自定义属性(索引值)
aBtn[i].onclick = function (){
// alert( arr[ this.index ] );
this.value = arr[ this.index ];
aP[ this.index ].innerHTML = arr[ this.index ];
};
}
};
</script>
</head>
<body>
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</body>
</html>