JS交互.

// 闭合标签

        // 1.获取：元素.innerHTML

        //         元素.innerText

        // 2.设置: 元素.innerHTML=值

        //         元素.innerText=值

        var oDiv = document.getElementsByTagName("div")[0];

        // 1.获取

        console.log(oDiv.innerHTML);

        console.log(oDiv.innerText);

        // 2.设置

        oDiv.innerHTML="新的文本内容1"

        oDiv.innerText="新的文本内容2"

       

        // 在原有的文本追加内容（字符串数据类型遇到+ 是拼接）

        oDiv.innerHTML=oDiv.innerText + "新的文本内容3"

// 获取整个文档下的标签名

        // 语法:document.getElementByTagName("标签名")

        var oDiv = document.getElementsByTagName("div");

        console.log(oDiv);

        console.log(oDiv[0]);

        console.log(oDiv[1]);

        console.log(oDiv[2]);

        // 获取父元素下对应的标签

        // 语法：父元素.getElementByTagName("标签名")

        // 先获取父元素

        var oUl = document.getElementsByTagName("ul");

        console.log(oUl[0]);

        // 再获取ul下的li

        var oLi = oUl[0].getElementsByTagName("li");

        console.log(oLi);

        console.log(oLi[0]);

        console.log(oLi[1]);

        console.log(oLi[2]);

        //表单元素的获取和设置

        var oInp =document.getElementsByTagName("input")[0];

        // 1.获取  （元素.value）

        console.log(oInp.value);

        // 2.设置   （元素.value=值）

        oInp.value="覆盖文字一"

// 鼠标添加事件

        // 语法:  元素.事件类型=function（）{要做的事}

        // 1.获取元素

        var oDiv = document.getElementsByTagName("div")[0];

        console.log(oDiv);

        // 2.添加事件

        // 鼠标单击

        oDiv.onclick = function(){

            console.log("单击")

        }

        // 鼠标双击

        oDiv.οndblclick=function(){

            console.log("双击")

        }

        // 鼠标移入

        oDiv.οnmοuseοver=function(){

            console.log("移入")

        }

        // 鼠标移出

        oDiv.οnmοuseοut=function(){

            console.log("移出")

        }

        // 鼠标移动

        oDiv.οnmοusemοve=function(){

            console.log("移动")

        }

        // 鼠标按下

        oDiv.οnmοusedοwn=function(){

            console.log("按下")

        }

        // 鼠标抬起

        oDiv.οnmοuseup=function(){

            console.log("抬起")

        }

        // 右键显示菜单

        oDiv.οncοntextmenu=function(){

            console.log("显示菜单")

        }

// 获取整个文档下的对应标签

        // 语法：document.getElementsByClassName("class名字")

        var oDiv = document.getElementsByClassName("box");

        console.log(oDiv);

        console.log(oDiv[0]);

        console.log(oDiv[1]);

        console.log(oDiv[2]);

 

        // 获取父元素下的对应标签

        // 语法：.getElementsByClsaaName("class名字")

        // 先获取父元素

        var oUl = document.getElementsByClassName("box1");

        console.log(oUl[0])

        // 再获取ul下的box

        var oLi = oUl[0].getElementsByClassName('box');

        console.log(oLi);

        console.log(oLi[0]);

        console.log(oLi[1]);

        console.log(oLi[2]);

<!-- 通过标签名获取 -->

    <div class="box">box0</div>

    <div class="box">box1</div>

    <div class="box">box2</div>

    <script>

        // 语法：document.getElementById("id名")

        var oDiv =document.getElementsByTagName("div");

        console.log(oDiv);

图片切换

<img src="./img/1.jpg" alt="">

    <button>切换</button>

    <script>

        var oImg=document.getElementsByTagName("img")[0];

        var oBottom=document.getElementsByTagName("bottom")[0];

        oBottom.οnclick=function(){

            oImg.src="./img/2.jpg";

        }