5.JS基础交互_js交互类名-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_72686458/article/details/126474388

5.1 获取标签

5.1.1通过id获取标签(元素)

语法:document.getElementByid("id名")
作用:通过id名获取标签，可以获取到具体的某一个

<body>
    <div id="box">这是一个盒子</div>
    <div id="box"></div>
    <ul id="wrap">
        <li>泡面</li>
        <li>米饭</li>
        <li id="list">尼古拉斯赵四</li>
    </ul>
    <script>
 
        // 1.通过id获取元素  选择到具体的某一个
        // 通过id获取  document.getElementById("id名字")
        var oDiv =  document.getElementById("box")
        console.log(oDiv)
        
        var oList = document.getElementById("list")
        console.log(oList)

        var oWrap = document.getElementById("wrap")
        console.log(oWrap)
    </script>
</body>

5.1.2通过类名获取标签(元素)

document.getElementsByClassName("类名")
- 作用:获取整个文档下对应的类名标签
获取集合中某一个具体的标签：集合[下标/序号]

<body>
    <div class="box1">盒子1</div>
    <div class="box1">盒子2</div>
    <div class="box1">盒子3</div>
    <div class="box1">盒子4</div>
    <div class="box1">盒子5</div>
    <ul class="wrap">
        <li>这是li标签1</li>
        <li>这是li标签2</li>
        <li class="box1">这是li标签3</li>
        <li>这是li标签4</li>

    </ul>
    <script>
        //1.通过类名获取标签  document.getElementsByClassName("类名")  获取整个文档下的该类名的标签
        //通过类名获取到的是一个集合 如果想获取到这个集合中的某一个具体元素  集合[序号/下标]
        var oDivs = document.getElementsByClassName("box1");
        console.log(oDivs);//HTMLCollection(6)
        console.log(oDivs[0]);//获取集合中的第一个盒子
        console.log(oDivs[4]);//获取集合中的第五个盒子
        console.log(oDivs[6]);//undefined
    </script>
</body>

父元素.getElementsByClassName("类名")
- 作用:获取该父元素下对应的类名标签

<body>
    <div class="box1">盒子1</div>
    <div class="box1">盒子2</div>
    <div class="box1">盒子3</div>
    <div class="box1">盒子4</div>
    <div class="box1">盒子5</div>
    <ul class="wrap">
        <li>这是li标签1</li>
        <li>这是li标签2</li>
        <li class="box1">这是li标签3</li>
        <li>这是li标签4</li>
    </ul>
    <script>
        console.log(oDivs[6]);//undefined
        //2.通过父元素获取  父元素.getElementsByClassName("类名") 获取该父元素下的类名标签
        var father = document.getElementsByClassName("wrap")[0];
        var child = father.getElementsByClassName("box1")[0];
        console.log(child)
        // 3.注意 通过类名获取的是一个集合  哪怕这个集合中有一个元素  也得加下标/序号
    </script>
</body>

5.1.3通过标签名获取标签(元素)

document.getElementsByTagName("标签名")
- 获取整个文档下对应的标签名获取到的是一个集合

<body>
    <div class="box1">这是div标签1</div>
    <div class="box1">这是div标签2</div>
    <div class="box1">这是div标签3</div>
    <div class="box1">这是div标签4</div>
    <div class="box1">这是div标签5</div>
    <div class="box1">这是div标签6</div>
    <div class="box1">这是div标签7</div>
    <div class="box1">这是div标签8</div>
    <div class="box1">这是div标签9</div>
    <div class="box1">这是div标签10</div>
    <ul id="wrap">
        <li>
            <div>这是li列表</div>
        </li>
        <li>
            <div>这是li列表</div>
        </li>
        <li>
            <div>这是li列表</div>
        </li>
    </ul>
    <script>
        // 1.通过标签名获取标签  document.getElementsByTagName  获取整个文档下的对应标签
        var oDivList = document.getElementsByTagName("div");
        console.log(oDivList);//HTMLCollection(10)
        console.log(oDivList[9]);
    </script>
</body>

父元素.getElementsByTagName("标签名")
- 获取该父元素下对应的标签

   //   2.父元素.getElementsByTagName("标签名") 获取该父元素下对应的标签
        var father = document.getElementById("wrap");
        var child = father.getElementsByTagName("div");
        console.log(child);//HTMLCollection(3)

==注意：通过类名和标签名获取拿到的都是一个集合，都需要通过集合名[下标]来获取具体某一个标签==

5.2 鼠标事件

==注意:onmouseover和onmouseenter及onmouseout和onmouseleave的区别放在事件冒泡讲==

onclick : 点击事件
ondblclick:鼠标双击
onmouseover/onmouseenter :  鼠标移入事件
onmouseout/onmouseleave:  鼠标移出事件
onmousemove :  鼠标移动事件
onmousedown :  鼠标按下
onmouseup   :  鼠标抬起
oncontextmenu: 鼠标右键显示菜单

语法

标签.事件类型 = function(){
  执行某个动作之后  要执行的逻辑代码
}