JavaScript-DOM-document对象访问元素

十二啊

已于 2022-05-09 08:27:20 修改

阅读量893

点赞数

分类专栏：十二的 Javascript 之路文章标签： javascript 前端

于 2022-04-20 22:35:43 首次发布

十二

本文链接：https://blog.csdn.net/qq_42543177/article/details/124309133

版权

十二的 Javascript 之路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript-DOM-document对象访问元素

document对象包含多个访问文档内元素的方法。简单介绍一下。

getElementById()

返回指定id属性值的第一个元素，若未找到则返回null。

getElementsByName()

返回属性name的所有元素集。是一个nodeList对象，可通过[]或item()访问列表元素。

getElementsByTagName()

返回相应标签/元素的所有元素集。是一个HTMLCollection对象（HTMLCollection对象还包含一个namedItem()方法，该方法可以通过元素的name特性取得集合中的项目），与nodeList对象相似，也可通过[]或item()访问列表元素。

补充：除了以上三种常用方法，还有几种我们会用到的方法，详见：document对象访问元素(补充篇)

亲自试一试

以上所包含的所有情况都包含在下面这个完整的图片切换例子中，可以亲自感受一下每种方法的不同之处及适用情况。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DOM-图片切换实现</title>
    <script>
        window.onload = function () {
            // 图片存在项目同一文件夹下
            let imgArr = ['photo/tp1.jpg', 'photo/tp2.jpg', 'photo/tp3.jpg', 'photo/tp4.jpg', 'photo/tp5.jpg'];
            let index = 0;
            // getElementsByName()返回属性name的所有元素集。是一个nodeList对象，可通过[]或item()访问列表元素
            let img = document.getElementsByName('imgname')['0'];
            // getElementsByTagName()返回相应标签/元素的所有元素集。
            // 是一个HTMLCollection对象(包含一个namedItem()方法)，与nodeList对象相似
            let previmg = document.getElementsByTagName('span').namedItem('prevbtn');
            // console.log(previmg.namedItem('prevbtn'));
            // getElementById()返回指定id属性值的第一个元素
            let nextimg = document.getElementById('next');
            // 上一张点击事件
            previmg.onclick = function () {
                index--;
                if (index < 0) {
                    index = imgArr.length - 1;
                }
                img.src = imgArr[index];
            }
            // 下一张点击事件
            nextimg.onclick = function () {
                index++;
                if (index >= imgArr.length) {
                    index = 0;
                }
                img.src = imgArr[index];
            }



        }
    </script>
    <style>
        /* 去除默认样式 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置容器大小使内容居中 */
        #main {
            width: 800px;
            margin: 10px auto;
        }

        /* 按钮居中 用到了flex布局*/
        #footer {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        /* 金属感按钮 */
        span.button-gray {
            display: block;
            position: relative;
            height: 25px;
            width: 80px;
            margin: 0 10px 18px 0;
            text-decoration: none;
            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: bold;
            line-height: 25px;
            text-align: center;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
        }

        .button-gray,
        .button-gray:hover,
        .button-gray:visited {
            color: #555;
            border-bottom: 4px solid #b2b1b1;
            background: #eee;
            text-shadow: 0 1px 0 #fafafa;
            box-shadow: inset 1px 1px 0 #f5f5f5;
        }

        .button-gray:hover {
            background: #e2e2e2;
        }

        .button-gray:active {
            border: none;
            bottom: -4px;
            margin-bottom: 22px;
            box-shadow: 0 1px 1px #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);

        }

        .button-gray:active:before,
        .button-gray:active:after {
            border: none;
            box-shadow: none;
        }

        span .button-gray:before,
        span .button-gray:after {
            content: '';
            position: absolute;
            left: -1px;
            height: 25px;
            width: 80px;
            bottom: -1px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border: 1px solid #cbcbcb;
            border-bottom: 1px solid #a5a5a5;

        }

        span .button-gray:before {
            height: 23px;
            bottom: -4px;
            border-top: 0;
            border-radius: 0 0 3px 3px;
            -webkit-border-radius: 0 0 3px 3px;
            -moz-border-radius: 0 0 3px 3px;
            box-shadow: 0 1px 1px 0px #bfbfbf
        }
    </style>
</head>

<body>
    <div id="main">
        <img name="imgname" src="photo/tp1.jpg" alt="加载中">
        <div id="footer">
            <span id="prev" name="prevbtn" class="button-gray">上一张</span>
            <span id="next" name="nextbtn" class="button-gray">下一张</span>
        </div>
    </div>

</body>

</html>