• 前端研习录（28）——JavaScript Element对象及其属性讲解及示例分析

    前端研习录（28）——JavaScript Element对象及其属性讲解及示例分析

    版权声明

    • 本文原创作者：清风不渡
    • 博客地址：https://blog.csdn.net/WXKKang

      重拾前端记忆，记录学习笔记，现在进入JavaScript Element对象及其属性部分

    一、Element对象

      Element对象对应的是网页的HTML元素。每一个HTML元素，在DOM树上都会对应转化成为一个Element对象

    1、Element.id属性

      Element.id属性返回指定元素的id属性，该属性可读可写，示例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
head>
<body>
    
    <div class="box" id="txt">Hellodiv>

    <script>
        var txt = document.getElementById("txt");
        txt.id = "hello"        
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

      如此便将id改为了hello，结果如下：

    在这里插入图片描述

    2、Element.className属性

      Element.className属性 用于读写当前元素节点的class属性，他的值是一个字符串，每个class之间用空格分开，示例如：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
        }
    style>

head>
<body>
    
    <div class="box" id="txt">Hellodiv>

    <script>
        var txt = document.getElementById("txt");
        txt.className = "box box1"     
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

      结果如下，我们通过读写class属性为div添加了CSS样式：

    在这里插入图片描述

    3、Element.classList对象

      classList对象有以下四个方法：

    • classList.add();    添加一个class属性
    • classList.remove();    移除一个class属性
    • classList.contains();    检查当前元素是否包含某个class
    • classList.toggle();    将某个class移入或移出当前元素（存在就移出，不存在就移入）

      示例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: rebeccapurple;
        }
    style>

head>
<body>
    
    <div class="box" id="txt">Hellodiv>

    <script>
        var txt = document.getElementById("txt");
        txt.classList.add("box1");
        if (txt.classList.contains("box")){
            txt.classList.remove("box")
        }
        txt.classList.toggle("box")
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

      结果如下：

    在这里插入图片描述

    为什么经过一番操作之后，box和box1都在呢

    4、innerHTML和innerText

      Element.innerHTML属性返回一个字符串，等同于该元素包含的所有HTML代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容。

      给innerHTML和innerText加入参数时，都是用于修改元素标签中的内容，而两者的区别是：innerHTML可以识别标签，而innerText识别不了标签，会统一识别成一个字符串，示例如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
    style>

head>
<body>
    
    <div class="box" id="txt1">Hellodiv>
    <div class="box" id="txt2">Hellodiv>
    
 
    <script>
        var txt1 = document.getElementById("txt1");
        var txt2 = document.getElementById("txt2");
        var str = "前往百度";
        txt1.innerHTML = str;
        txt2.innerText = str;
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

      结果如下：
    在这里插入图片描述

    二、Element获取元素位置

    1、Element.clientHeight

      Element.clientHeight 返回一个整数值，表示元素节点的CSS高度（单位：像素），除了元素本身的高度，它还包括padding部分，但是不包括border和margin部分
      只对块级元素生效，对于行内元素则返回0，如果块级元素没有设置高度，则返回实际高度
      如果有水平滚动条，则还要【减去】水平滚动条的高度

    注意：返回的值始终是整数，如果是小数则会四舍五入
    常用document.documentElement.clientHeight)返回视口总高度，document.body.clientHeight返回网页总高度

    2、Element.clientWidth

      Element.clientWidth返回一个整数值，表示元素节点的CSS宽度（单位：像素），除了元素本身的宽度，它还包括padding部分，但是不包括border和margin部分
      只对块级元素生效，对于行内元素则返回0
      如果有垂直滚动条，则还要【减去】垂直滚动条的宽度

    3、Element.scrollHeight

      Element.scrollHeight返回一个整数值，表示元素节点的CSS高度（单位：像素），除了元素本身的高度，它还包括padding部分，但是不包括border和margin部分
      只对块级元素生效，对于行内元素则返回0，如果块级元素没有设置高度，则返回实际高度
      如果有水平滚动条，则还要【加上】水平滚动条的高度

    注意：返回的值始终是整数，如果是小数则会四舍五入
    常用document.documentElement.scrollHeight)返回视口总高度，document.body.scrollHeight返回网页总高度（含滚动条）

    4、Element.scrollWidth

      Element.scrollWidth返回一个整数值，表示元素节点的CSS宽度（单位：像素），除了元素本身的宽度，它还包括padding部分，但是不包括border和margin部分
      只对块级元素生效，对于行内元素则返回0
      如果有垂直滚动条，则还要【加上】垂直滚动条的宽度

    5、Element.scrollLeft

      Element.scrollLeft 属性表示当前元素的水平滚动条向右侧滚动的像素数量

    6、Element.scrollTop

      Element.scrollLeft 属性表示当前元素的垂直滚动条向下滚动的像素数量

    注意：
    对于没有滚动条的网页元素，scrollLeft和scrollTop的值为0
      
    如果要查看整张网页的滚动距离，则要从document.documentElement元素上读取，如下：
    document.documentElement.scrollLeft    向左的像素距离
    document.documentElement.scrollTop    向上的像素距离

    7、Element.offsetHeight

      Element.offsetHeight 属性返回一个整数，表示元素的CSS垂直高度（单位：像素），包括元素本身的高度、padding和border
      如果有水平滚动条，则还要【加上】水平滚动条的高度

    8、Element.offsetWidth

      Element.offsetWidth属性返回一个整数，表示元素的CSS水平宽度（单位：像素），包括元素本身的高度、padding和border
      如果有垂直滚动条，则还要【加上】垂直滚动条的宽度

    注意：
    如果元素的CSS设定为不可见（display:none），则返回0

    9、Element.offsetLeft

      Element.offsetLeft 属性返回当前元素左上角相对于Element.offsetParent节点的水平位移（单位：像素）
      可以理解为：到定位父级左边界的间距

    10、Element.offsetTop

      Element.offsetTop属性返回当前元素左上角相对于Element.offsetParent节点的垂直位移（单位：像素）
      可以理解为：到定位父级上边界的间距

    注意：
    当父节点没有设置定位时，一直向上寻找直至顶层文档
    当父节点设置了定位时，则取距离父节点水平、垂直位移

    12、示例

      综合以上知识点，示例代码如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px solid red;
            margin: 20px;
            background-color:yellowgreen;

        }

        .login{
            height: 150px;
            width: 150px;
            overflow: scroll;
        }

        .login1{
            position: relative;
        }

        h1{
            height: 60px;
        }
    style>

