7.14 DOM学习笔记，代码练习

最新推荐文章于 2024-09-20 00:07:10 发布

铃铛儿√

最新推荐文章于 2024-09-20 00:07:10 发布

阅读量185

点赞数 1

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_46479336/article/details/125790709

版权

本文通过四个示例介绍了DOM操作的基本方法，包括获取页面节点、改变节点样式、响应用户点击事件以及实现表单验证。示例1展示了静态行色不同的表格；示例2实现了行点击变色；示例3实现了列点击变色；示例4演示了图片背景的换肤功能；示例5则涵盖了前端表单的邮箱和密码格式验证。这些实例详细展示了JavaScript如何与HTML元素交互，实现动态效果和用户输入验证。

摘要由CSDN通过智能技术生成

DOM

获取页面节点的方法

使用内置的方法来获取

document.getElementById()//查找速度最快
document.getElementsByClassName()
document.querySelector()：支持各种选择器，返回第一个满足条件的节点；
document.querySelectorAll()：返回所有的满足条件的节点

根据节点的关系来获取

父：parentNode
子：children child
兄弟姐妹：sibling

节点的分类

Nodetype
9：document
1：元素节点
3：文本节点
8：注释节点

注意：
1. 只有一个根节点document
2. 除了根节点外，其他所有节点都有唯一的一个父节点
3. document是window对象的属性
4. 元素的属性/文本/注释也是独立节点，注意属性节点不是元素节点的子节点

代码练习：

1、静态行色不同

<!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>
<style>
    table{
        width: 200px;
        text-align: center;
        border-collapse: collapse;
        cursor: pointer;
    }
</style>

<body>
    <table border="" Cellspacing="0" Cellpadding="0">
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>

        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>

    </table>
    <script>
        let a=document.querySelectorAll("tr")
        console.log(a);
        function fn(){
            for(let i=0;i<a.length;i++){
                if(i%2==0){
                    a[i].style.backgroundColor="blue";
                }else{
                    a[i].style.backgroundColor="green";
                }
            }
        }
        fn();
    </script>
</body>
</html>

结果
在这里插入图片描述

2、行点击变色

<!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>
<style>
    table {
        width: 500px;
        text-align: center;
        cursor: pointer;
        border-collapse: collapse;
    }
</style>

<body>
    <table border="" cellpadding="1" cellspacing="0">
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>

        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>

    </table>
    <script>
        // Object.prototype.indexOf = function () { }

        let trs = document.querySelectorAll("tr")
        let tds = document.querySelectorAll("td");
        console.log(trs);
        for (let i = 0; i < trs.length; i++) {
            trs[i].onclick = function () {
                trs.forEach(function (el) {
                    // console.log(el);
                    el.style.backgroundColor = "white";
                })
                trs[i].style.backgroundColor="grey"
            }
        }
    </script>
</body>

</html>

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

3、列点击变色

<!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>
<style>
    table {
        width: 500px;
        text-align: center;
        cursor: pointer;
        border-collapse: collapse;
    }
</style>

<body>
    <table border="" cellpadding="1" cellspacing="0">
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>

        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>

    </table>
    <script>
        Object.prototype.myIndexOF=function(){
            let arr=this.parentElement.children
            for(let i=0;i<arr.length;i++){
                if(arr[i]==this){
                    return i;
                }
            }
        }
        let trs=document.querySelectorAll("tr");
        let tds=document.querySelectorAll("td");
        // console.log(tds);
        for(let i=0;i<tds.length;i++){
            tds[i].onclick=function(){
                tds.forEach((el,index)=>{
                    el.style.backgroundColor="white"
                })
                let childIndex=tds[i].myIndexOF()
                trs.forEach((el,index)=>{
                    el.children[childIndex].style.backgroundColor="pink"
                })
            }
        }
    </script>
</body>
</html>

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

4、换肤

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

<body>
    <img src="./src/tp.jpg" alt="" id="id1">
    <img src="./src/tp.jpg" alt="" id="id2">
    <img src="./src/tp.jpg" alt="" id="id3">
    <script>
        let ss1=document.querySelector("body")
        let s1=document.querySelector("#id1")
        let s2=document.querySelector("#id2")
        let s3=document.querySelector("#id3")

        s1.onclick=function (){
            ss1.style.backgroundImage="url(https://t7.baidu.com/it/u=4080826490,615918710&fm=193&f=GIF)"
            ss1.style.backgroundSize="100%"
        }

        s2.onclick=function (){
            ss1.style.backgroundImage="url(https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF)"
            ss1.style.backgroundSize="100%"
        }

        s3.onclick=function (){
            ss1.style.backgroundImage="url(https://t7.baidu.com/it/u=813347183,2158335217&fm=193&f=GIF)"
            ss1.style.backgroundSize="100%"
        }

    </script>
</body>

</html>

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

change

5、表单验证

<!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>
<style>
    
</style>

<body>
    <!-- 验证用户输入的邮箱、密码的格式是否正确 -->
    <div>
        邮箱<input type="text" id="email">
        <br>
        密码<input type="password" id="pwd">
        <br>
        <button id="bt">登录</button>
    </div>
    <script>

        let bt = document.querySelector("#bt");

        bt.onclick = function () {
            emailreg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            //6到16位字母或数字的组合
            pwdreg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
            let email = document.querySelector("#email");
            let pwd = document.querySelector("#pwd");
            let emailv=email.value;
            let pwdv=pwd.value;
            console.log(emailv);
            console.log(pwdv);
            // if(emailreg.test(emailv)){
            //     // console.log("格式正确");
            //     email.style.border="1px green solid "
            // }else{
            //     console.log("格式错误，请重新输入");
            //     email.style.border="1px red solid"
            // }
            // if(pwdreg.test(pwdv)){
            //     console.log("密码格式正确");
            //     pwd.style.border="1px green solid"
            // }else{
            //     console.log("格式错误，请输入6到16位字母或数字的组合");
            //     pwd.style.border="1px red solid"
            // }
            if(emailreg.test(emailv)&&pwdreg.test(pwdv)){
                console.log("格式正确");
                email.style.border="1px green solid"
                pwd.style.border="1px green solid"
            }else{
                console.log("邮箱或密码格式错误，请重新输入");
                email.style.border="1px red solid"
                pwd.style.border="1px red solid"
            }

        }
    </script>
</body>

</html>