### 獲取元素的第二種方式
~~~
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)
