### 获取元素的第二种方式
~~~
document.getElementsByTagName('标签名')
~~~
***
与Java中使用方式基本一致
课堂练习-1：
给一堆li加点击事件，显示自身包含的内容
~~~
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
}
li{
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i = 0;i < aLi.length;i++){
aLi[i].onclick = function(){
alert(this.innerHTML);
};
}
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</body>
</html>
~~~
课堂练习-2：
在页面生成2000个按钮（性能问题，利用字符串添加）
课堂练习-3：
生成一排10个50px\*50px的div，颜色红黄蓝循环
课堂练习-4：
模拟QQ成员列表
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li,h2{
padding:0;
margin: 0;
list-style: none;
}
#list{
width:200px;
margin:0 auto;
border: 1px solid #D5D5D5;
}
h2{
font-size: 16px;
color:#fff;
background: #008000;
text-indent: 4em;
line-height: 28px;
}
#list ul li{
border-bottom: 1px solid #D5D5D5;
line-height: 26px;
text-indent: 2em;
cursor: pointer;
}
#list ul{
display: none;
}
#list h2{
cursor: pointer;
border-bottom: 1px solid #D5D5D5;
}
#list ul li:hover{
background: yellowgreen;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oList = document.getElementById('list');
var aUl = oList.getElementsByTagName('ul');
var aH2 = oList.getElementsByTagName('h2');
var li = null;
for(var i = 0;i < aH2.length;i++){
// 索引
aH2[i].index = i;
aH2[i].onOff = true;
aH2[i].onclick = function(){
if(this.onOff){
oList.getElementsByTagName('ul')[this.index].style.display = 'block';
}else{
oList.getElementsByTagName('ul')[this.index].style.display = 'none';
}
this.onOff = !this.onOff;
}
}
for(var i = 0;i < aUl.length;i++){
var aLi = aUl[i].getElementsByTagName('li');
for(var j = 0;j < aLi.length;j++){
aLi[j].onclick = function(){
if(li != null){
li.style.backgroundColor = '#fff';
}
this.style.backgroundColor = 'yellowgreen';
li = this;
}
}
}
}
</script>
</head>
<body>
<ul id="list">
<li>
<h2>我的好友</h2>
<ul>
<li>王一一</li>
<li>李文华</li>
<li>搞发展</li>
</ul>
</li>
<li>
<h2>我的同事</h2>
<ul>
<li>黄腾达</li>
<li>六和谐</li>
<li>形如一</li>
<li>沈从文</li>
<li>张曼玉</li>
</ul>
</li>
<li>
<h2>我的同学</h2>
<ul>
<li>郭文明</li>
<li>因调整</li>
<li>正安全</li>
</ul>
</li>
</ul>
</body>
</html>
~~~
***
### this的应用
与Java类似，代表当前元素
直接用alert(this)看一下,object window-->window是js的老大，alert(1)相当于window.alert(1),所以**this相当与alter的调用者**
特殊情况：
~~~
oBtn.onclick = fn;
function fn(){
// 这里this指的是oBtn
}
~~~
~~~
oBtn.onclick = function(){
// 但是如果这里调用了其他函数
fn();
}
function fn(){
// 这里this指的是window
}
~~~
解决办法是存一份，**that = this**
~~~
for(var i = 0;i < aBtn.length;i++){
oBtn.onclick = function(){
that = this;
fu();
}
function fn(){
that.style.background = red;
}
~~~
***
课堂练习-2：鼠标移入显示隐藏div，模拟桌面应用
***
课后作业-1：图片随鼠标移动显现
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
#box{
/*background: #0F7CBF;*/
width:600px;
height:600px;
position: relative;
}
.pray{
width:50px;
height: 50px;
position:absolute;
background: #D5D5D5;
opacity: 0.5;
}
.img{
width:50px;
height: 50px;
position:absolute;
z-index: -1;
overflow: hidden;
transition: 0.3s;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
for(var i = 0;i < 10;i++){
for(var j = 0;j < 10;j++){
oBox.innerHTML += '<div class="pray" style="left:'+(i*52)+'px;top:'+(j*52)+'px;"></div>';
oBox.innerHTML += '<div class="img" style="left:'+(i*52)+'px;top:'+(j*52)+'px;background:url(img/pic.jpg) no-repeat '+(-i*52)+'px '+(-j*52)+'px"></div>'
}
}
var aDiv = oBox.getElementsByTagName('div');
for(var i = 0;i < aDiv.length;i++){
aDiv[i].onmouseover = function(){
if(this.className == 'pray'){
this.style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
~~~
***
[图片素材下载](https://pan.baidu.com/s/11Luvx0SiX71Zk01lpSUS_g)
