获取子元素兄弟元素父元素、表单验证、添加节点、删除节点

最新推荐文章于 2022-06-11 22:44:36 发布

我是小王同学

最新推荐文章于 2022-06-11 22:44:36 发布

阅读量289

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46270297/article/details/105349897

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、获取子元素

// 1、所有子元素
// children:获取所有的子元素（用途很广泛）=> 这是一个属性，不是方法，前面跟父元素打点调用可获取父元素下面所有的子元素
// 2、获取第一个子元素
// firstElementChild => 这是一个属性，不是方法，前面跟父元素打点调用可获取父元素里面的第一个元素
// 3、获取最后一个子元素
// lastElementChild => 这是一个属性，不是方法，前面跟父元素打点调用可获取父元素里面的最后一个元素

2、兄弟元素、父元素

// 1、获取上一个兄弟元素
// previousElementSibling => 这是一个属性，不是方法，前面跟兄弟元素打点调用可获取
// 1、获取下一个兄弟元素
// nextElementSibling => 这是一个属性，不是方法，前面跟兄弟元素打点调用可获取
// 3、父元素
// parentNode => 这是一个属性，不是方法，前面跟子元素打点调用可获取子元素的父元素

3、表单验证

// 事件名
// 1、 keydown => 键盘摁下
// 2、 keyup => 键盘弹起
// 校验：校验内容的长度
// keydown 事件中来获取input的内容，获取的是上一次的内容（不完整）
// keyup 事件中来获取input的内容，获取的是完整内容

// 在案例中，需要在哪个事件中来做校验 ==> 获取完成内容做校验，使用keyup事件
<body>
    用户名：<input type="text" id="txtName"><span></span><br>
    密码：<input type="password" id="txtPwd"><span></span><br>
    <script>
        // 1、 找对象
        var txtName = document.querySelector('#txtName');
        var txtPwd = document.querySelector('#txtPwd');
        // 给用户名注册事件
        txtName.onkeyup = function() {
            var txt = this.value; // 打印的值给一个变量
            var span = this.nextElementSibling; // 优化  提示的内容
            // 判断
            if (txt.length < 2 || txt.length > 6) {
                span.innerText = '请输入2-6的用户名';
                span.style.color = 'red';
            } else {
                span.innerText = '正确';
                span.style.color = 'green';
            }
        }
    </script>
</body>

4、添加节点

// 1、appendChild
//语法：parent.appendChild(child)
// parent: 调用者，父节点来调用
// child:需要添加的那个孩子。
// 作用：把child添加到parent的孩子的最后面。
// 如果添加的是页面中本来就存在的元素，是一个剪切的效果，原来的就不在了。

// 2、insertBefore
// 语法：parent.insertBefore(child, refChild);
// parent:必须要父节点来调用
// child：需要添加的那个节点
// refChild:添加到哪一个节点的前面。

5、删除节点

// 语法：parent.removeChild(child);
// 功能：由父盒子调用，删除里面的一个子元素。

我是小王同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取子元素兄弟元素父元素、表单验证、添加节点、删除节点

1、获取子元素// 1、所有子元素// children:获取所有的子元素（用途很广泛）=> 这是一个属性，不是方法，前面跟父元素打点调用可获取父元素下面所有的子元素// 2、获取第一个子元素// firstElementChild => 这是一个属性，不是方法，前面跟父元素打点调用可获取父元素里面的第一个元素// 3、获取最后一个子元素// lastElementChil...
复制链接

扫一扫