DOM、BOM

代码敲上天.

已于 2023-03-03 19:15:36 修改

阅读量91

点赞数

分类专栏： HTML、CSS、JS 文章标签： javascript Powered by 金山文档

于 2023-03-02 21:27:43 首次发布

本文链接：https://blog.csdn.net/m0_52226803/article/details/129302927

版权

HTML、CSS、JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript如何操作DOM，包括获取元素、修改元素内容和样式，以及事件处理如keyup、keydown和keypress事件的差异。此外，还涉及表单验证的实现，如账号和密码长度检查，以及动态生成表格数据。最后讨论了响应式设计，通过监听窗口大小变化调整布局。

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

DOM基本介绍

注意：里边放的是css选择器格式

<body>
        <div class="box">
            
            <img id="pic" src="../images/1.jpg" alt="">
            <div>
                <button class="prev">上一张</button>
                <button class="next">下一张</button>
            </div>
        </div>

        <script>
            var imgs=["../images/1.jpg","../images/2.jpg","../images/3.jpg"];
            /* 获取img对象 */
            var imgDom = document.querySelector('#pic');
            console.dir(imgDom);
            //获取按钮对象
            var prev=document.querySelector(".prev");
            var next=document.querySelector(".next");

            var i=0;
            next.onclick=function(){
                i++;
                if(i==3){
                    i=0
                }
                imgDom.src=imgs[i];
            }
            prev.onclick=function(){
                i--;
                if(i==-1){
                    i=2
                }
                imgDom.src=imgs[i];
            }
        </script>      
    </body>

 <body>
       <input type="text">
       <br><br>
       <textarea ></textarea>
       <script>
        //目标1：在单行文本框上注册keyup事件，将文本框中的内容输出到终端
        //目标2：在单行文本框上注册keydown事件，将文本框中的内容输出到终端
        //目标3：在单行文本框上注册keypress事件，将文本框中的内容输出到终端
        //总结：一般第一个多，而且一般这几种只用在Input和textarea中
        var input=document.querySelector("input");
        // input.onkeyup=function(){
        //     //this指向事件的调用者，此处this就是Input
        //     console.dir(this.value);
        //     console.log(this===input)
        // }

        // input.onkeydown=function(){
        //      //注意，按下瞬间就触发，但是此时a并没有到内存，
        //      //按到底才到，所以刚按b会输出上一个a
        //      console.dir(this.value);
        //     console.log(this===input)
        //  }

        //  input.onkeydown=function(){
        //     //区别于keydown在于Ctrl和alt键不会触发
        //     console.dir(this.value);
        //  }
        //目标4：在多行文本框上注册keyup事件，将文本框中的内容输出到终端
        // document.querySelector("textarea").onkeyup=function(){
        //     console.log(this.value);
        // }
       </script>
    </body>

表单验证练习

// 获取文本框\密码框对象
var account=document.querySelector('#account');
var pwd=document.querySelector('#pwd');

//1.文本框、密码框获取焦点时，边框变为橘黄色
account.onfocus=function(){
    this.style.border='1px solid orange'
}
pwd.onfocus=function(){
    this.style.border='1px solid orange'
}

// 2. 文本框\密码框失去焦点时，验证账号\密码长度，边框颜色变回
// 账号长度 6-12 位； 密码长度 8-16 位
account.onblur=function(){
    if(this.value.length<6||this.value.length>12)
    {
        alert('账号长度不正确，请重新输入');
    }
    this.style.border='';
}
pwd.onblur=function(){
    if(this.value.length<8||this.value.length>16)
    {
        alert('密码长度不正确，请重新输入');
    }
    this.style.border='';
}


// 3. 表单提交时，验证账号\密码长度，未通过验证则阻止表单提交
document.querySelector('form').onsubmit=function(){
    if(account.length<6||account.value.length>12)
    {
        alert('账号长度不正确，请重新输入');
    }
    account.style.border='';

    if(pwd.value.length<8||pwd.value.length>16)
    {
        alert('密码长度不正确，请重新输入');
    }
    pwd.style.border='';
}

<body>
    <table align="center" border="1" width="600" cellspacing="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        var userList = [
            {id: 1, name: '张三丰', gender: '男', age: 108},
            {id: 2, name: '张无忌', gender: '男', age: 22},
            {id: 3, name: '赵敏', gender: '女', age: 18},
            {id: 4, name: '周芷若', gender: '女', age: 18},
            {id: 5, name: '杨逍', gender: '男', age: 58},   
        ]
        var str = '';
        for (var i = 0; i < userList.length; i++) {
            str += "<tr><td>" + userList[i].id + "</td><td>" + userList[i].name
 + "</td><td>" + userList[i].gender + "</td><td>" + 
userList[i].age + "</td></tr>";
        }
        console.log(str);
        var tbody = document.querySelector('tbody');
        //相当于往tbody中循环放入了以下标签
        //<tr><td>1</td><td>张三丰</td><td>男</td><td>108</td></tr>
        tbody.innerHTML = str;
    </script>
