JavaScript入门基础

明日月初

已于 2024-04-17 20:22:49 修改

阅读量1.6k

点赞数 31

于 2024-04-17 19:44:33 首次发布

本文链接：https://blog.csdn.net/qweasl_/article/details/137883639

版权

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

那么何为JavaScript？

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

<!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，甚至标签（不推荐）

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

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

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


 let ipt = document.querySelectorAll('input')

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

<!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>

获取父节点

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

添加子节点

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

删除子节点

 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，还需要了解数组的方法，对象的方法，字符串的方法等等，路还有很长，一起加油吧！