JavaScript入门基础

学完了HTML和CSS之后，你便能够做一个还不错的静态页面了，但这远远还不够，与用户交互是前端特别重要的一部分，这个就时候就必须学习JavaScript.

那么何为JavaScript？

他是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新。像一个登录注册页面，当你点击登录按钮时，将你的账号密码发送到后端进行校验，然后把校验的结果返回给你，正确别登录进去，错误则给你提示

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <input type="text" id="username" class="user">
    <input type="password" id="password" class= "passworld">
    <button>登录</button>
    <script>
        let username = document.getElementById('username')
        let password = document.getElementById('password')
        let btn = document.querySelector('button')
        btn.addEventListener('click',async()=>{
           let res = await axios.get('http://localhost:8080/login',{
                params:{
                    username:username.value,
                    password:password.value
                }
            })
            if(res.data.data){
                window.location.href = 'http://localhost:8080/index.html'
            }else{
                alert('账号或密码错误！')
            }
        })

    </script>
   
</body>
</html>

此为一个简单登陆注册页面，若账号密码正确则跳转至http://localhost:8080/index.html，否则会提示或者账号或密码错误，其中包括后面需要学的异步操作和axios，这都是后面的事了。现在仅作了解。

这篇主要讲解一下DOM和BOM

讲之前需要提一下ECMAScript，他是脚本语言规则，官方一点讲就是 它是一种由 ECMA国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言 ，它是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。

ok进入正题：

DOM：

DOM（Document Object Model ，文档对象模型 ）一种独立于语言，用于操作xml，html文档 的应用编程接口。

DOM 由节点（Node）组成，节点包括元素节点（Element Node）、文本节点（Text Node）、属性节点（Attribute Node）等。DOM 树的根节点是 document 对象，它代表整个文档。

通过 DOM，可以使用 JavaScript 在网页中进行访问各种操作，比如：

动态地创建、修改、删除 HTML 元素和属性。
获取和修改元素的内容、样式、事件等。
添加和移除事件监听器。
遍历和搜索文档树中的节点。

。在DOM树中每个元素都是一个节点，它可能是一个元素的父节点，也可能是某个元素的子节点。

1.获取元素：获取元素的方式有多种，可以通过类名，id，甚至标签（不推荐）

javascript 复制代码

//上面的例子中
//通过id获取
 let username = document.getElementById('username')
 let password = document.getElementById('password')

javascript 复制代码

//通过class获取
 let username = document.querySelector('.name')
 let password = document.querySelector('.passworld')

通过标签获取 ,这方式会将所有input标签都获取到，产生一个伪数组

javascript 复制代码

 let ipt = document.querySelectorAll('input')

获取子节点 ,b和c都能获取到a的子节点，可以去浏览器看一下他们的区别，

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>
    <script>
    
       let a= document.querySelector('.a')
       let b = a.children 
       let c = a.childNodes
      
    </script>
   
</body>
</html>

获取父节点

javascript 复制代码

 let b= document.querySelector('.b')
 let a = b.parentNode

添加子节点

javascript 复制代码

 let li = document.createElement('li')
 a.appendChild(li)

删除子节点

javascript 复制代码

 let a= document.querySelector('.a')
 a.removeChild(a.children[0])

方法有很多，可以不断实践，学会常用的就行

BOM：BOM 是 Browser Object Model，浏览器对象模型 。BOM 是为了控制浏览器的行为而出现的接口。

BOM是浏览器提供的一组对象和方法，用于操作浏览器窗口和浏览器本身的属性。BOM 并不是标准化的规范，各个浏览器实现可能有所不同。

BOM 提供了一些对象，其中一些常见的对象包括：

window对象：代表整个浏览器窗口，它是 BOM 的顶层对象，提供了许多方法和属性，如警告框（alert）、确认对话框(confirm)、操作窗口大小、打开新窗口、定时器等。
**navigator**对象：提供了有关浏览器的信息，比如浏览器的名称、版本、用户代理字符串等。
location 对象：提供了有关当前页面 URL 的信息，比如获取和设置 URL、跳转页面等。
**history**对象：用于操作浏览器的历史记录，比如前进、后退页面。

这仅仅只是一部分，要想学好js，还需要了解数组的方法，对象的方法，字符串的方法等等，路还有很长，一起加油吧！