别看了没什么用

Web APIs

查找对象

document.querySelector('选择器')
//获取单个对象
document.querySelectorAll('选择器')
//获取标签为选择器的所有对象  获取为伪数组

// id：获取元素
let d1 = document.getElementById('box1')
console.log(d1)

// tagName：标签名获取多个
let ds = document.getElementsByTagName('div')
console.log(ds);

// className：类名获取元素
let ds = document.getElementsByClassName('d3');
console.log(ds);

let bd = document.querySelector('body')
console.log(bd);

// body：document.body
console.log( document.body );

// html：document.documentElement
console.log( document.documentElement );

操作元素文本

. document.write

//永远只是追加操作，且只能位置</body>前
document.write('Hello World!');
//文本中包含的标签会被解析
document.write('<h3>你好，世界！</h3>')

innerText 属性     innerHTML属性

// 将文本内容添加/更新到任意标签位置
let div = document.querySelector('div');
// 文本中包含的标签不会被解析
// innerText：获取内容也可以设置内容
// 设置：元素.innerText = 值;
div.innerText=`<h4>嗨~</h4>`;
// 最后显示为  <h4>嗨~</h4>

// innerHTML：获取内容也可以设置内容

// 获取
console.log( div.innerHTML );
// 设置
// div.innerHTML = '新的哇哈哈哈';
		
// 区别：
// innerText：只识别文本
// innerHTML：可以解析标签
// console.log( div.innerText );
// div.innerText = '<b>新的哇哈哈</b>';
		
// console.log( div.innerHTML );
// div.innerHTML = '<b>新的哇哈哈</b>';

操作元素属性

1. 直接修改元素的属性

对象.属性=值

// 1.获取img对应的DOM元素
let pic=document.querySelector('img');
// 2.修改属性
pic.src='./2.jpg';
pic.width=400;
pic.alt='图片不见了...'

通过 setAttribute 方法修改

对象.setAttribute('属性','值')

// 1.获取img对应的DOM元素
let pic=document.querySelector('img');
// 2.修改属性
pic.setAttribute('src','./2.jpg');
pic.setAttribute('width','500');
pic.setAttribute('alt','图片不见了...');

修改元素的样式

对象.style.样式属性=值     

// 1.获取DOM节点
let box = document.querySelector('div')
// 2.设置属性
//修改样式通过style属性引出
box.style.color = 'red';
//赋值的时候，需要的时候不要忘记加css单位
box.style.width = '300px';
//css属性的 - 连结符与javaScript的 减运算符 
//冲突，所以要改为驼峰法
box.style.backgroundColor = 'pink';

Node

模块化设计

module.exports = 导出的内容 导出内容
require('./文件')：导入内容 / 模块
let 名称 = require('模块名称 / 文件路径(名字写全需要带 .js)')

fs模块 - fs.readFile()  (读取某个文件)

fs.readFile ( ' 文件路径 ' , [ ' utf-8 ' ] ,(err，data)=> {
    // err: 如果读取失败(会保存错误信息), 如果不报错, err值为null
    // data: 读取出来的数据 (Buffer类型二进制数据流) 
} )  

// 目标: 读取某个文件
// 1. 内置-fs模块导入
let fs = require('fs')
// 2. 使用fs对象里readFile - 读取文件内容
fs.readFile('./student.json', ['utf-8'], (err, data) => {
    // err: 如果读取失败(会保存错误信息), 如果不报错, err值为null
    // data: 读取出来的数据 (Buffer类型二进制数据流)
    // toString()方法, 转成字符串
    console.log(data.toString());
})

fs模块 - fs.writeFile()  (写入文件)

fs.writeFile('文件路径', '写入的内容', err => {
// 写入无错误，err=null; 写入有错误，err=错误对象
} )

// 目标: 先读取, 后拼接再写入回文件
// 1. 拿到fs模块
let fs = require('fs')
// 2. 先读取
// 读取部分
fs.readFile('./student.json', ['utf-8'], (err, data) => {
    // 3. 读取Buffer转字符串, 还得把JSON字符串 -> 对象
    let jsonStr = data.toString()
    let arr = JSON.parse(jsonStr)
    // 4. 装入一个新对象
    arr.push({
        name: '123',
        age: "456",
        hobby: "789"
    })
    // 5. 数据写入到文件里- 覆盖
// 写入部分
    fs.writeFile('./student.json', JSON.stringify(arr), err => {
        // 写入无错误, err值为null
        if (err === null) {
            console.log("写入成功");
        } else {
            // 写入失败(打印错误)
            console.log(err);
        }
    })
})

fs模块 - fs.access() (文件是否存在)

