dom 8-25

最新推荐文章于 2023-05-06 13:08:00 发布
最新推荐文章于 2023-05-06 13:08:00 发布
阅读量87 收藏
点赞数
分类专栏： 前端学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neversleepy/article/details/119922574
版权

dom

事件加载顺序

在这里插入图片描述浏览器加载顺序
在这里插入图片描述
加上onload函数之后，script标签就可以写在最后面了
在这里插入图片描述响应函数 onclick那种要时间发生才会被触发，所以都会后执行，后面的代码会先执行这样。。
在这里插入图片描述
后面的aa会先被输出
在这里插入图片描述

查找

要注意通过id获取是获取一个，其他是获取一组！所以其他是elements，只有id是element，不是复数！
在这里插入图片描述

getElementsByTagName

在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述这里就很明显了！我用的getElementsByTagName返回的是一个HTMLCollection，一个类数组，虽然我只有一个ul节点，但是还是返回一个类数组，所以用不了appendChild，会出错说没有这个属性（HTMLCollection就是没有哇（（（。
在这里插入图片描述

返回的是：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述但是可以用for来遍历&用length来获取这个类数组的长度
在这里插入图片描述
可以用for循环进行遍历但是不能使用for循环修改里面的内容！可以输出，应该跟python的for差不多，只能读不能改

getElementByName（）

查询
在这里插入图片描述
在这里插入图片描述

返回的是nodelist

是类数组对象，不是数组对象！

在这里插入图片描述这个有点不太懂。。。
在这里插入图片描述

childenode

获取的是所有子节点 空格+元素！
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

children

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

previousSibling&nextSibling

都是按节点计算的，把空格也当做一个文本节点，所以说会返回多余的空格
在这里插入图片描述
在这里插入图片描述

value

在这里插入图片描述

回调函数

回调函数就是将函数作为别的函数的参数，高阶函数就是接收回调函数作为参数的函数，
如下 sq是回调函数，f是高阶函数。
在这里插入图片描述
在这里插入图片描述

查询

在这里插入图片描述使用下面的querySelector替代
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
返回的是nodelist！
在这里插入图片描述
在这里插入图片描述

增删改查

在这里插入图片描述
在这里插入图片描述

修改css

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个用window用的好妙！利用没有的对象的属性返回undefined和隐式类型转换成false做了一个小的判断来适配浏览器，真的不错
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

offsetLeft是算上边框的元素与定位父元素的距离！
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事件

在这里插入图片描述

冒泡

在这里插入图片描述
取消冒泡
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

委托

在这里插入图片描述
在这里插入图片描述

事件绑定

在这里插入图片描述
ie8以下不支持
在这里插入图片描述这样两个都会出！
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
补充下回调函数 ie不知道为什么测不了 不考虑ie适配了 两个callback调用的对象都是ul
在这里插入图片描述
ie适配：
在这里插入图片描述

事件的捕获&冒泡

事件的捕获就是找，一层一层的找，找到那个事件源为止（默认是从window对象开始找）。
事件的冒泡就是从事件源一直往上走，走到最大的父元素。
在这里插入图片描述
在这里插入图片描述
只有ie8及一下支持setCapture，ie9,11也不支持，我就说怎么试了半天火狐跟Chrome都不行。。。
有setCapture就要有releaseCapture，不然就会一直占着焦点

onmousewheel适配问题

在这里插入图片描述
ie8里面event对象没有preventDefualt属性，兼容的时候直接有就执行，没有就跑其他derhaha
在这里插入图片描述

补充一下那个加法
运算是一步一步来的，遇到数字就是直接计算，然后遇到字符串才是字符串的连接。
不是35px哦！
在这里插入图片描述

键盘事件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

