【小白学前端】JS第六天DOM_js dom检测密码6-16位-CSDN博客

本文链接：https://blog.csdn.net/qq_43146801/article/details/126556471

导入

JS基础和WEB_APIS关联性

JS基础阶段

JS基础阶段学习的是ECMAScript标准规定的基本语法
JS基础阶段无法实现网页交互式效果，所以用Web APIS实现

Web APIS阶段（应用）

是W3C的组织标准
. 主要学习DOM和BOM
大量使用JS基础语法做交互效果

操作元素总结

操作元素是DOM的核心内容。

操作元素内容
操作常见元素属性
操作表单元素属性
操作元素样式属性

1、操作元素内容

innerText（非标准）；
innerText改变里面的文字内容,不识别HTML标签，里面的标签会直接进行显示
案例：

<div></div>
<p>
		我是文字
   	<span>123</span>
</p>
<script>
var div = document.querySelector('div')
div.innerText = '<strong>今天是2019</strong>'
</script>

效果：
< strong>今天是2019< /strong>
2. innerHTML（标准，常用）；
案例：

   //innerHTML识别html标签，W3C标准
       div.innerHTML = '<strong>今天是2019</strong>'

效果:
今天是2019
注意：两个属性可读可写，不仅可以写，也可以获取元素内容
案例：

	   var p = document.querySelector('p')
       console.log(p.innerText);
       // 不识别标签，并且去除空格和换行
       console.log(p.innerHTML);
       // innerHTML保留文字、空格和换行

小结
innerText只保留文字本身，读不懂HTML标签，会直接将标签进行显示，读取时因为读不懂会自动去除标签、空格和换行；
innerHTML读得懂HTML标签，按照HTML格式对文本进行显示，在读取的时候不仅保留文字，也保留标签、空格和换行。

2、操作常见元素属性

eg：
src、href、title、alt等

事件基础

页面中某些元素只有相应的操作出发了才会显示，比如鼠标经过、点击、键盘按钮等。

1、事件：JS检测到的行为，触发响应的机制
2、执行事件的步骤
（1）获取事件源

    <div id="time">2022-9-9</div>
    <ul>
        <li>知否知否1</li>
        <li>知否知否2</li>
        <li>知否知否3</li>
        <li>知否知否4</li>
        <li>知否知否5</li>
    </ul>
    <ol id="single">
        <li>22</li>
        <li>22</li>
        <li>22</li>
        <li>22</li>
        <li>22</li>
    </ol>
    <script>
        //1、因为文档页面从上往下加载，所以先得有标签，将script写到标签下面
        //2、get获得element元素by通过驼峰命名法
        //3、参数，id是大小写敏感的字符串，必须加''
        var timer = document.getElementById('time');
        console.log(timer); //提取出标签对应的元素
        console.log(typeof timer); //返回的是一个元素对象
        console.dir(timer); //打印返回对象的属性和方法
        var tag = document.getElementsByTagName('li')
        console.log(tag);
        console.log(tag[1]);
        //1、返回值以数组形式进行存储
        //2、依次打印里面的元素对象
        for (var i = 0; i < tag.length; i++) {
            console.log(tag[i]);
        }
        //3、只有一个元素也还是以伪数组的形式存储元素，
        //4、如果页面中没有这个元素，则返回的是一个空的伪数组
        //5、父元素必须是单个对象，eg：获取ul中的li
        var ols = document.getElementsByTagName('ol');
        //这里返回的是一个数组的形式，不能作为父元素，父元素必须是单个元素对象
        //所以要用ols[0]取其中的一个
        console.log(ols);
        var ol_li = ols[0].getElementsByTagName('li');
        console.log(ol_li);
        //第二种方法，用id获取单个父元素
        var ol = document.getElementById('single')
        console.log(ol.getElementsByTagName('li'));
    </script>

获取特殊元素

 <script>
        //1、获取body元素
        var bodyele = document.body;
        console.log(bodyele);

        //2、获取html元素
        var htmlele = document.documentElement;
        console.log(htmlele);
    </script>

H5新增获取元素方式

 //1、根据类名选择
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //2、根据指定选择器返回第一个元素对象

        //3、记得加上符号
        var firstbox = document.querySelector('.box');
        console.log(firstbox);
        var firstid = document.querySelector('#nav')
        console.log(firstid);
        var li = document.querySelector('li');
        console.log(li);
        //4、根据选择器返回所有元素对象
        var allbox = document.querySelectorAll('.box')
        console.log(allbox);
        var lis = document.querySelectorAll('li');
        console.log(lis);

（2）注册事件（绑定事件）

    <script>
        //1、获取元素
        var ldh = document.querySelector('button')
        var zxy = document.getElementById('zxy')
        var img = document.querySelector('img')
            // 2、注册事件
        zxy.onclick = function() {
            img.src = 'image/zxy.jpg'
            img.title = "张学友"
        }
        ldh.onclick = function() {
            img.src = 'image/ldh.jpg'
            img.title = "刘德华"
        }
    </script>

（3）添加事件处理程序（采取函数赋值的形式）
eg:分析事件三要素
（1）下拉菜单

获取事件源title
注册事件，鼠标经过
添加事件处理程序，显示隐藏的下拉菜单

（2）关闭广告元素

获取事件源 ×
注册事件鼠标点击 onclick
添加事件处理程序隐藏显示的广告内容

    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div控制台输出我被选中了
        // 1、获取事件源
        var div = document.querySelector('div')
        // 获得满足条件的第一个元素
        console.log(typeof div);
        // 2、绑定事件 注册事件
        // div.onclick
        // 3、添加事件处理程序
        div.onclick = function() {
            console.log("我被选中了");
        }
    </script>