fs模块 - fs.access()
fs.access ( ' 文件路径 ' , [选填] err  => {
//文件存在，err=null; 不存在err=错误对象
参数2可选
        //fs.constants.F_OK或不填，表示判断文件是否存在；
        //fs.constants.R_OK表示判断文件是否可读；
        //fs.constants.W_OK表示文件是否可写
}

// 目标: 判断文件是否存在
let fs = require('fs')
fs.access('./student.json', err => {
    if (err === null) { // 无错误, 有文件存在
        console.log('该文件存在');
    } else { // 有错误, 可能是文件不存在
        console.log('请检查路径是否存在');
    }
})

path模块 - path.extname()  (获取路径中的后缀)

path.extname( ' 文件路径 ' ) 

// 目标: path模块 -> 提取后缀名
// 1. 导入path模块(内置)
const path = require('path')
// 2. 提取路径后缀 - 主要分析路径字符串 (不用确保文件存在)
console.log(path.extname('css/index.css')); // .css
console.log(path.extname('E:/a/b/index.html')); // .html
console.log(path.extname('assets/js/login.xyz')); // .xyz
console.log(path.extname('abc/bcd/index')); // ''
console.log(path.extname('abc/def/ghi.xyz.html.ok')); // .oka

path模块 - path.join()  (拼接给出的路径)

path.join('路径1', '路径2', ……);

Node中，有一个全局变量 __dirname ，它表示当前 JS 文件所在的绝对路径

// 目标: path.join()链接路径
//  __dirname 全局变量
// 获取js文件, 所在文件夹的 "绝对路径"
console.log(__dirname); // C:\Users\lenovo\Desktop\代码\node
// 1. 导入path模块
const path = require('path')
// 2. 链接路径
// 返回值: 拼接好的路径字符串
console.log(path.join('css', 'index.css')); // css\index.css
console.log(path.join('a', 'b', 'c', 'index.html')); // a\b\c\index.html
console.log(path.join(__dirname, 'js', 'index.js'));
 // C:\Users\lenovo\Desktop\代码\node\js\index.js

path模块 - path.resolve()  (拼接给出的路径)

path.resolve('路径', '路径', ……);
得到一个绝对路径，相当于 path.resolve() == __dirname + path.join()

// 1. 导入path模块
const path = require('path')
// 2. 使用path.resolve()
// 返回值: 和join()不同, "路径1前面多加__dirname值"

// path.join()
console.log(path.join('css', 'index.css')); // css\index.css
console.log(path.join(__dirname, 'js', 'index.js')); 
// C:\Users\lenovo\Desktop\代码\node\js\index.js

// path.resolve()
console.log(path.resolve('css', 'index.css')); 
// C:\Users\lenovo\Desktop\代码\node\css\index.css
console.log(path.resolve('js', 'index.js')); 
// C:\Users\lenovo\Desktop\代码\node\js\index.js

querystring模块 - querystring.parse()  (将查询字符串转换成JS对象)

querystring.parse('id=1&name=zs&age=20');
// { id: 1, name: 'zs', age: 20 }

querystring模块 - querystring.stringify() (将JS对象 转成 查询字符串)

querystring.stringify ( { id: 1, name: 'zs', age: 2 } );
// id=1&name=zs&age=2

// 1. 导入querystring - 内置
const qs = require('querystring')
// 2. 查询字符串 -> JS对象
// 语法: qs.parse('查询字符串')
// 返回值: 对象
let obj = qs.parse('id=1&name=zs&age=20')
console.log(obj);//{ id: '1', name: 'zs', age: '20' }
console.log(obj.name);//zs

// 3. JS对象 -> 查询字符串
// 语法: qs.stringify(JS对象)
// 返回值: 查询字符串
let dataObj = {
    id: 100,
    name: '是谁',
    age: 40,
    sex: '男' // %E7%94%B7 -> url编码(不用考虑)
}
console.log(qs.stringify(dataObj)); 
// id=100&name=%E8%80%81%E5%88%98&age=40&sex=%E7%94%B

****************************************************
搭建web服务器的步骤
①：加载http模块
const http = require('http');
②：创建 server 对象
const server = http.createServer();
③：注册 request 事件
server.on('request', (req, res) => {
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
res.end('你好世界');
})
④：指定端口，启动服务
server.listen(4000, () => console.log('服务器启动了'))

// 前端 -> 请求某个资源 -> url地址(统一资源定位符)
// 协议://域名:端口号/资源路径
// 1. 导入 内置 http模块
const http = require('http')
// 2. 生成server服务对象
const server = http.createServer()
// 3. 监听前端发来的请求, 事件名固定request
server.on('request', (req, res) => {
    // req对象(前端发过来的参数)
    // req.url - 拿到的是请求时路径部分
    // 例如: http://localhost:9001/view/index.html -> req.url值 /view/index.html
    // res对象(响应对象)可以用内置方法给前端返回东西
    // res.end() 作用1: 结束本次请求和响应, 作用2: 携带数据给前端(必须字符串)
    // 告诉前端, 返回数据的编码格式(让浏览器以utf-8编辑我的响应内容)
    res.setHeader('Content-Type', 'text/plain; charset=utf-8')
    res.end('你好啊!!!')
})
// 4. 设置端口号
// 尽量用1024以上的(因为1024以内有很多被系统占用)
// 范围: 0 - 65535
// 6000和6666被谷歌浏览器占用
server.listen(9001, () => {
    console.log("启动成功, 提示控制台, 请访问 http://localhost:9001");
})
// 重要: 本机启动了一个服务(web服务窗口), 此窗口不能关闭, 如果关闭就代表服务关闭, 端口无响应