首页IT科技js对象里面添加元素(JS对象)

js对象里面添加元素(JS对象)

时间2025-06-13 18:23:03分类IT科技浏览3710
导读:JavaScript DOMContentLoaded...

JavaScript

DOMContentLoaded

document.addEventListener("DOMContentLoaded", function() { . . . });

这是一个事件监听器             ,它监听浏览器的 "DOMContentLoaded" 事件                  ,即 HTML 文档体加载             、解释完毕事件             。事件触发时将调用 " . . ." 处的代码      ,从而避免了错误发生.

asyncdefer

浏览器遇到 async 脚本时不会阻塞页面渲染          ,而是直接下载然后运行                  。这样脚本的运行次序就无法控制                  ,只是脚本不会阻止剩余页面的显示      。当页面的脚本之间彼此独立         ,且不依赖于本页面的其它任何脚本时       ,async 是最理想的选择          。

添加 defer 属性的脚本将按照在页面中出现的顺序加载                  。

如果脚本无需等待页面解析                   ,且无依赖独立运行            ,那么应使用 async         。 如果脚本需要等待页面解析   ,且依赖于其它脚本                   ,调用这些脚本时应使用 defer               ,将关联的脚本按所需顺序置于 HTML 中       。

常用弹出框

alert() 弹出个提示框 (确定)

confirm() 弹出个确认框 (确定,取消)

prompt() 弹出个输入框 让你输入东西

js节点和事件

删除当前节点dom

panel 是消息框                ,panel.parentNode 就是指 panel 的上一级                  ,就是整个 DOM   ,然后再来用这个父亲来干掉这个儿子             ,儿子不能自己干掉自己                  ,所以要这么做                   。

closeBtn.onclick = function() { panel.parentNode.removeChild(panel); }

有时候在事件处理函数内部      ,您可能会看到一个固定指定名称的参数          ,例如event                  ,evt或简单的e            。这被称为事件对象         ,它被自动传递给事件处理函数       ,以提供额外的功能和信息   。

function bgChange(e) { const rndCol = rgb( + random(255) + , + random(255) + , + random(255) + ); e.target.style.backgroundColor = rndCol; console.log(e); }

事件对象 e 的 target 属性始终是事件刚刚发生的元素的引用                   。

可以使用任何您喜欢的名称作为事件对象 - 您只需要选择一个名称                   ,然后可以在事件处理函数中引用它               。开发人员最常使用 e / evt / event            ,因为它们很简单易记。坚持标准总是很好                。

e.preventDefault()

如果事件是可取消的   ,则 preventDefault() 方法会取消该事件                   ,这意味着属于该事件的默认操作将不会发生                  。

form.onsubmit = function(e) { if (fname.value === || lname.value === ) { e.preventDefault(); para.textContent = You need to fill in both names!; } }

举例               ,在以下情况下有用:

单击“提交            ”按钮,阻止其提交表单 单击链接                ,防止链接跟随 URL

事件冒泡和捕捉

浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序                  ,如果是   ,则运行它 然后它移动到下一个直接的祖先元素             ,并做同样的事情                  ,然后是下一个      ,等等          ,直到它到达<html>元素   。 用 stopPropagation() 修复问题

当在事件对象上调用该函数时                  ,它只会让当前事件处理程序运行         ,但事件不会在冒泡链上进一步扩大       ,因此将不会有更多事件处理器被运行 (不会向上冒泡)             。

video.onclick = function(e) { e.stopPropagation(); video.play(); };

"this"的含义

greeting: function() { alert(Hi! I\m + this.name.first + .); }

关键字"this"指向了当前代码运行时的对象 ( 原文:the current object the code is being written inside )

可以用var that=this来拷贝当前对象指向                  。

对象原型

面向对象编程(Object Oriented Programming                   ,缩写为 OOP)

在传统的 OOP 中            ,首先定义“类                   ”   ,此后创建对象实例时                   ,类中定义的所有属性和方法都被复制到实例中      。在 JavaScript 中并不如此复制——而是在对象实例和它的构造器之间建立一个链接(它是__proto__属性               ,是从构造函数的prototype属性派生的),之后通过上溯原型链                ,在构造器中找到这些属性和方法          。

