JavaScriptWeb API (DOM和BOM操作)

06-01 1229阅读

Web API (基础部分)

作用: 使用 JS 去操作 html 和浏览器
分类: DOM 和 BOM
- DOM: 操作 HTML 文档的 API
- BOM: 操作浏览器的 API
  DOM(文档对象模型)
  - 是用来呈现以及与任意 HTML 或 XML 文档进行交互的 API
  - 作用: 开发网页内容特效和实现用户交互
    - 动态创建 HTML 元素
    - 改变 HTML 元素的样式
    - 读取或修改 HTML 元素的内容
    - 响应用户事件
      DOM 树
      - 将 HTML 文档转换为树形结构的对象模型, 体现了标签与标签之间的关系
        DOM 对象
        
        浏览器根据 html 标签生成的 JS 对象
        
        所有的标签属性和方法都可以通过 DOM 对象访问
        
        修改这个对象可以映射到 HTML 标签的变化
        
        核心思想: 把标签当做对象处理
        
        DOM 基本操作
        
        获取元素(通过 css 选择器)
        
        document.querySelector("css选择器"); // 获取匹配的第一个元素, 返回值为DOM(HTMLElement)对象 // 可以直接操作修改 document.querySelectorAll("css选择器"); // 获取所有匹配的元素, 返回值为NodeList对象集合 // 得到的是一个伪数组, 可以索引访问但没有数组的方法 // 可以遍历修改
        
        操作元素内容
        
        对象.innerHTML = "新的内容"; // 直接修改元素的内容 // 显示HTML代码, 解析标签对象.innerText = "新的内容"; // 只能修改元素内的文本内容 // 显示纯文本, 不解析标签
        
        操作元素常用属性
        
        常用属性: 如 href, title, src, alt 等
        const img = document.querySelector("img"); img.src = "图片地址"; // 修改图片地址
        
        操作元素样式属性
        
        通过 style 属性操作元素的样式
        对象.style.属性名 = "属性值"; const div = document.querySelector("div"); div.style.width = "500px"; div.style.height = "500px"; div.style.backgroundColor = "red"; //当属性名为多个单词时, 需使用小驼峰命名法
        
        给元素添加类名
        
        元素.className = "类名"; // 设置类名, 多个类名用空格分隔 // 新值换旧值, 会覆盖之前的类名元素.classList.add("类名"); // 添加类名, 不存在则添加, 存在则忽略元素.classList.remove("类名"); // 删除类名, 不存在则忽略元素.classList.toggle("类名"); // 切换类名, 不存在则添加, 存在则删除元素.classList.contains("类名"); // 判断是否存在某个类名, 返回布尔值
        
        // 排他思想: 只有一个元素可以有某个类名 const old = document.querySelector(".seclected"); if (old) { old.classList.remove("selected"); }
        
        操作表单元素属性
        
        const input = document.querySelector("input"); console.log(input.value); // 获取输入框的值 input.value = "新值"; // 设置输入框的值 input.type = "text"; // 设置输入框类型 input.checked = true; // 设置单选框或复选框是否选中 input.disabled = true; // 设置输入框是否禁用 input.reset(); // 重置表单
        
        操作自定义属性
        
        可以给元素添加自定义属性, 方便操作
        
        const div = document.querySelector("#myDiv"); console.log(div.dataset.myAttr); div.dataset.myAttr = "新值"; // 设置自定义属性的值 delete div.dataset.myAttr; // 删除自定义属性
        
        定时器(间歇函数)
        
        setInterval(function () {}, 时间间隔); // 重复执行函数, 每隔指定时间间隔执行一次, 时间单位为毫秒 // 如果是有名函数, 直接写函数名, 不加小括号 // 定时器会返回一个定时器对象(id数字), 可以使用 clearInterval() 停止定时器 clearInterval(定时器对象); // 停止定时器
        
        事件监听
        
        用户操作, 如鼠标点击, 键盘按下等称为事件
        
        监听事件发生, 执行相应的函数
        
        事件监听三要素
        
        事件类型: 如 click, mouseover, keydown 等
        事件源: 触发事件的元素
        事件处理函数: 响应事件的函数
        
        常用事件类型:
        
        click: 鼠标点击
        mouseenter: 鼠标进入
        mouseleave: 鼠标离开
        mouseover: 鼠标移入(会冒泡)
        mouseout: 鼠标移出(会冒泡)
        focus: 表单获得焦点
        blur: 表单失去焦点
        change: 表单元素值改变
        input: 输入框值改变
        keydown: 键盘按下
        keyup: 键盘松开
        load: 页面加载完成
        scroll: 滚动条滚动
        resize: 窗口大小改变
        submit: from表单提交
        对象.addEventListener("事件类型", 函数); // 给对象添加事件监听, 当事件类型发生时, 执行函数 // eg: const btn = document.querySelector("button"); btn.addEventListener("submit", function () { console.log("按钮被点击了"); });
        
        事件对象
        
        是个对象, 包含事件触发时的所有信息
        
        如何获取事件对象:
        
        作为函数参数传入: 函数(event) {}
        
        元素.addEventListener("事件类型", function (event) {}); // event 就是事件对象
        
        常用属性:
        
        type: 获取当前的事件类型
        
        clientX/Y: 获取鼠标在页面(根据可视窗口左上角)的坐标
        
        offsetX/Y: 获取鼠标相对于事件源(根据当前 dom 元素左上角)的坐标
        
        key: 获取按下的键盘的键值
        
        trim 方法
        
        去除字符串前后空格
        const str = " hello world "; const newStr = str.trim(); console.log(newStr); // "hello world"
        
        环境对象
        
        定义: 指的是函数内部特殊的变量 this, 它代表着当前函数运行时所处的环境, 在普通函数中, this 指向全局对象 window
        
        函数的调用方式不同, this 的指向(对象)也不同, 一般来说, 谁调用的函数, this 就指向谁
        
        const btn = document.querySelector("button"); btn.addEventListener("submit", function () { console.log(this); // 输出: ... this.style.backgroundColor = "red"; // 改变按钮的背景色 });
        
        webAPI (DOM 进阶操作)
        
        事件流
        
        定义: 指的是事件完整执行过程中的流动路径
        
        捕获阶段: 事件从最外层的窗口对象开始，逐层向内传播到目标元素，并触发相应的事件处理程序。
        
        冒泡阶段: 事件从目标元素开始，逐层向外传播到最外层的窗口对象，并触发相应的事件处理程序。
        
        事件捕获
        
        document.addEventListener('click', function(event) { console.log('文档'); }, true) // 第三个参数为true表示使用事件捕获, false表示使用事件冒泡, 默认为false father.addEventListener('click', function(event) { console.log('父亲'); }, true) son.addEventListener('click', function(event) { console.log('儿子'); }, true) - 点击 son 元素，输出顺序为：文档、父亲、儿子。 - 点击 father 元素，输出顺序为：文档、父亲。 - 点击 document 元素，输出顺序为：文档。
        
        事件冒泡
        
        document.addEventListener('click', function(event) { console.log('文档'); }) father.addEventListener('click', function(event) { console.log('父亲'); }) son.addEventListener('click', function(event) { console.log('儿子'); }) - 点击 son 元素，输出顺序为：儿子、父亲、文档。 - 点击 father 元素，输出顺序为：父亲、文档。 - 点击 document 元素，输出顺序为：文档。
        
        阻止冒泡: event.stopPropagation()
        事件解绑
        
        DOM.romoveEventListener("click", 函数名);
        
        阻止元素默认行为
        
        const form = duocument.querySelector("form"); form.addEventListener("submit", function (event) { event.preventDefault(); // 阻止默认提交行为 });
        
        事件委托
        
        定义: 将事件监听器添加到父元素上，当子元素触发事件时，元素通过事件冒泡机制将事件传递给父元素的事件监听器，从而实现事件的委托。
        
        优点: 减少内存占用，提高性能。
        
        原理: 利用事件冒泡，父元素的事件监听器可以监听到子元素的事件，从而实现事件的委托。
        
        // 父元素 const ul = document.querySelector("ul"); ul.addEventListener("click", function (event) { // 子元素 if (event.target.tagName === "LI") { // 判断点击的是不是子元素 event.target.style.color = "blue"; //使用target属性获取触发事件的元素 const id = event.target.dataset.id; // 使用dataset属性获取自定义属性值 } });
        
        更多事件类型
        
        页面加载事件: load / domcontentloaded
        
        load: 页面加载完成时触发。
        
        它不仅可以监听页面的加载完成，还可以监听页面的资源加载情况，比如图片、样式表、脚本等。
        
        // 等待页面所有资源加载完毕, 就执行回调函数 window.addEventListener("load", function () {});
        
        domcontentloaded: 页面 DOM 结构加载完成时触发。
        
        它与 load 事件不同，它只会在 DOM 结构加载完成时触发，不会等待资源的加载。
        
        // 等待DOM结构加载完成, 就执行回调函数 document.addEventListener("DOMContentLoaded", function () {});
        
        元素滚动事件
        
        可以个页面添加, 也可以给元素添加。
        window.addEventListener("scroll", function (event) { consol.log("页面滚动了"); });
        
        获取位置
        
        scrollTop: 获取或设置当前页面的垂直滚动条的位置。(被卷去的部分)
        
        scrollLeft: 获取或设置当前页面的水平滚动条的位置。
        
        它们的值可读写, 类型为数字型
        /*页面平滑滚动*/ html { scroll-behavior: smooth; }
        
        const div = document.querySelector("div"); window.addEventListener("scroll", function (event) { const n = document.documentElement.scrollTop; if (n > 100) { div.style.display = "block"; } });
        
        页面尺寸事件
        
        window.addEventListener("resize", function (event) { console.log("页面尺寸变化了"); });
        
        获取尺寸
        const div = document.querySelector("div"); console.log(div.clientWidth); // 盒子宽度 console.log(div.clientHeight); // 盒子高度
        
        元素尺寸与位置
        
        offsetwidth: 元素的宽度，包括内容宽度和内边距。(包括边框和间距)
        
        offsetheight: 元素的高度，包括内容高度和内边距。
        
        offsetTop: 元素相对于其定位父元素的上边缘的距离。(只读属性)
        
        offsetLeft: 元素相对于其定位父元素的左边缘的距离。
        
        若 3 和 4 的父元素无定位, 则找定位祖先元素, 直至 body 元素为止。
        
        element.getBoundingClientRect().top/left: 获取元素的边界框信息(相对于视口), 返回一个对象。
        
        event.pageX/Y: 鼠标相对于页面的坐标。
        
        日期对象
        
        实例化
        
        const date = new Date(); // 当前日期和时间 const date1 = new Date(year, month, day, hours, minutes, seconds, milliseconds); // 指定日期和时间
        
        方法
        
        getFullYear(): 获取完整的年份。
        
        getMonth(): 获取月份(0-11)。
        
        getDate(): 获取日期(1-31)。
        
        getDay(): 获取星期几(0-6)。
        
        getHours(): 获取小时(0-23)。
        
        getMinutes(): 获取分钟(0-59)。
        
        getSeconds(): 获取秒(0-59)。
        
        getMilliseconds(): 获取毫秒(0-999)。
        
        getTime(): 获取从 1970 年 1 月 1 日午夜到当前时间的毫秒数。
        
        getTimezoneOffset(): 获取时区偏移量。
        
        setFullYear(year): 设置完整的年份。
        
        setMonth(month): 设置月份(0-11)。
        
        setDate(day): 设置日期(1-31)。
        
        setHours(hours): 设置小时(0-23)。
        
        setMinutes(minutes): 设置分钟(0-59)。
        
        setSeconds(seconds): 设置秒(0-59)。
        
        setMilliseconds(milliseconds): 设置毫秒(0-999)。
        
        setTime(milliseconds): 设置从 1970 年 1 月 1 日午夜到指定时间的毫秒数。
        
        toUTCString(): 将日期对象转换为 UTC 格式的字符串。
        
        toDateString(): 将日期对象转换为日期格式的字符串。
        
        toTimeString(): 将日期对象转换为时间格式的字符串。
        
        toLocaleString(): 将日期对象转换为本地格式的字符串。
        
        时间戳
        
        定义: 时间戳是指格林威治时间 1970 年 01 月 01 日 00 时 00 分 00 秒(北京时间 1970 年 01 月 01 日 08 时 00 分 00 秒)起至现在的总秒数。
        
        使用场景: 如果计算倒计时效果, 前面方法无法直接计算, 需要借助于时间戳完成。
        
        算法:
        
        获取当前时间戳:
        
        const timestamp = Date.now();
        
        const timestamp = +new Date();
        
        const timestamp = (new Date()).getTime();
        
        计算倒计时:
        
        const d = parseInt(总秒数 / 60 / 60 / 24); 计算天数
        
        const h = parseInt((总秒数 / 60 / 60) % 24); 计算小时数
        
        const m = parseInt((总秒数 / 60) % 60); 计算分钟数
        
        const s = parseInt(总秒数 % 60); 计算秒数
        
        节点操作
        
        DOM节点: 指的是文档对象模型(Document Object Model)中的节点, 包括元素节点、属性节点、文本节点、注释节点等。
        查找节点(根据元素之间的关系)
        
        父节点查找: 子元素.parentNode, 返回值为object, 找不到返回null
        
        子节点查找: 父元素.children , 返回值为array(仅包含子元素节点), 找不到返回空数组
        
        兄弟节点查找: 元素.previousElementSibling(前一个兄弟节点) 或元素.nextElementSibling(后一个兄弟节点), 返回值类型为object, 找不到返回null
        
        创建节点(新增元素节点)
        
        创建节点: document.createElement(标签名) , 返回值类型为object, 即新创建的元素节点
        
        插入节点(方法一): 父元素.appendChild(新元素名) , 插入到最后
        
        插入节点(方法二): 父元素.insertBefore(新元素名, 参照元素) , 插入到参照元素之前
        
        克隆节点: 元素.cloneNode(true/false) , true表示深复制, false表示浅复制, 返回值类型为object, 即新创建的元素节点
        
        删除节点
        
        删除节点: 父元素.romoveChild(子元素) , 删除该元素节点
        M端事件
        
        tauchstart: 手指触摸屏幕时触发
        
        touchmove: 手指在屏幕上滑动时触发
        
        touchend: 手指从屏幕上松开时触发
        
        JS插件(swiper)
        
        官网: https://swiper.com.cn/
        
        下载: https://swiper.com.cn/download
        
        引入: 下载压缩包, 解压, 找到 package文件夹, 引入 js文件和 css文件即可。
        
        webAPI (BOM 操作)
        
        JS 执行机制
        
        javascript 是单线程的, 也就是说, 只能同时执行一个任务。
        
        为了解决这个问题, 利用多核 CPU 的计算能力, HTML5 提出 Web Worker API, 允许 JavaScript 脚本创建多个线程, 并将任务分配给这些线程。
        
        于是, JS 出现了同步和异步的概念。同步任务是指在执行过程中, 必须等待前一个任务执行完毕, 才能继续执行; 异步任务是指在执行过程中, 不必等待前一个任务, 而是可以同时执行多个任务。
        
        同步任务: 都在主线程上执行, 形成一个执行栈。
        
        异步任务: 都在主线程之外, 形成一个事件队列。
        
        事件循环: 主线程不断从事件队列中取出事件, 执行事件。(优先级: 同步任务 > 异步任务)
        
        window 对象
        
        定义: window 对象是 JavaScript 中最顶层的对象, 它代表了浏览器窗口, 也是所有全局变量和函数的宿主。
        
        BOM 对象: 浏览器对象模型(Browser Object Model)
        
        定时器 - 延时函数
        
        settimeout()方法: 设定一个定时器, 在指定的时间间隔后执行一次函数。
        
        setTimeout(function(){}，delay); - 参数: function() - 要执行的函数名或函数体。 - 参数: delay - 延迟时间，单位为毫秒。 // 清除延时函数 clearTimeout(timeoutID); - 参数: timeoutID - 要清除的延时函数的ID。
        
        location 对象
        
        定义: location 对象代表当前页面的 URL 信息。
        // 获取当前页面的URL var url = location.href; // 获取当前页面的域名 var domain = location.hostname; // 获取当前页面的协议 var protocol = location.protocol; // 获取URL中的查询字符串 location.search; // 获取URL中的hash值 location.hash; // 重定向到新的页面 location.href = "http://www.example.com"; // (强制)刷新当前页面 location.reload(true);
        
        navigator 对象
        
        定义: navigator 对象代表浏览器的信息。
        
        通过 userAgent 属性可以获取浏览器的类型和版本信息。
        
        // 获取浏览器类型 var browser = navigator.appName; // 获取浏览器版本 var version = navigator.appVersion; // 获取操作系统类型 var os = navigator.platform; // 获取用户代理信息 var userAgent = navigator.userAgent; // 判断是否为移动设备 // 检测 userAgent（浏览器信息） !(function () { const userAgent = navigator.userAgent; // 验证是否为Android或iPhone const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/); const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/); // 如果是Android或iPhone，则跳转至移动站点 if (android || iphone) { location.href = "http://m.itcast.cn"; } })();
        
        history 对象
        
        定义: history 对象代表浏览器的历史记录。
        
        属性和方法
        
        back(); // 后退 forward(); // 前进 go(num); // 前进或后退到指定页面 back.addEventListener("click", function () { history.back(); // 或者 // history.go(-1); }); forward.addEventListener("click", function () { history.forward(); // 或者 // history.go(1); });
        
        本地存储(localStorage)
        
        定义: 本地存储是指在浏览器端存储数据, 使得数据在浏览器关闭后依然存在。
        
        常用方法
        
        // 存储数据 localStorage.setItem("key", "value"); //本地存储只能存储字符串 // 获取数据 var value = localStorage.getItem("key"); // 删除数据 localStorage.removeItem("key");
        
        sessionStorag: 与 localStorage 类似, 但数据在浏览器关闭后就丢失。
        
        cookie: 存储在用户本地的小型文本文件, 用于存储少量数据, 并在每次请求时发送给服务器。
        
        IndexedDB: 是一个高性能的本地数据库, 它使得客户端存储大量结构化数据变得十分简单。
        
        存储复杂数据类型
        
        JSON.stringify()方法: 将对象转换为 JSON 字符串。
        
        JSON.parse()方法: 将 JSON 字符串转换为对象。
        
        // 存储对象 let obj = { name: "John", age: 30, city: "New York" }; let jsonStr = JSON.stringify(obj); localStorage.setItem("user", jsonStr); // 获取对象 let jsonStr = localStorage.getItem("user"); let obj = JSON.parse(jsonStr);
        
        正则表达式
        
        定义: 正则表达式(regular expression)是一种文本模式, 它能帮助你方便的检查、匹配、替换文本。
        
        语法:
        
        let str = "this is a test string, pattern, flags"; // 定义规则 const pattern = /pattern/; // 匹配规则 pattern.test(str); // true pattern.exec(str); // ["pattern", index: 10, input: "this is a test string, pattern, flags"]
        
        元字符
        
        定义: 元字符(metacharacter)是指用来匹配、搜索、替换文本的特殊字符。
        
        常用元字符
        
        [a - zA - Z]; // 匹配所有小写字母和大写字母
        
        分类
        
        字符类: [abc] 匹配 a 或 b 或 c
        字符类范围: [a-z] 匹配所有小写字母(有一个就为 true)
        字符类否定: [^abc] 匹配除了 a、b、c 以外的字符
        字符类组合: [a-zA-Z0-9] 匹配所有字母和数字
        字符类转义: \d 匹配数字, \D 匹配非数字
        字符类预定义: \w 匹配字母、数字、下划线, \W 匹配非字母、数字、下划线
        字符类转义: \s 匹配空白字符(包括空格、制表符、换行符), \S 匹配非空白字符
        字符类边界: \b 匹配单词边界
        字符类回溯: \B 匹配非单词边界
        字符类数量词: {n} 匹配 n 次, {n,} 匹配 n 或更多次, {n,m} 匹配 n 到 m 次
        字符类贪婪与懒惰: * 匹配 0 或多个字符, + 匹配 1 或多个字符,? 匹配 0 或 1 个字符
        字符类锚点(边界符): ^ 匹配字符串开始(匹配以正则开头的字符), $ 匹配字符串结束(匹配以正则结尾的字符)
        字符类子表达式: ( ) 匹配子表达式的内容
        字符类反向引用: \1 引用第 1 个子表达式的内容
        字符类. : 匹配除换行符以外的任意字符
        /^哈+$/.test("哈哈哈哈哈哈"); // true /^哈+$/.test("哈哈"); // true /^哈+$/.test("二哈"); // false
        
        修饰符
        
        定义: 修饰符(modifier)是指在正则表达式中用于控制匹配方式的符号。
        
        常用修饰符
        
        // 全局匹配 /pattern/g; // 忽略大小写 /pattern/i;
        
        替换
        
        let str = "this is a test string, pattern, Pattern, flags"; let newStr = str.replace(/pattern/gi, "replacement"); // "this is a test string, replacement, replacement, flags"

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Web API (基础部分)

DOM(文档对象模型)

DOM 树

DOM 对象

DOM 基本操作

获取元素(通过 css 选择器)

操作元素内容

操作元素常用属性

操作元素样式属性

给元素添加类名

操作表单元素属性

操作自定义属性

定时器(间歇函数)

事件监听

事件对象

trim 方法

环境对象

webAPI (DOM 进阶操作)

事件流

事件捕获

事件冒泡

事件解绑

阻止元素默认行为

事件委托

更多事件类型

页面加载事件: load / domcontentloaded

元素滚动事件

页面尺寸事件

元素尺寸与位置

日期对象

实例化

方法

时间戳

节点操作

查找节点(根据元素之间的关系)

创建节点(新增元素节点)

删除节点

M端事件

JS插件(swiper)

webAPI (BOM 操作)

JS 执行机制

window 对象

定时器 - 延时函数

location 对象

navigator 对象

history 对象

本地存储(localStorage)

存储复杂数据类型

正则表达式

元字符

修饰符

替换

相关阅读

目录[+]