3、操作元素
JS的DOM操作可以改变网页内容、结构、样式，可以利用DOM操作元素来改变元素里面的内容、属性等。

3、操作表单元素属性

利用DOM可以操作如下表单元素的属性：
type\value\checked\selected\disabled

	<button>按钮</button>
    <input type="text">
    <!-- 改变表单的文字内容，即value属性 -->
    <!-- disabled被禁用了 -->
   // 1、获取元素
        var btn = document.querySelector('button')
        var input = document.querySelector('input')
            // 2、注册事件 处理程序
        btn.onclick = function() {
            // 表单里的值通过value来改变
            input.value = "点击了"
                // 如果想要某个表单被禁用，不能再被点击用disabled
                // btn.disabled = true
                // 同样可以达到上面的禁用效果， 
                // this指的是事件函数的调用者，btn是调用者
            this.disabled = true
        }

4、操作元素样式属性

element.style(适用于改变样式较少的情况)
element.className='origin change’直接进行类名样式的赋值，可以返回最原始的状态。
直接进行类名赋值会覆盖掉原来类名的样式属性，要保留原来类名的样式属性可以在后面增加类名。
案例：

  <!-- 要求：当鼠标点击文本框时，里面的默认文字隐藏；当鼠标离开文本框时，里面的文字显示。 -->
    <!-- 分析：（1）首先表单需要两个事件，获得焦点和失去焦点 -->
    <!-- （2）如果获得焦点，判断里面的文字是否为默认文字，是的话，就清空表单内容 -->

    <!-- 问题：如果用户的输入和默认文字一样是否也会清空？直接去掉value？ -->
    <!-- 答：输入文字和默认文字一样会被清空; -->
    <!-- 可以直接使用placeholder吗？区别是什么？ -->
    <!-- 答：使用placeholder就不需要if判断，只要输入内容后即使失去焦点也不会被清空，但是placeholder的值不能作为搜索内容上传服务器； -->
    <!-- 并且placeholder是在输入框输入文字之后才消失的，value则是鼠标点击就消失了 -->
    <!-- 对比：value在鼠标点击前后触发事件；placeholder在用户输入文本和清空输入文本后触发事件； -->
    <!-- value需要两个事件，并且使用if判断里面的文本框；placeholder不需要if判断，直接执行； -->
    <!-- value的文本框可以上传服务器，placeholder不行 -->
    <input type="text" value="手机">
    <script>
        // 1、获取元素
        var text = document.querySelector('input')
            // 2、绑定事件 获得焦点事件onfocus
        text.onfocus = function() {
                // console.log('得到了焦点事件');this指向函数的调用者
                if (this.value === '手机') {
                    this.value = ''
                }
                //获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333'
            }
            // 3、注册事件 失去焦点事件 onblur
        text.onblur =

            function() {
                // console.log('失去了焦点');
                if (this.value === '') {
                    this.value = '手机'

                }
                // 失去焦点把里面的额文字变灰色
                this.style.color = '#999'
            }

className（适用于改变样式较多、较复杂的情况）
element.classList.add(‘change’)
案例：

 <!-- 总结：1、之前一直通过element.style(行内样式操作)来修改元素样式;如果样式较少或者功能简单的情况下，可以用 -->
    <!-- 2、可以通过JS修改元素的大小、颜色、位置等 -->
    <!-- element.className类名样式操作 -->
    <div class="origin">文本</div>
    <script>
        var text = document.querySelector('div')
        text.onclick = function() {
            // 点击事件触发后，给当前的div添加类名，赋予该类的样式
            // 如果原本有类名， 赋予新的类名之后会被覆盖
            // 可以在后面加上新的类名，这样就不会覆盖掉原先的样式，保留原先的类名，冲突样式后来者居上，其他的不变
            this.classList.add('change')
                // this.className += 'change'(这种写法不行)
            this.className = 'origin change'
        }
    </script>

存在问题：增加在List中的类名样式会一直存在，只增不减，无法返回最原始的状态。
案例：

<!-- 要求：用户如果离开密码框，里面输入的 个数不是6~16，则提示错误信息，否则提示输入正确信息 -->
    <!-- 分析：（1）首先判断的事件是表单失去焦点onblur -->
    <!-- （2）如果输入位数正确，则提示正确的信息颜色为绿色的小图标 -->
    <!-- （3）如果输入位数错误，则提示信息为错误并且颜色为红色的小图标 -->
    <!-- (4)因为样式变化比较多，所以用classname修改 -->
    <!-- 问题：多次输入错误->正确->错误清空之后，提示的图表和信息颜色不对，会被覆盖 -->
    <!-- 解决：不能用classList.add对类名进行添加，会导致类名变成三个同行，从而导致上述问题，直接赋值就不会 -->
    <div class="register">
        设置密码：<input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var password = document.querySelector('.ipt')
        var message = document.querySelector('.message')
        password.onblur = function() {
            //根据表单里面制度额长度
            if (password.value.length === 0) {
                message.className = 'message'
                message.innerHTML = '请输入6~16位密码'
            } else if (password.value.length < 6 || password.value.length > 16) {
                // console.log('cuo');
                // message.classList.add('wrong')
                message.className = 'message wrong'
                message.innerHTML = '输入的格式有误，请重新输入6~16位密码'
            } else if (password.value.length >= 6 && password.value.length <= 16) {
                // message.classList.add('right')
                message.className = 'message right'
                message.innerHTML = '输入的格式正确'
            }
        }
</script>