理解对象的原型(可以通过 Object.getPrototypeOf(obj)或者已被弃用的__proto__与构造函数的 prototype 属性之间的区别是很重要的                  。前者是每个实例上都有的属性                  ,后者是构造函数的属性         。也就是说   ,Object.getPrototypeOf(new Foobar()) 和 Foobar.prototype 指向着同一个对象       。

必须重申             ,原型链中的方法和属性没有被复制到其他对象——它们被访问需要通过前面所说的“原型链      ”的方式                   。

尽管原型链看起来很像是继承的层级结构                  ,并且在某些方面      ,原型链的行为与继承的行为也很类似          ,但是在其他方面                  ,二者之间仍然存在区别            。在继承方式下         ,当一个子类完成继承时       ,由该子类所创建的对象既具有其子类中单独定义的属性                   ,又具有其父类中定义的属性(以及父类的父类            ,依此类推)   。而在原型链中   ,每一个层级都代表了一个不同的对象                   ,不同的对象之间通过 __proto__ 属性链接起来                   。原型链的行为并不太像是继承               ,而更像是委派(delegation)               。委派同样是对象中的一种编程模式。当我们要求对象执行某项任务时,在委派模式下                ,对象可以自己执行该项任务                  ,或者要求另一个对象(委派的对象)以其自己的方式执行这项任务                。在许多方面   ,相对于继承来说             ,委派可以更为灵活地在许多对象之间建立联系(例如                  ,委派模式可以在程序运行时改变                  、甚至完全替换委派对象)                  。

new的过程:

• 创建一个空对象      ,将它的引用赋给 this          ,继承函数的原型   。

• 通过 this 将属性和方法添加至这个对象

• 最后返回 this 指向的新对象                  ,也就是实例(如果没有手动返回其他的对象)

// ES5构造函数 let Parent = function (name, age) { //1.创建一个新对象         ,赋予this       ,这一步是隐性的                   , // let this = {}; //2.给this指向的对象赋予构造属性 this.name = name; this.age = age; //3.如果没有手动返回对象            ,则默认返回this指向的这个对象   ,也是隐性的 // return this; }; const child = new Parent();

继承

当一个方法拥有相同的函数名                   ,但是在不同的类中可以具有不同的实现时               ,我们称这一特性为多态(polymorphism)             。当一个方法在子类中替换了父类中的实现时,我们称之为子类重写/重载(override)了父类中的实现                  。

class Professor extends Person { // 只继承父类属性 teaches; constructor(name, teaches) { // 调用父类方法 super(name); this.teaches = teaches; } introduceSelf() { console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`); } grade(paper) { const grade = Math.floor(Math.random() * (5 - 1) + 1); console.log(grade); } }

因为我们想在创建新的 Professor 时设置 teaches                ,我们需要声明一个需要 name 和 teaches 参数的构造函数      。构造函数中需要做的第一件事是使用 super() 调用父类的构造函数                  ,并传递 name 参数          。父类的构造函数会设置 name 属性                  。然后 Professor 的构造函数接着设置 teaches 属性         。

class关键字声明类

class Person { name; constructor(name) { this.name = name; } introduceSelf() { console.log(`Hi! Im ${this.name}`); } }

私有方法

与私有数据属性一样   ,你也可以声明私有方法       。而且名称也是以 # 开头             ,只能在类自己的方法中调用

class Example { somePublicMethod() { this.#somePrivateMethod(); } #somePrivateMethod() { console.log(You called me?); } } const myExample = new Example(); myExample.somePublicMethod(); // You called me? myExample.#somePrivateMethod(); // SyntaxError

对象和文本之间的转换

parse(): 以文本字符串形式接受 JSON 对象作为参数                  ,并返回相应的对象                   。 stringify(): 接收一个对象作为参数      ,返回一个对应的 JSON 字符串            。

requestAnimationFrame

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画          ,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画   。该方法需要传入一个回调函数作为参数                  ,该回调函数会在浏览器下一次重绘之前执行                   。

Promise()

fetch()API

fetch()API是一种现代的      、基于 Promise 的          、用于替代 XMLHttpRequest 的方法               。

const fetchPromise = fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json); console.log(fetchPromise); fetchPromise.then( response => { console.log(`已收到响应:${response.status}`); }); console.log("已发送请求……");

调用 fetch() API         ,并将返回值赋给 fetchPromise 变量。

紧接着       ,输出 fetchPromise 变量                   ,输出结果应该像这样:Promise { <state>: "pending" }                。这告诉我们有一个 Promise 对象            ,它有一个 state属性   ,值是 "pending"                  。"pending" 状态意味着操作仍在进行中   。

将一个处理函数传递给 Promise 的 then() 方法             。当(如果)获取操作成功时                   ,Promise 将调用我们的处理函数               ,传入一个包含服务器的响应的 Response 对象                  。

输出一条信息,说明我们已经发送了这个请求      。

Promise.all()

它接收一个 Promise 数组                ,并返回一个单一的 Promise          。

当且仅当数组中所有的 Promise 都被兑现时                  ,才会通知 then() 处理函数并提供一个包含所有响应的数组   ,数组中响应的顺序与被传入 all() 的 Promise 的顺序相同                  。 会被拒绝——如果数组中有任何一个 Promise 被拒绝         。此时             ,catch() 处理函数被调用                  ,并提供被拒绝的 Promise 所抛出的错误       。 const fetchPromise1 = fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json); const fetchPromise2 = fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found); const fetchPromise3 = fetch(https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json); Promise.all([fetchPromise1, fetchPromise2, fetchPromise3]) .then( responses => { for (const response of responses) { console.log(`${response.url}${response.status}`); } }) .catch( error => { console.error(`获取失败:${error}`) });

Promise.any()

在 Promise 数组中的任何一个被兑现时它就会被兑现      ,如果所有的 Promise 都被拒绝          ,它也会被拒绝                   。

const fetchPromise1 = fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json); const fetchPromise2 = fetch(https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found); const fetchPromise3 = fetch(https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json); Promise.any([fetchPromise1, fetchPromise2, fetchPromise3]) .then( response => { console.log(`${response.url}${response.status}`); }) .catch( error => { console.error(`获取失败:${error}`) });