</body>

<body>
    <form action="#">
        用户名: <input type="text" name="username" /><br>
        密　码: <input type="password" name="password" /><br>
        性　别: <input type="radio" name="gender" value="男">男
                    <input type="radio" name="gender" value="女">女
                    <input type="radio" name="gender" value="未知">未知<br>
        爱　好: <input type="checkbox" name="hobbies" value="吃">吃
                    <input type="checkbox" name="hobbies" value="喝">喝
                    <input type="checkbox" name="hobbies" value="玩">玩
                    <input type="checkbox" name="hobbies" value="乐">乐<br>
        籍　贯: <select name="addr">
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广州</option>
                        <option value="4">深圳</option>
                    </select><br>
        简　介: <textarea name="sign">这家伙很懒，什么都没写...</textarea><br>
        <button type="submit">提交</button>
    </form>


    <script>
        // 目标： 点击提交按钮时，将所有填写和选中的值输出到终端
        var form = document.querySelector('form');
        // 使用属性选择器获取标签对象，不用id也不用class
        var username = document.querySelector('[type="text"]');
        var password = document.querySelector('[name="password"]');
        //单选框是一个伪数组
        var gender = document.querySelectorAll('[name=gender]');
        //select下拉标签，选中谁值就是谁
        var addr = document.querySelector('[name=addr]');
        //文本框
        var sign = document.querySelector('[name=sign]');
        var hobbies = document.querySelectorAll('[name=hobbies]');
 

        form.onsubmit = function () {
            console.log(username.value);
            console.log(password.value);
            console.log(addr.value);
            console.log(sign.value);
            

            //循环打印每个单选框的check值
            for (var i = 0; i < gender.length; i++) { 
                if (gender[i].checked == true) {
                    console.log(gender[i].value);
                }
            }

            // 处理复选框，类似单选框
            for (var i = 0; i < hobbies.length; i++) {
                if (hobbies[i].checked == true) {
                    console.log(hobbies[i].value);
                }
            }
            //这里onsubmit的function函数直接返回一个false可以让网页不进行跳转
            return false;
        }
    </script>
</body>

<body>
    <div style="margin: 30px auto; width: 500px;height: 100px;">
        <input id="num1" type="text">
        <select id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">×</option>
            <option value="/">÷</option>
        </select>
        <input id="num2" type="text">
        <button>=</button>
        <span id="result"></span>
    </div>
    <script>
        var num1=document.querySelector('#num1');
        var num2=document.querySelector('#num2');
        var operator=document.querySelector('#operator');
        var btn=document.querySelector('button');
        var result=document.querySelector('#result');
        btn.onclick=function(){
            switch(operator.value){
                case '+':
                    //直接result.innerHTML
                    result.innerHTML=parseFloat(num1.value)+parseFloat(num2.value);
                    break;
                case '-':
                    //直接用result=是不行的，因为result已经指向一个标签，会导致值的改变
                    //同时result.innerHtml;会失效，因为result不是标签变量了，而是一个值
                    result=num1.value-num2.value;
                    break;
                case '*':
                    result=num1.value*num2.value;
                    break;
                case '/':
                    result=num1.value/num2.value;
                    break;
            }
            // result.innerHTML;
        }
    </script>
</body>

 <script>
        var eye = document.querySelector('.eye');
        var pwd = document.querySelector('#pwd');
        var eyeIcon = document.querySelector('.eye span');

        eye.onclick = function () {
            if (pwd.type == 'password') {
                pwd.type = 'text';
                eyeIcon.className = "iconfont icon-yanjing1";
            } else {
                pwd.type = 'password';
                eyeIcon.className = "iconfont icon-yanjing";
            }
        }
    </script>


    <script>
        var allCheck=document.querySelector('input');
        var checks=document.querySelectorAll('tbody input');
        allCheck.onclick=function(){
        常用的一些引用命令不要搞混
        //打印标签对应语句          console.log(allCheck);
        //标签都有属性              console.dir(allCheck);
        //打印标签属性的值，         console.log(allCheck.type);
        //打印标签属性值的值，       console.log(allCheck.checked);
        //标签的value属性对应值      console.log(allCheck.value);
        /*value的属性代表checkbox提交给表单的值    
        value如果没有设置，则默认value的值是“on”。如果设置，自然value就是设置的值。
        value的值和表单是否选中无关。 无论表单是否选中，checkbox的值都是一样的。
        ※这个点是包括我在内很多人都有误解。*/
            var state=this.checked;
            for(var i=0;i<checks.length;i++){
                checks[i].checked=state;
            }
        }
        //循环为每一个表体复选框绑定点击事件
        for(i=0;i<checks.length;i++){
            checks[i].onclick=function(){
                //循环表体中的复选框，判断checked状态
                for(var j=0;j<checks.length;j++){
                    if(checks[j].checked==false){
                        allCheck.checked=false;
                        break;
                    }else{
                        allCheck.checked=true;
                    }
                }
            }
        }
    </script>
