JavaScript基础部分知识点总结(Part4)

最新推荐文章于 2024-08-07 17:12:09 发布
最新推荐文章于 2024-08-07 17:12:09 发布
阅读量844 收藏 31
点赞数 38
分类专栏： 前端知识点 文章标签： javascript 开发语言 ecmascript 前端 html5 css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GaoshangD1209/article/details/139769574
版权

Web APIs和JS基础关联性

1. JS的组成

2. JS基础阶段以及Web APIs阶段
  • JS基础阶段
  • Web APIs阶段

API和Web API

1. API
  • API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
  • API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
  • 充电接口就是一个API
2. Web API
3. API和Web API总结
  • API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
  • Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
  • Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
  • 学习Web API 可以结合前面学习内置对象方法的思路学习

DOM简介

1. 什么是DOM
  • 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
  • W3C 已经定义了一系列的DOM 接口，通过这些DOM 接口可以改变网页的内容、结构和样式。
2. DOM树

  • 文档：一个页面就是一个文档，DOM 中使用document 表示
  • 元素：页面中的所有标签都是元素，DOM 中使用element 表示
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用node 表示
  • DOM 把以上内容都看做是对象

获取元素

1. 如何获取页面元素
  • DOM在我们实际开发中主要用来操作元素。
  • 获取页面中的元素可以使用以下几种方式:
    • 根据ID 获取
    • 根据标签名获取
    • 通过HTML5 新增的方法获取
    • 特殊元素获取
2. 根据ID获取
  • 使用getElementById() 方法可以获取带有ID 的元素对象。
document.getElementById('id');
  • 使用console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。
3. 根据标签名获取
  • 使用getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名');
  • ⚠️：
    • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
    • 得到元素对象是动态的
4. 通过HTML5新增的方法获取
1. document.getElementsByClassName('类名')；// 根据类名返回元素对象集合
2. document.querySelector('选择器');  // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器');  // 根据指定选择器返回
  • ⚠️：querySelector和querySelectorAll里面的选择器需要加符号，比如：document.querySelector('#nav');
5. 获取特殊元素（body，html）
  • 获取body元素
1. document.body  // 返回body元素对象
  • 获取html元素
1. document.documentElement  // 返回html元素对象

事件基础

1. 事件概述
  • JavaScript 使我们有能力创建动态页面，而事件是可以被JavaScript 侦测到的行为。
  • 网页中的每个元素都可以产生某些可以触发JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
2. 事件三要素
  • 事件源（谁）
  • 事件类型（什么事件）
  • 事件处理程序（做啥）
3. 执行事件的步骤
  • 获取事件源
  • 注册事件（绑定事件）
  • 添加事件处理程序（采取函数赋值形式）
4. 常见的鼠标事件
鼠标事件触发条件
onclick鼠标点击左键触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfoucs获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发
5. 分析事件三要素
  • 下拉菜单三要素
  • 关闭广告三要素

操作元素

JavaScript 的DOM 操作可以改变网页内容、结构和样式，我们可以利用DOM 操作元素来改变元素里面的内容、属性等。注意以下都是属性

1. 改变元素内容
element.innerText
  • 从起始位置到终止位置的内容, 但它去除html标签，同时空格和换行也会去掉
element.innerHTML
  • 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
2. 常用元素的属性操作
1. innerText、innerHTML 改变元素内容
2. src、href
3. id、alt、title
3. 表单元素的属性操作
  • 利用DOM 可以操作如下表单元素的属性：
type、value、checked、selected、disabled
4. 样式属性操作
  • 我们可以通过JS 修改元素的大小、颜色、位置等样式。
1. element.style  行内样式操作
2. element.className  类名样式操作
  • ⚠️：
    • JS里面的样式采取驼峰命名法比如fontSize、backgroundColor
    • JS修改style样式操作，产生的是行内样式，CSS权重比较高
    • 如果样式修改较多，可以采取操作类名方式更改元素样式。
    • class因为是个保留字，因此使用className来操作元素类名属性
    • className会直接更改元素的类名，会覆盖原先的类名。
5. 排他思想

  • 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
    • 所有元素全部清除样式（干掉其他人）
    • 给当前元素设置样式（留下我自己）
    • 注意顺序不能颠倒，首先干掉其他人，再设置自己
6. 自定义属性的操作
  • 获取属性值
    • element.属性    获取属性值。
    • element.getAttribute('属性');
  • 区别：
    • element.属性    获取内置属性值（元素本身自带的属性）
    • element.getAttribute(‘属性’);  主要获得自定义的属性（标准）我们程序员自定义的属性
  • 设置属性值
    • element.属性 = ‘值’ 设置内置属性值。
    • element.setAttribute('属性','值');
  • 区别：
    • element.属性  设置内置属性值
    • element.setAttribute(‘属性’);主要设置自定义的属性（标准）
  • 移除属性
    • element.removeAttribute('属性');