head>
<body>
        <div class="box" id="box1">Hellodiv>


    <div class="login" id="login">
        <div class="box" id="box2">Hellodiv>
    div>
    

    <span id="txt">清风不渡span>

    <h1>标题h1>
    <h1>标题h1>
    <h1>标题h1>
    <h1>标题h1>
    <h1>标题h1>
    <h1>标题h1>
    
 
    <script>
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var login = document.getElementById("login");
        var txt = document.getElementById("txt");



        console.log("---------------------clientWidth   clientHeight----------------------");
        console.log("---------------------获取块级元素高宽度，含padding----------------------");
        console.log(box1.clientHeight);
        console.log(box1.clientWidth);

        console.log("---------------------获取行内元素高宽度，返回0----------------------");
        console.log(txt.clientHeight);
        console.log(txt.clientWidth);

        console.log("---------------------获取视口及网页高度----------------------");
        console.log(document.documentElement.clientHeight);
        console.log(document.body.clientHeight);

        console.log("---------------------scrollHeight   scrollWidth----------------------");
        console.log("---------------------获取块级元素高宽度，含padding，不含滚动条----------------------");
        console.log(login.clientHeight);
        console.log(login.clientWidth);

        console.log("---------------------获取块级元素高宽度，含padding，含滚动条----------------------");
        console.log(login.scrollHeight);
        console.log(login.scrollWidth);

        console.log("---------------------获取行内元素高宽度，返回0----------------------");
        console.log(txt.scrollHeight);
        console.log(txt.scrollWidth);

        console.log("---------------------获取视口及网页高度----------------------");
        console.log(document.documentElement.scrollHeight);
        console.log(document.body.scrollHeight);

        console.log("---------------------scrollHeight   scrollWidth----------------------");
        console.log("---------------------获取元素水平垂直方向的滚动距离----------------------");
        console.log(box2.scrollLeft);
        console.log(box2.scrollTop);
        console.log("---------------------获取整张网页水平垂直方向的滚动距离----------------------");
        console.log(document.documentElement.scrollLeft);
        console.log(document.documentElement.scrollTop);

        console.log("---------------------offsetHeight   offsetWidth----------------------");
        console.log("---------------------获取块级元素高宽度，含padding,border----------------------");
        console.log(box1.offsetHeight);
        console.log(box1.offsetWidth);

        console.log("---------------------获取行内元素高宽度，不返回0----------------------");
        console.log(txt.offsetHeight);
        console.log(txt.offsetWidth);

        console.log("---------------------offsetLeft   offsetTop----------------------");
        console.log("---------------------获取元素左上角相对于Element.offsetParent节点的水平、垂直位移----------------------");
        console.log("---------------------当父节点没有设置定位时，一直向上寻找直至顶层文档----------------------");
        console.log(box2.offsetLeft);
        console.log(box2.offsetTop);


        console.log("---------------------获取元素左上角相对于Element.offsetParent节点的水平、垂直位移----------------------");
        console.log("---------------------当父节点设置了定位时，则取距离父节点水平、垂直位移----------------------");
        login.classList.add("login1");
        console.log(box2.offsetLeft);
        console.log(box2.offsetTop);


        
    script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132

      页面效果如下：
    在这里插入图片描述
      控制台效果如下：

    在这里插入图片描述

  • 相关阅读:
    面试常用排序查找算法
    低代码 —— 初步认识 Appsmith
    vue3面试题：2022 最新前端 Vue 3.0 面试题及答案（持续更新中……）
    基于Matlab求解高教社杯全国大学生数学建模竞赛(cumcm2014B题)-创意平板折叠桌（附上源码+数据+题目）
    JAVA【泛型】详解
    c语言（看一遍就会操作，小马教一步步教你如何文件操作）
    【电商数仓】数仓搭建之DIM维度层（商品、优惠券、活动、地区、时间维度表）
    防汛添利器，数字技术筑起抗洪“大堤”
    JS判断数据类型
    Kafka bootstrap.server is not a recognized option
  • 原文地址：https://blog.csdn.net/WXKKang/article/details/126332526