</body>

<body>
    <div id="main">
        <div id="f">名侦探柯南</div>
        <div id="s">海贼王</div>
        <div id="t">火影忍者</div>
    </div>

    <script>
        // 创建一个新的div标签对象
        var divDom = document.createElement('div');
        console.log(divDom);
        divDom.innerHTML = '新的div';
        divDom.style.color = 'orange';

        // 将新增div添加到柯南前
        var main = document.querySelector('#main');
        // var f = document.querySelector('#f');
        // main.insertBefore(divDom, f);

        // 将新增div追加到main中
        main.appendChild(divDom);

    </script>
</body>

以上就是添加节点麻烦的情况，下面是快速添加节点的方法。

<body>
    <ul>
        <li id="f">
            <b>第一章</b>
            <a href="#">秦王天宫</a>
        </li>
    </ul>
    <script>
        var str = '<li><b>第二章</b> <a href="#">南海神庙</a></li>';
        // document.querySelector('ul').insertAdjacentHTML('beforeend', str);
        document.querySelector('#f').insertAdjacentHTML('afterend', str);
    </script>
</body>

<body>
    <ul>
        <li>苹果</li>
        <li id="sec">香蕉</li>
        <li>西瓜</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var sec = document.querySelector('#sec');
        ul.removeChild(sec);
    </script>
</body>

    <script>
        var userList = [
            {id: 1, name: '张三丰', gender: '男', age: 108},
            {id: 2, name: '张无忌', gender: '男', age: 22},
            {id: 3, name: '赵敏', gender: '女', age: 18},
            {id: 4, name: '周芷若', gender: '女', age: 18},
            {id: 5, name: '杨逍', gender: '男', age: 58},   
        ]
        var str = '';
        for (var i = 0; i < userList.length; i++) {
            str += "<tr><td>" + userList[i].id + "</td><td>" + userList[i].name + "</td><td>" + userList[i].gender + "</td><td>" + userList[i].age + "</td><td><button class='del'>删除</button></td></tr>";
        }
        var tbody = document.querySelector('tbody');
        tbody.innerHTML = str;

        // 给所有删除按钮上绑定点击事件
        var btns = document.querySelectorAll('.del')
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                // 找到删除删除按钮对应的 tr 标签，parentNode上寻找上一个节点
                var delTr = this.parentNode.parentNode;
                tbody.removeChild(delTr);
            }
        }
    </script>

<body>
    <div class="box">
        <ul class="clearfix">
            <li class="active">足球</li>
            <li >篮球</li>
            <li>乒乓球</li>
        </ul>
        <div class="content">
            <div class="current">足球消息列表</div>
            <div>篮球消息列表</div>
            <div>乒乓球消息列表</div>
        </div>
    </div>
    <script>
        var divs=document.querySelectorAll('.content>div');
        var lis=document.querySelectorAll('li');
        lis.forEach(function(item,index){
           item.onmouseenter=function(){
            lis.forEach(function(val,i){
                val.className=null;
            })
            this.className='active';
            divs.forEach(function(val,i){
                val.className=null;
            })
            divs[index].className='current';
           }
        })
    </script>
</body>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            console.log(document.querySelector('div'));
            document.querySelector('div').style.color = 'red';
        }
        
    </script>
</head>
<body>
    <div>onload 测试</div>
</body>

    <script>
        // 核心思想: 在onresize事件中不断监听 innerWidth 的值
        // 当 innerWidth小于某一值时隐藏 tmp 
        // 当 innerWidth大于某一值时显示 tmp
        var boxDom = document.querySelector('.box');
        var tmpDom = document.querySelector('.tmp');
        window.onresize = function () {
            if(window.innerWidth < 900) {
                tmpDom.style.display = 'none';
                boxDom.style.width = '640px';
            }  else {
                tmpDom.style.display = 'block';
                boxDom.style.width = '800px';
            }
        }
    </script>