JavaScript---DOM（一）

最新推荐文章于 2024-07-17 15:26:15 发布

By Land

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量146

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_61911953/article/details/129818755

版权

c、getElementById（）和getElementsByTagName（）

1、DOM介绍

DOM全称，Document Object Model （文档对象模型）描述了处理网页内容的方法和接口，最根本的对象为document。我们通过DOM操作、修改、访问网页中的各种HTML标签。

2、获取DOM对象和操作元素内容

（1）获取DOM对象

a、querySelect()

常用的获取DOM对象的方法是querySelector()，括号中所填的格式与CSS的选择器形式相同，注意加上单引号。一般写作document.querySelector()，表示在整个document范围内查找，也可以用一个DOM对象调用querySelect()，表示在这个对象的子节点中查找。

<!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>Document</title>
</head>
<body>
    <div></div>
    <ul class="flag">
        <li></li>
        <li></li>
        <li></li>
        <li class="last"></li>
    </ul>
    <input type="text">
    <input type="button" value="按钮">
    <script>
        const div = document.querySelector('div')//获取div节点
        const flag = document.querySelector('.flag')//获取ul节点
        const li2 = document.querySelector('.flag li:nth-child(2)')//获取第二个ul中的第二个li
        const btn = document.querySelector('[type=button]')//利用属性选择器获取按钮对象
        const ul = document.querySelector('ul')//获取ul对象
        const last = ul.querySelector('.last')//获取ul中的有last类名的li
    </script>
</body>
</html>

b、querySelectAll()

当很多标签具有同一个类名或属性，我们需要获取所有包含这个类名或者属性的节点时，使用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>Document</title>
</head>
<body>
    <ul>
        <li class="flag"></li>
        <li class="flag"></li>
        <li></li>
        <li></li>
        <li class="flag"></li>
    </ul>
    <script>
        const lis = document.querySelectorAll('.flag')
        console.log(lis);
    </script>
</body>
</html>

输出结果

当我们想要使用哪个节点时，只需要用数组名[索引号]即可

c、getElementById（）和getElementsByTagName（）

几乎不再使用

(2)、操作元素内容

a、innerText

对象.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>Document</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        const div = document.querySelector('div')
        div.innerText = 'hi!'
    </script>
</body>
</html>

运行结果

b、innerHTML

用法与innerText相同，但是innerHTML可以解析HTML标签，而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>Document</title>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <script>
        const li1 = document.querySelector('ul li:first-child')
        const li2 = document.querySelector('ul li:last-child')
        li1.innerText = '<h1>看看我有没有加粗</h1>'
        li2.innerHTML = '<h1>看看我有没有加粗</h1>'
    </script>
</body>
</html>

输出结果

如图所示，innerText没有解析出h1标签，而是把它当做了普通文本输出，所以在日常使用中，我们几乎不使用innerText标签。

3、操作元素属性

（1）操作常用属性

如果我们要操作的属性是像<img>标签的src一样写在行内的话，我们通过“对象.属性名”即可操作其属性，值得注意的是，JS中不允许‘-’符号，所以类似background-color这种带有短横线的属性在JS中都写作backgroundColor，将短横线后面的第一个字母大写即可

<!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>Document</title>
</head>
<body>
    <a href="http://www.baidu.com">点我</a>
    <script>
        const a = document.querySelector('a')
        a.href = 'https://www.sogou.com/' //更改链接
    </script>
</body>
</html>

上述代码将a标签的href从百度改到了搜狗，点击a标签跳转到搜狗首页

（2）操作样式属性

如果我们希望获取的属性是通过CSS实现，而不是直接写在行内的话，我们就不能直接通过“对象.属性名”的方法操作属性，对此，我们有以下三种方法。

a、通过style属性控制样式

基本用法：“对象.style.属性名”，值得一提的是这种方法相当于直接将元素的样式属性写在行内，所以优先级非常高，要特别注意优先级的问题。这种方式适用于需要修改的样式较少的情况。

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        const div = document.querySelector('div')
        div.style.backgroundColor = '#000'
    </script>
</body>
</html>

上述代码通过“对象.style.属性名”的方式将div的背景颜色改为了黑色。

b、className

当我们想要修改的样式属性很多时，使用style方式来修改就非常的繁琐，我们可以采取定义一个或多个CSS类，将我们想要修改的样式写在类中，再使用className（）方法将类绑定给标签。基本用法className = '类名1 类名2 类名3……'。注意：使用className设置类名会覆盖标签原有的类名！

<!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>Document</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .d2 {
            width: 200px;
            height: 100px;
        }
        .d3 {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <script>
        const div = document.querySelector('div')
        div.className = 'd2 d3'//修改div的类名为d2 d3
    </script>
</body>
</html>

运行结果

上述代码中，我们用className给div设置了d2、d3类之后，可以发现div的pink背景消失了，而d2、d3类中并没有任何修改背景颜色的语句，这是因为在使用className之后，原有的类名被替换掉了。因为这个特性，我们在实际开发中并不常用className，但是在对于某些特定的需求时className也非常好用。

c、classList

在实际使用中，我们更倾向于使用classList来操作标签的样式属性classList有三个方法:add、remove、toggle（添加类、删除类、切换类），其中切换类的作用是，如果有这个类名，则删去（类似于remove），如果没有这个类名，则添加这个类名（类似于add）。通过classList操作属性不会覆盖以前的类名！基本用法：对象.classList.add('类名')

<!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>Document</title>
    <style>
        .d1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .d2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .d3 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .d4 {
            border: 2px solid red;
        }
        .d5 {
            background-color: gold;
        }
    </style>
</head>

<body>
    <div class="d1"></div>
    <div class="d2 d4"></div>
    <div class="d3 d4"></div>
    <script>
        const  divs = document.querySelectorAll('div')
        divs[0].classList.add('d4')//给第一个盒子添加红色边框
        divs[1].classList.remove('d4')//移除第二个盒子的边框
        divs[2].classList.toggle('d4')
        divs[2].classList.toggle('d5')//toggle的作用是，有则删掉，无则加上，则删掉了第三个盒子的边框，并给它添加了背景为金色的类名
    </script>
</body>

</html>

4、自定义属性（HTML5）

在某些情况下，我们需要自己去给标签定义一个属性，自定义属性一律以data开头，如下

    <div class="nav" data-name="1"></div>

短横线后是自己定义的名字，之后给这个属性赋一个值，在tab栏切换时我们常用到自定义属性。如果我们想要获取data-name后的值，必须通过dataset获取，dataset是一个集合里面存放了所有以data 开头的自定义属性，用法：对象.dataset.name

<!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>Document</title>
</head>
<body>
    <div class="nav" data-name="1"></div>
    <script>
        const div = document.querySelector('div')
        console.log(div.dataset.name);//1
    </script>
</body>
</html>