7. H5自定义属性
  • 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
  • 自定义属性获取是通过getAttribute(‘属性’)获取。
  • 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
  • H5给我们新增了自定义属性：
    • 设置H5自定义属性：H5规定自定义属性data-开头做为属性名并且赋值。
      • 比如<divdata-index=“1”></div>
    • 获取H5自定义属性：兼容性获取 element.getAttribute(‘data-index’); H5新增element.dataset.index 或者element.dataset [‘index’] ie 11才开始支持

节点操作

1. 为什么学节点操作

获取元素通常使用两种方式：

  • 利用DOM 提供的方法获取元素
    • document.getElementById()
    • document.getElementsByTagName()
    • document.querySelector 等
    • 逻辑性不强、繁琐
  • 利用节点层级关系获取元素
    • ​​​​​​​利用父子兄节点关系获取元素
    • 逻辑性强，但是兼容性稍差
2. 节点概述
  • 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用node 来表示。
  • HTML DOM树中的所有节点均可通过JavaScript 进行访问，所有HTML 元素（节点）均可被修改，也可以创建或删除。

  • 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
    • 元素节点nodeType 为1
    • 属性节点 nodeType 为2
    • 文本节点 nodeType 为3（文本节点包含文字、空格、换行等）
3. 节点层级
  • 利用DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
  • 父级节点
node.parentNode
  • parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回null
  • 子节点
1. parentNode.childNodes (标准)
  • parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。
  • ⚠️：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
  • 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes
var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
    if (ul.childNodes[i].nodeType == 1) {
    // ul.childNodes[i]是元素节点
    console.log(ul.childNodes[i]);
    }
}
2. parentNode.children (非标准)
  • parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
  • 虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
3. parentNode.firstChild
  • firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
4. parentNode.lastChild
  • lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
5. parentNode.firstElementChild
  • firstElementChild返回第一个子元素节点，找不到则返回null。
6. parentNode.lastElementChild
  • lastElementChild返回最后一个子元素节点，找不到则返回null。
  • ⚠️：这两个方法有兼容性问题，IE9以上才支持。
  • 兄弟节点
1. node.nextSibling
  • nextSibling返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
2. node.previousSibling
  • previousSibling返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
3. node.nextElementSibling
  • nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null。
4. node.previousElementSibling
  • previousElementSibling返回当前元素上一个兄弟节点，找不到则返回null。
  • ⚠️：这两个方法有兼容性问题，IE9以上才支持。
4. 创建节点
document.createElement('tagName')
  • document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
5. 添加节点
1. node.appendChild(child)
  • node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面的after伪元素。
2. node.insertBefore(child, 指定元素)
  • node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于CSS里面的before伪元素。
6. 删除节点
node.removeCHild(child)
  • node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。
7. 复制节点
node.cloneNode()
  • node.cloneNode()方法返回调用该方法的节点的一个副本。
  • ⚠️：
    • 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
    • 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。
8. 替换节点
parentNode.replaceCHILD(newChild, oldChild);
  • 用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
9. 创建元素总结
  • document.write()
  • innerHTML
  • document.createElement()
  • 区别：
    • ocument.write是直接将内容写入页面的内容流，会导致页面全部重绘
    • innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
    • innerHTML复制节点的时候，不会复制原先节点的事件，会存在内存泄露问题
    • 如果页面创建元素很多，建议使用innerHTML因其效率更高（不要拼接字符串，采取数组形式拼接）
    • 如果页面创建元素较少，建议使用createElement()
  • 总结：不同浏览器下，innerHTML效率要比creatElement高