async 和 await

async关键字为你提供了一种更简单的方法来处理基于异步 Promise 的代码            。在一个函数的开头添加 async                  ,就可以使其成为一个异步函数   。

async function myFunction() { // 这是一个异步函数 }

在异步函数中         ,你可以在调用一个返回 Promise 的函数之前使用 await 关键字                   。这使得代码在该点上等待       ,直到 Promise 被完成                   ,这时 Promise 的响应被当作返回值            ,或者被拒绝的响应被作为错误抛出               。

Web Worker

Web Worker 的意义在于可以将一些耗时的数据处理操作从主线程中剥离   ,使主线程更加专注于页面渲染和交互。

当在 HTML 页面中执行脚本时                   ,页面的状态是不可响应的               ,直到脚本已完成                。

web worker 是运行在后台的 JavaScript,独立于其他脚本                ,不会影响页面的性能                  。您可以继续做任何愿意做的事情:点击                  、选取内容等等                  ,而此时 web worker 在后台运行   。

懒加载 文本分析 流媒体数据处理 canvas 图形绘制 图像处理

需要注意:

有同源限制 无法访问 DOM 节点 运行在另一个上下文中   ,无法使用Window对象 Web Worker 的运行不会影响主线程             ,但与主线程交互时仍受到主线程单线程的瓶颈制约             。换言之                  ,如果 Worker 线程频繁与主线程进行交互      ,主线程由于需要处理交互          ,仍有可能使页面发生阻塞 共享线程可以被多个浏览上下文(Browsing context)调用                  ,但所有这些浏览上下文必须同源(相同的协议         ,主机和端口号) // 在 "generate.js" 中创建一个新的 worker const worker = new Worker(./generate.js); // 当用户点击 "Generate primes" 时       ,给 worker 发送一条消息                  。 // 消息中的 command 属性是 "generate", 还包含另外一个属性 "quota"                   ,即要生成的质数      。 document.querySelector(#generate).addEventListener(click, () => { const quota = document.querySelector(#quota).value; worker.postMessage({ command: generate, quota: quota }); }); // 当 worker 给主线程回发一条消息时            ,为用户更新 output 框   ,包含生成的质数(从 message 中获取)          。 worker.addEventListener(message, message => { document.querySelector(#output).textContent = `Finished generating ${message.data} primes!`; }); // 监听主线程中的消息                  。 // 如果消息中的 command 是 "generate"                   ,则调用 `generatePrimse()` addEventListener("message", message => { if (message.data.command === generate) { generatePrimes(message.data.quota); } }); // 生成质数 (非常低效) function generatePrimes(quota) { function isPrime(n) { for (let c = 2; c <= Math.sqrt(n); ++c) { if (n % c === 0) { return false; } } return true; } const primes = []; const maximum = 1000000; while (primes.length < quota) { const candidate = Math.floor(Math.random() * (maximum + 1)); if (isPrime(candidate)) { primes.push(candidate); } } // 完成后给主线程发送一条包含我们生成的质数数量的消息消息         。 postMessage(primes.length); }

基本dom操作

document.querySelector

它允许你使用 CSS 选择器选择元素               ,调用会匹配它在文档中遇到的第一个对应元素

document.querySelectorAll

匹配文档中每个匹配选择器的元素,并把它们的引用存储在一个array中

document.getElementById

document.getElementsByTagName

创建和放置节点

document.createElement

document.appendChild

移动和删除元素

document.removeChild

删除自身节点:

document.parentNode.removeChild

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
网络推广的各种渠道有哪些类型(网络推广有哪些渠道) vue中的路由传参(vue3的路由传参query、params以及动态路由传参)