js交互

最新推荐文章于 2024-04-16 18:09:03 发布

n辞.

最新推荐文章于 2024-04-16 18:09:03 发布

阅读量65

点赞数

分类专栏：二阶段文章标签： javascript 交互前端

本文链接：https://blog.csdn.net/weixin_65332493/article/details/127289838

版权

二阶段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1获取标签

1通过id名获取

document.getElementById("id名");
适合：适合单个标签获取

<body>
    <!-- 标签就是元素 -->
    <div class="box" id="wrap">这是div标签</div>
    <script>
        // 1.通过id名获取 document.getElementById("id名");
        var oDiv = document.getElementById("wrap");
        console.log(oDiv); 
    </script>
</body>

2通过类名获取

document.getElementsByClassName("class名字") 获取整个文档下的对应标签
父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签

注意：通过类名获取的是元素集合获取元素集合中具体某一个元素需要加下标元素集合[下标]

注意：元素集合只有一个元素，也要通过下标的形式获取

    <script>
        //2.通过类名获取
        //2.1 document.getElementsByClassName("class名字") 获取整个文档下的对应标签
        var oDiv = document.getElementsByClassName("box");
        console.log(oDiv);//HTMLCollection(3)  元素集合
        //获取元素集合中的具体某一个标签  语法  元素集合[下标]
        console.log(oDiv[0]);
        console.log(oDiv[2]);
        // 2.2 父元素.getElementsByClassNAme("class名字") 获取父元素下对应的标签
        //先获取父元素  通过class类名
        var oUl = document.getElementsByClassName("list");
        console.log(oUl[0]);//元素集合中哪怕只有一个 也有通过下标的形式获取
        // 获取ul下的box
        var list = oUl[0].getElementsByClassName("box");
        console.log(list);
    </script>

3通过标签名获取

document.getElementsByTagName("标签名") 获取整个文档下的对应标签
父元素.getElementsByTagName("标签名") 获取父元素下对应的标签

注意：通过标签名获取的是元素集合获取元素集合中具体某一个元素需要加下标元素集合[下标]

注意：元素集合只有一个元素，也要通过下标的形式获取


    <script>
        // 3.通过标签名获取
        // 3.1 document.getElementsByTagName("标签名")  获取整个文档下的对应标签
        var oDiv = document.getElementsByTagName("div");
        console.log(oDiv);//HTMLCollection(4)  元素集合  获取元素集合中具体的标签  元素集合[下标]
        console.log(oDiv[1]);
        //3.2 父元素.getElementsByTagName("标签名")  获取父元素下对应的标签
        var oUl = document.getElementsByTagName("ul")[0];
        console.log(oUl);
        var xDiv = oUl.getElementsByTagName("div");
        console.log(xDiv);//HTMLCollection [div]
    </script>

2鼠标事件

添加事件

元素.事件类型 = function(){   要做什么事   }

鼠标事件类型

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

        // 1.获取元素
        var oDiv = document.getElementsByTagName("div")[0];
        console.log(oDiv);
        // 2.鼠标单击 onclick
        oDiv.onclick = function () {
            console.log("单击");
        }
        // 3.鼠标双击 ondblclick
        oDiv.ondblclick = function () {
            console.log("双击");
        }
        // 4.鼠标移入 onmouseover
        oDiv.onmouseover = function () {
            console.log("移入");
        }
        // 5.鼠标移动  onmousemove
        oDiv.onmousemove = function () {
            console.log("移动");
        }
        // 6.鼠标移出 onmouseout
        oDiv.onmouseout = function () {
            console.log("移出");
        }
        // 7.鼠标按下  onmousedown
        oDiv.onmousedown = function () {
            console.log("按下");
        }
        // 8.鼠标抬起  onmouseup
        oDiv.onmouseup = function () {
            console.log("抬起");
        }
        // 9.鼠标右键显示菜单
        oDiv.oncontextmenu = function () {
            console.log("右击显示菜单项");
        }
        // 10.onmouseenter  onmouseleavae  移入移出
        oDiv.onmouseenter = function () {
            console.log("移入1");
        }
        oDiv.onmouseleave = function () {
            console.log("移出1");
        }