Java教程

JavaScript--DOM(下)

本文主要是介绍JavaScript--DOM(下)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.获取节点的方法

①getElementById：通过节点的ID属性获取标签

②getElementsByTagName：通过标签名字获取节点，返回一个类数组。

<body>
    <li>我爱学习</li>
    <li>我爱学习</li>
    <li>我爱学习</li>
    <li>我爱学习</li>
    <li>我爱学习</li>
    <li>我爱学习</li>
    <li>我爱学习</li>
</body>
</html>
<script type="text/javascript">
    var arr = document.getElementsByTagName("li");
    //遍历数组元素，改变节点样式
    for(var i =0;i<arr.length;i++){
        arr[i].style.color = "red";
    }
</script>

③getElementsByClassName：通过标签的class属性值获取相应节点，返回一个类数组。

<script type="text/javascript">
    var arr = document.getElementsByClassName("cur");
    for(var i= 0;i<arr.length;i++){
        arr[i].style.background="blue";
    }
</script>

④querySelector：可以通过任意的选择器获取第一个出现的节点。

<script type="text/javascript">
    //使用标签选择器
    var ele = document.querySelector("li");
    ele.style.background = "red";
</script>

2.批量添加事件

即先获取全部节点，再用循环语句遍历数组。

<script type="text/javascript">
    var liArr = document.getElementsByTagName('li');
    for(var i = 0;i<liArr.length;i++){
        +function(index){
            //在每一个IIFE作用域里给元素绑定单击事件
            liArr[index].onclick = function(){
                //单击变红
                liArr[index].style.color = "red";
            }
        }(i);
    }
</script>

 3.函数上下文this

概述：当用户触发了元素事件时，函数的上下文即为触发这个事件的元素。

上例代码的第二种实现方式：

<script type="text/javascript">
    var liArr = document.getElementsByTagName('li');
    for(var i = 0;i<liArr.length;i++){
        liArr[i].onclick = function(){
            this.style.color = "red";
        }
    }
</script>

4.事件对象

任意节点都可以绑定事件，当用户触发事件时，系统自动给事件处理函数传递实参，这个参数即为事件对象。

<script type="text/javascript">
    var div = document.querySelector("div");
    div.onclick = function (a) {
        console.log(a);
    }
</script>

5.获取鼠标位置

鼠标移动时事件对象的常见属性：

①screenX与screenY：指鼠标位置。注意坐标原点在电脑屏幕的左上角。

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    var inner = document.querySelector('.inner');
    //鼠标移动就会有打印出鼠标位置
    document.onmousemove = function(event){
        inner.innerHTML = "screenX"+event.screenX+"screenY"+event.screenY;
    }
</script>

②pageX与pageY：作用也是获取鼠标位置，但原点是网页主题部分的左上角。

③clientX与clientY：获取鼠标位置，原点为可视区域的左上角，可视区域指当前网页所显示的部分。

④offsetX与offsetY：类似于pageX与pageY，但是原点会随元素的子元素变化。

6.实现拖拽效果

步骤：鼠标按下、拖拽、鼠标抬起。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .cur{
            position: absolute;
            width: 300px;
            height: 200px;
            background: url("./JS封面.jpg");
            /*设置背景图尺寸大小*/
            background-size: 300px 200px;
        }
    </style>
</head>
<body>
    <div class="cur"></div>
</body>
</html>

<script type="text/javascript">
    var div = document.querySelector('.cur');
    //鼠标按下
    div.onmousedown = function(event){
        var startX = event.offsetX;
        var startY = event.offsetY;
        //鼠标按下后在整个网页中移动
        document.onmousemove = function(event1){
            //将元素进行拖拽
            div.style.left = event1.clientX-startX+"px";
            div.style.top = event1.clientY-startY+"px";
        }
    }
    //鼠标抬起时将事件移除，即将函数制空。
    document.onmouseup = function(){
        document.onmousemove = null;
    }
</script>
这篇关于JavaScript--DOM(下)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航