JavaScript-选择元素、更改元素

最新推荐文章于 2024-01-10 13:48:36 发布

零OO

最新推荐文章于 2024-01-10 13:48:36 发布

阅读量496

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_39111074/article/details/120416074

版权

前端专栏收录该内容

222 篇文章 8 订阅

订阅专栏

获取元素

①根据 id 获取元素：getElementById()
②根据标签名获取元素：getElementsByTagName()

以下是h5新增的，ie9以上才支持，ie6,7,8不支持
③根据类名获取元素：getElementsByClassName()

④querySelector()- - -可以根据id、类名、标签名获取元素

根据id- - -querySelector(’#id名’)
根据类名- - -querySelector(’.类名’)
根据标签名- - -querySelector(‘标签名’)

注意：querySelector()只返回第一个元素，如果要获取相同类名或者标签的所用元素，使用querySelectorAll()

代码示例：

<!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="fruit apple">苹果</div>
    <div class="fruit">芒果</div>
    <div class="fruit" id="durian">榴莲</div>


    <script>
        var a = document.getElementById('durian');
        console.log(a.innerText);
        var b = document.getElementsByTagName('div');
        console.log(b);

        // 以下为h5新增，ie6,7,8不支持  ie9以上的支持
        var fruit = document.getElementsByClassName('fruit');
        console.log(fruit);

        var fruit1 = document.querySelector('.apple');
        var fruit2 = document.querySelector('#durian');
        var fruit3 = document.querySelector('div');
        var fruits = document.querySelectorAll('div');
        console.log(fruit1);
        console.log(fruit2);
        console.log(fruit3);
        console.log(fruits);
    </script>
</body>

</html>

页面效果：

获取/修改元素的内容，属性值

获取元素的内容：innerText、innerHTML

要更改元素内容的话，重新赋值

innerText、innerHTML两者之间的区别：
修改元素内容时，如果赋值的内容是一个包含空格或者换行的字符串，
innerText- -不会保留- -空格和换行
innerHTML- -会保留- -空格和换行

获取元素对象后，通过- - -元素对象.属性名- - -可以获取元素的属性，也可以为其赋值，更改属性值

eg:

<!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>
        img {
            margin-top: 20px;
            width: 200px;
            height: 300px;
        }
    </style>
</head>

<body>
    <button class="btn1">图1</button>
    <button class="btn2">图2</button><br>
    <img src="images/菲律宾食猴雕.jpg" alt="菲律宾食猴雕" title="菲律宾食猴雕">

    <script>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');

        btn1.onclick = function() {
            var img = document.querySelector('img');
            img.src = 'images/animal1.gif';
            img.alt = '袋鼠';
            img.title = '袋鼠';
        }

        btn2.onclick = function() {
            var img = document.querySelector('img');
            img.src = 'images/菲律宾食猴雕.jpg';
            img.alt = '菲律宾食猴雕';
            img.title = '菲律宾食猴雕';

        }
    </script>
</body>

</html>

页面效果：

切换图片.gif

修改元素的样式

元素对象.style.样式名 = 修改的样式值

eg:

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 获取元素对象
        var div = document.querySelector('div');
        // 给元素对象绑定事件类型，以及写明事件处理程序
        div.onclick = function() {
            div.style.backgroundColor = 'pink';
            div.style.width = '300px';
            div.style.height = '300px';
        }
    </script>
</body>

</html>