day01：DOM操作

一、四个常用事件

点击：

html:<button onclick="dj()">点击</button>
js:function dj(){
    alert("点击");
}

双击：

html:<button ondbclick="sj()">双击</button>
js:function sj(){
    alert("双击");
}

鼠标经过：

html:<button onmouseover="jg()">鼠标经过</button>
js:function jg(){
    alert("鼠标经过");
}

鼠标离开：

html:<button onmouseout="lk()">鼠标离开</button>
js:function lk(){
    alert("鼠标离开");
}

二、点击切换图片效果（简单版）

css:

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
.box{
    width: 750px;
    height: 140px;
    position: relative;/* 相对定位 */
}
.box ul{
    position: absolute;/* 绝对定位 */
    right: 10px;
    bottom: 10px;
}
.box ul li{
    float: left;
    width: 15px;
    line-height: 15px;
    background-color: pink;
    text-align: center;
    margin: 5px;
    cursor: pointer;/* 小手样式 */
}

html:

<div class="box">
    <img src="./images/01.jpg" alt="" id="pic">
    <ul>
        <li onclick="fun1()">1</li>
        <li onclick="fun2()">2</li>
    </ul>
</div>

js:

function fun2(){
    document.getElementById("pic").src="images/02.jpg";
}
function fun1(){
    document.getElementById("pic").src="images/01.jpg";
}

点击按钮1：

点击按钮2：

三、事件三要素

1.事件源：被触发的对象，举个例子：如上的事件源为li；
2.事件：用户的操作，比如：点击 onclick，鼠标经过 onmouseover…
3.事件处理程序：事件触发后要执行的代码（用户要做什么事情），如二中的事件处理程序是切换图片；

四、js的分离写法

要求实现结构html和行为、动画js相分离：
html:

<button id="btn">内嵌式</button>

js:

var btn=document.getElementById("btn");
btn.onclick=function(){
    alert("html与js相分离");
}

注： js代码需要放在html代码中要执行的代码前面，否则会获取不到相应元素，一般来说可直接放到上方；若想要不考虑js位置，需要将js放在js入口函数中；
入口函数：window.onload { }

公式：

事件源.事件 = function（）{
	执行代码；
}

五、点击按钮获取标签内容

<input type="button" value="修改标签内容" id="btn">
<p id="p1">内容效果</p>
<script>
    var btn=document.getElementById("btn");
    var p1=document.getElementById("p1");
    btn.onclick=function(){
        p1.innerText="我被修改了";
    }
</script>

注： innnerText( )用于获取或修改一对标签里的内容；

六、根据标签名获取多个元素

<input type="button" value="修改标签内容" id="btn">
<p>豹子头林冲</p>
<p>黑旋风李逵</p>
<p>及时雨宋江</p>
<p>小李广花荣</p>
<p>双鞭呼延灼</p>
<script>
    //获取事件源
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        var pObjs=document.getElementsByTagName("p");
        console.log(pObjs);
        for(var i = 0; i < pObjs.length; i++){
            pObjs[i].innerText = "梁山好汉一百单八将";
        }
    }
    //总结：getElementsByTagName("标签")----获取元素是一个集合(伪数组)
</script>    

总结： getElementsByTagName(“标签”)----获取得的元素是一个集合(伪数组)。

七、根据标签名修改元素内容

<input type="button" value="修改p标签内容" id="btn">
<div id="dv1">
    <p>豹子头林冲</p>
    <p>黑旋风李逵</p>
    <p>及时雨宋江</p>
    <p>小李广花荣</p>
    <p>双鞭呼延灼</p>
</div>    
<div id="dv2">
    <p>豹子头林冲</p>
    <p>黑旋风李逵</p>
    <p>及时雨宋江</p>
    <p>小李广花荣</p>
    <p>双鞭呼延灼</p>
</div>    
<script>
    //需求：只获取第一组p标签内容
    //获取事件源
    var btn=document.getElementById("btn");
    btn.onclick=function(){
        var pObjs=document.getElementById("dv1").getElementsByTagName("p");
        for(i = 0; i < pObjs.length; i++){
            pObjs[i].innerText="水浒传";
        }
    }
</script>

注意： document.getElementById(“dv1”)后面直接写获取标签名getElementsByTagName(“p”)。