困顿小狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Pro-25
03-13
8. DOM操作：JavaScript可以操作Document Object Model (DOM)，改变HTML元素的样式、内容或结构，实现动态网页效果。 9. AJAX：Asynchronous JavaScript and XML，用于在不刷新整个页面的情况下与服务器交换数据并...
pro-25-
02-28
压缩包中的"pro-25--main"可能是一个主要的JavaScript源代码文件，可能包含了上述一些概念的实际应用，比如使用ES6语法、异步操作、DOM操作等。通过学习和理解这个文件，开发者可以加深对JavaScript实际开发流程的...
DOM学习---获取节点绑定事件
四岁爱上了她的博客
08-23 1282
这里写自定义目录标题DOM1.1 什么是DOM1.2 DOM树1.3获取元素1.3.1 根据ID获取1.3.2 根据标签名获取元素1.3.3 H5新增获取元素的方式合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 DOM 1.1 什么是DOM
JavaScript基础DOM操作--在线英文发音
qq_41026301的博客
03-03 1605
一、案例需求 在线英文发音–点击英语单词完成在线英文发音 二、涉及的知识点 DOM事件，本案例主要用的是点击事件 DOM节点操作运用，节点查找操作，节点属性操作 利用document.getElementsByClassName来获取要查找的节点 HTML5的audio元素操作 有道在线语音API的应用 节点元素对象属性textContent，它返回节点的文本内容 三、实现过程 1.编写网页：...
8.JS-DOM
Hermione_m的博客
03-27 1362
DOM DOM简介 DOM ,全称 Document Object Model文档对象模型。 JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。 文档： 文档表示的就是整个的HTML网页文档 对象： 对象表示将网页中的每一个 部分都转换为了一个对象。 模型： 使用模型来表示对象之间的关系,这样方便我们获取对象。 节点 节点Node ,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。 比如: html标签、属性、文本、
uni-app中的DOM操作
最新发布
qq_40660283的博客
05-06 2860
对于那些不依赖 UI 交互的原生功能，nvue将其封装成模块，这是一种通过 javascript 调用原生能力的方法。
web ---- Dom型XSS
L0g1c的博客
07-31 2490
存储型xss最持久，而且更为隐蔽，因为是存在数据库当中的，触发的url当中没有带js或者其他的html代码，所以他的实用性更高。其次则是Dom型XSS因为它能绕过大部分浏览器的过滤，再其次才是反射型XSS反射型的xss还要深思熟虑的考虑根据浏览器去bypass各种过滤，易用性稍微差一些（注意反射型xss和dom型xss都需要在url加入js代码才能够触发）非持久型xss攻击要求用户访问一个被攻击者篡改后的链接，用户访问该链接时，被植入的攻击脚本被用户游览器执行，从而达到攻击目的。...
C-25
03-22
【压缩包子文件的文件名称列表】：“C-25-main”可能是一个项目主文件，通常在JavaScript项目中，"main"文件指的是启动或入口文件，比如`index.js`或`app.js`，它是程序开始执行的地方。这可能包含了一些核心的设置...
Project-25
03-19
在"Project-25-main"这个文件中，很可能是项目的主入口文件，包含了项目的初始化、路由配置、模块导入等功能。通过分析和学习这个文件，我们可以深入理解项目结构和JavaScript在实际项目中的应用方式。同时，这也能...
c-25
03-10
具体的学习或实践内容可能需要查看压缩包内的“c-25-main”文件来获取更多信息。这可能是一个主文件、源代码文件、教程索引或者项目配置文件等。如果你能够提供更多的上下文，我可以给出更具体的解答。
nginx安装点击start nginx.exe一闪而过
neversleepy的博客
02-22 2394
这个是因为默认的80端口被占用了，修改默认的端口就行 直接搜nginx.conf修改linsten 80我改成8082了 这样应该是成功了 但是不知道为什么没找到进程 可能是我眼睛瘸了
vue2笔记
neversleepy的博客
03-12 2118
这里写自定义目录标题vue基础知识初识：响应式原理插值语法&模板语法插值语法：**{{js表达式}}**模板语法：数据绑定(v-bind、v-model)v-bind 单向数据绑定 只能data-->容器v-model 双向数据绑定 只能用在表单类元素（有value值的输入类元素）上绑定class样式补充数组操作el&data的两种写法MVVM模型数据代理补充：Object.defineProperties(要修改的对象，属性，配置对象)事件处理事件修饰符点击事件键盘事件计算属性计算属
使用nodejs编写swagger文档
neversleepy的博客
09-07 1495
swaggerInstall-swagger注册函数(app.js(注册swagger api)
pnpm init -- -y ERROR ERROR Unknown option: ‘y‘
neversleepy的博客
09-14 966
就可以创建package.json file。
vue3 组合式api 实现v-lazy 图片懒加载
neversleepy的博客
09-25 908
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；created：在绑定元素的 attribute 或事件监听器被应用之前调用；beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；beforeUpdate：在更新包含组件的 VNode 之前调用；当目标对象出现在视口的时候，会调用回调函数，传递一个元素都为。beforeUnmount：在卸载绑定元素的父组件之前调用；mounted：在绑定元素的父组件被挂载后调用；Image 对象代表嵌入的图像。
This dependency was not found: * swiper/css/swiper.css in ./src/main.js
neversleepy的博客
02-22 846
我用的vue2太高了不支持 下载低版本的就好了 https://blog.csdn.net/wzqac2017/article/details/107990211
element ui input框禁用 按钮样式变化 样式穿透(vue 2)
neversleepy的博客
09-06 755
element ui input框禁用 按钮样式变化 样式穿透(vue 2)
es6笔记（持续更新）
neversleepy的博客
10-07 533
es6letconst变量的解构赋值模板字符串 let 1.具有块级作用域 单纯打括号都算是块级作用域 ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。块级作用域只影响变量 跟let 函数还是没有块级作用域derrr 块级作用域还引申出一个东西 就是var全局声明是共用一个i 但是let是有多个i for循环每次执行的i都是不一样的i for循环用了很多个i 每次都是单独声明单独使用 这个for循环做了3次 声明了3个不一样的i（有3个i哦） 2.不可
刷题笔记(js)
neversleepy的博客
09-16 472
时间使用的上界 主要是要看操作元素多少次 不是有双重循环就是O(n2)看的算法图解，里面写的递归只是一种让程序看起来更好理解的写法。不用太害怕。算法图解里面写的分而治之的思想，题目 229题解 做这题的时候注意边界的处理。注意 这样写的时间复杂度是 不要看到双循环就无脑说，只对每个操作数操作了两次所以是！题目59其实这题就是寻找不变量找规律 仔细找找就好了使用四个循环，模拟螺旋数组生成的过程，注意不变量和边界。题解：递归链表具有天然的递归性。可以将原链表看成头节点 1 后挂接一个更短的链表： 继续拆解，直到
JavaScript入门与DOM/Ajax教程(第8版)
该书以其简洁易懂、图文并茂、系统性和实用性而闻名，特别强调了JavaScript语言基础的学习，同时涵盖了DOM、XML、Ajax和jQuery等重要相关技术。书中内容以循序渐进的方式展开，从JavaScript语言的基本概念如变量、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值