「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 HTML DOM是一个具有层次化特点的节点树，我们可以通过DOM对页面元素进行增删改查

首先我们绘制一个简单的输入用户名和密码的登录框，分别给这两个输入框设置一些绑定属性（class、id、name）

<div id="login">
        <input type="text" class="from" name="from" id="username" onchange="usernameChange()" placeholder="请输入用户名"> 
        <!--onchange当值被改变的时候执行 ,placeholder提示用户该输入什么 -->
        <input type="password" class="from"  name="from" placeholder="请输入密码">   
        <!-- 点击事件 -->  
        <button onclick="login()">登录</button>    
</div>

改变一下的登录框的样式, 将登录框设置透明度为0.1, 在页面渲染的时候通过transition动画改变透明度，实现一个从左到右延申展示的效果

        #login{
            width: 200px;
            opacity: 0.1;     
            transition: all 1.5s; /* 延长改变时间 */
        }
        input[type="text"] , input[type="password"] , 
        button{ 
            width: 100%;
            height: 100%;
            margin: 10px;
            padding: 10px;
        }
        button{
            box-sizing: content-box ; /* 使登录框的大小与text相同 */
        }

在body上绑定一个 onload 事件（页面载入 onload事件页面渲染到浏览器上面）<body onload="intoPage()">

getElementById

（返回带有指定 ID 的元素）

通过 getElementById 获取到id为login的元素（登录框），将它的样式进行改变

 function intoPage(){
    document.getElementById("login").style = "width:300px ; opacity:1;"
 }

通过getElementById获取到username的值

function usernameChange(){
    let username = document.getElementById("username").value;
    console.log(username);
}

getElementsByClassName 和 getElementsByName

（返回包含带有指定类名class / name的所有元素的节点列表）

分别通过 getElementsByClassName 和 getElementsByName 获取两个输入框的元素消息，其实两个差别不大

//获得class=“from”的数组（ 这里是username和password）
let login1 = document.getElementsByClassName("from") ; 
// 获得name=“from”的数组
let login2 = document.getElementsByName("from") ;     
console.log( login1 );  //HTMLCollection(2)
console.log( login2 );  //NodeList(2)
// 可以直接得到数组的值如 login[0].value (得到数组的第一个值)

getElementsByTagName

(返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）)。

let input = document.getElementsByTagName("input") ; //input下面的标签集合HTMLCollection(2)

当有单选框时，可以通过判断checked 是否被选中

querySelector

(返回文档中匹配指定 CSS 选择器的一个元素)

let from = document.querySelector(".from") ;  // 满足这条件的第一个元素

这里满足条件的两个输入框第一个是 username 输入框

Js 通过DOM改变登录框的样式以及获取登录框内容

getElementById

getElementsByClassName 和 getElementsByName

getElementsByTagName

querySelector