小董爱敲代码️
关注
专栏目录
[Java]Java面试常用知识点总结 — Java web 编程部分（来自牛客资料）
一杯糖不加咖啡
04-26 190
[Java]Java面试常用知识点总结 — Java web 编程部分（来自牛客资料） （PDF资源：https://download.csdn.net/download/qq_36254699/11577742 ） 文章目录[Java]Java面试常用知识点总结 — Java web 编程部分（来自牛客资料）三、Java web 编程1、web 编程基础①Tomcat 服务器1、启动项目时如何实...
前端学习笔记 | WebAPIs（DOM+BOM）
m0_53522458的博客
03-13 1094
DOM操作、事件监听、事件流、事件委托、元素尺寸与位置、日期对象、节点操作、M端事件、window对象、本地存储、数组map和join方法、正则表达式
前端（day04）DOM、BOM、Api和内置对象
qq_44840708的博客
01-12 271
前端（day04）DOM、BOM、Api和内置对象
前端学习——Web APIs (DOM+BOM)
weixin_57896572的博客
11-09 1245
Pink老师，Web APIs学习笔记，包含BOM和DOM的基础知识。
Web APIs+DOM+BOM
DYHHH06的博客
04-20 1735
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
w3c标准 - Dom
小蚂蚁的世界
03-06 1210
w3c标准 - Dom 1. DOM （1） DOM : W3C的标准,定义了访问HTML和XML文档的标准。  （2） 分类         a. 核心 DOM - 针对任何结构化文档的标准模型.         b. XML DOM - 针对 XML 文档的标准模型 (XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法)
Vue3知识点总结及个人学习心得
weixin_60537353的博客
12-09 858
Vue3快速上手
ppk谈JavaScript.part04.rar
05-28
虽然具体的内容由于没有提供详细资料，但我们可以通过推测来总结可能涵盖的一些关键知识点： 1. **原型与继承**：JavaScript的继承机制基于原型链，这部分可能会详细讲解如何使用`__proto__`，`prototype`，以及`...
JS基础知识深入总结
LY_code的博客
02-18 743
本系列将从以下专题去总结： JS基础知识深入总结 对象高级 函数高级 事件对象与事件机制 暂时会对以上四个专题去总结，现在开始JS之旅的第一部分：JS基础知识深入总结。 话在前面：我一直都认为，在互联网学习的大环境下，网路学习资源很多，但这些博客等仅仅是一个向导，一个跳板，真正学习知识还是需要线下，需要书籍。 1.1 数据类型的分类和判断 1.1.1 数据类型的分类 基本（值）类型 [p...
part1 软件测试基础知识面试题（含答案）
西边人西说测试.软件测试资源站
10-21 299
1、你的测试职业发展是什么？ 测试经验越多，测试能力越高。所以我的职业发展是需要时间积累的，一步步向着高级测试工程师奔去。而且我也有初步的职业规划，前3年积累测试经验，按如何做好测试工程师的要点去要求自己，不断更新自己改正自己，做好测试任务。 优势在于我对测试坚定不移的信心和热情，虽然经验还不够，但测试需要的基本技能我有信心在工作中得以发挥。 2、你认为测试人员需要具备哪些素质 做测试应该要有一定的协调能力，因为测试人员经常要与开发接触处理一些问题，如果处理不好的话会引起一些冲突，这样的话工
DOM文档对象模型
chenmo2001的博客
05-01 690
DOM文档对象模型 什么是（DOM）文档对象模型 DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 HTML .
W3C DOM
lin49940的专栏
08-07 1257
W3C DOMW3C DOM到底是什么？W3C主页提供了清晰的定义：文档对象模型（DOM）是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。文档可以进一步处理，处理的结果可以放回到所提供的页面中。不仅如此，W3C还解释了为什么要定义标准的DOM。W3C从其成员处收到了大量请求，这些请求都是关于将XML和HTML文档的对象模型提供给脚本所要采用的方法。提案并
关于DOM的w3c文档学习笔记总结
weixin_53893220的博客
07-13 338
HTML DOM（文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 通过 HTML 对象选择器查找 HTML 对象 本例查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值，包含在 document.elements中，通过x.elements[i].value来调用，比如一个个input输入的值 DOM动画 应该通过 style = “position: relative” 创建容器元素。 应该通过 styl
什么是DOM操作
cjx177187的博客
07-14 624
文档对象模型DOM 是document object model====>文档对象模型 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口把文档中的代码翻译成一个对象模型在这个模型中 所有相关的标签属性注释文本等等12种数据 都翻译为一种类型的对象 统称节点对象这些对象之间在文档模型数据结构中存在某种关系: 根节点 父子节点 同胞节点等等ducoment不是关键字，但是可以直接使用。因为把window省略了。1.只有一个根节点document2.除了根节点外所有节点都有唯一的一个父
Part1-DOM学习笔记-DOM基础操作
最新发布
m0_63165331的博客
08-07 867
本文是个人的DOM基础学习笔记系列，内含大量示例代码，对初学者会有所帮助。
DOM 简介 | 深入了解DOM
青春木鱼的博客
09-05 4771
W3C DOM由以下三部分组成：核心DOM - 针对任何结构化文档的标准模型。XML DOM - 针对XML文档的标准模型。HTML DOM - 针对HTML文档的标准模型。DOM是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。
DOM
jian436的专栏
01-24 641
java 创建w3c dom_java之Dom实例（W3cDom） | 学步园
weixin_39828783的博客
03-07 484
package anby.com;import java.io.File;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.xml.parsers.DocumentBuilder;import javax.xml.parsers.DocumentBuilderFactor...
java w3c dom 使用_JavaScript W3C DOM
weixin_39683025的博客
02-16 362
本文档对象模型允许访问所有的文档内容和修改，由万维网联合会(W3C)规范。几乎所有的现代浏览器都支持这种模式。在W3C DOM规范的大部分传统DOM的功能，而且还增加了新的重要的功能。除了支持forms[ ], images[ ]和文档对象的其它数组属性，它定义了方法，使脚本来访问和操纵的任何文档元素，而不只是专用元件状的表单和图像。文档属性在W3C DOM：此模型支持所有传统DOM提供的属性。此...
JavaScript入门基础教程：知识点详解
"JavaScript入门系列之知识点总结" JavaScript是一种强大的、直译式的脚本语言，它在Web开发中扮演着至关重要的角色。JavaScript以其动态类型、弱类型和基于原型的特性，成为了网页动态功能的核心，几乎所有的主流...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值