DOMapi

最新推荐文章于 2024-08-05 22:43:05 发布
最新推荐文章于 2024-08-05 22:43:05 发布
阅读量345 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ripe_L/article/details/123980312
版权

NodeList 表示 HTML 元素集合

选择器

- 作用：选中html元素，在js中以对象形式存在，
- js通过对dom对象下属性多次赋值，以及api使用，完成页面动画
- **注意：选择器返回值，有的是dom对象，有的集合，如果是集合，需要从集合中取值获取dom对象**

document.api

- document.getElementById()
- document.getElementsByClassName();
- document.getElementsByTagName();
- document.querySelector()
- document.querySelectorAll()
-...


'区别'
- 1：getElement...() 返回是 **HTMLCollection**,当使用 remove() removeChild() 删除时，集合长度会变短
- 2：querySelectAll 返回NodeList 当remove()  removeChild() 删除时，集合长度不变

HTMLCollection 与 NodeList的区别是什么？

操作dom对象的api


增
- prentDOM.appendChild()
删
- prentDOM.removeChild()
改
- prentDOM.replaceChild(NEW,old)
查
- 查父元素  dom.parentElement;
- 查子元素们 dom.children
- 查兄弟 dom.nextElementSibling  / dom.previousElementSibling

form

- 1:如何获取form对象
- 2：form中api reset() submit()
- 3: input  focus() blur()
- 4: 验证是选中checkbox

demo

- 多选
- 单选
>for循环中，dom事件绑定，事件处理函数中，如何获取触发事件的元素？
> 根据触发事件元素，查找相关的兄弟元素，子元素 父元素 以及祖籍元素

如何获取触发事件的元素

- 1：闭包
- 2：this
- 3: var 变 let
  • 删除列表

练习，相关元素的查找，以及 removeChild()的使用

  • 新增列表
> 1:如何获取input输入框值
> 2:练习appendChild()使用
> 3:没有关系的元素之间，如何通过建立练习，完成交互功能的

Document.documentElement()
// 一个会返回文档对象(document)的根 元素 的只读属性(如 HTML 文档的<html>元素)

Document.getComputedStyle(DOM, Null)['css属性']
// 作用: 获取DOM的某个css样式值
// 参一: DOM对象
// 参二: Null 表示不获取子元素 css
// 返回值: cssStyleDelecretion 样式对象的集合

Document.getElementById()
//作用: 用过ID属性获取HTML元素对象
//参数: ID值 类型是字符串
//返回值: 返回选中DOM对象   没有选中的话NULL
;('基础差的同学可以记: 返回值是HTML标签,在js中存在的形象是对象.')
;('所有的HTML标签,都是,并且属性 Key 都一样')

Document.getElementsByTagName()
// 作用: 通过class类名获取HTML元素
// 参数: class值  类型是字符串
// 返回值: HTML集合, 如果没有: 集合长度为0

currenStyle.cssStyle
// 作用: 获取DOM的某个CSS样式
// 参数: DOM.css样式
// 返回值: DOM对象的CSS样式中的值

Document.getElementsByClassName()
// 作用: 通过class类名获取HTML元素
// 参数: HTML值  类型是字符串
// 返回值: HTML集合, 如果没有null,集合长度为0

Document.getElementsByName()
// 作用: 通过class   name类名获取 HTML 元素
// 参数: HTML 值  类型是字符串
// 返回值: HTML集合. 如果没有null 集合长度为 0

Document.querySelector()
// 作用: 通过HTML文档中与class的属性名来进行匹配获取
// 参数: HTML文档的CSS选择器
// 返回值: 匹配到的第一个. 如果没有匹配到,则返回NULL

Document.querySelectorAll()
// 作用: 获取与指定选择器组匹配的HTML文档中的列表元素
// 参数: HTML文档 中所有的形同标签属性的选择器
// 返回值: 返回所有与参数相同的DOM对象,如果没有则返回NodeList

Document.createElement()
// 作用: 创建HTML元素
// 使用: var className = document.createElement('div')

运算符 API

  • 展开运算符

    …
    作用: 用于类数组变数组. 数组合并

  • 添加 class 类名

    add()
    专业名词: DOMTokenList.add()
    页面输出: DOM.classList.add()
    作用: DOM 元素的新增 class 类名
    参数: String 是增加的类名
    返回值: 无

  • 删除某个类名

    remove()
    专业名词: DOMTokenList.remove()
    页面输出: DOM.classList.remove()
    使用: DOM.classList.remove(‘删除的’)
    作用: 删除 DOM 中某个类名
    参数: String 被删除的类名
    返回值: 无

  • 遍历 classList 获取每一个类名

    forEach(function(){})
    专业名词: DOMTokenList.forEach(function(){})
    页面输出: DOM.classList.forEach(function(){})
    作用: 遍历 classList, 获取每一个 HTML 标签中类名
    参数: 回调函数
    回参: item 每个类名
    返回值: 无

  • 更改类名

    replace()
    专业名词: DOMTokenList.replace()
    页面输出: DOM.classList.replace(‘old’,‘new’)
    作用: 替换一个 class 类名
    参一: 被替换的类名
    参二: 新的类名

  • 某一个 DOM 添加 class 类名

    addClassName()
    作用: 给某一个 DOM 添加 class 类名
    参一: DOM 对象
    参二: 添加新数组
    返回值: DOM

  • 删除

    removerClass()
    作用: 删除某个元素中的类名
    参一: DOM 对象
    参二: 被删除的类名
    返回值: DOM 对象

  • 更新

    replace()
    作用: 更新 DOM 对象属性名
    参一: DOM 对象
    参二: 被更新的 class 类名
    参三: 替换的 class 类名
    返回值: 替换后的 DOM 对象

  • 设置 CSS 属性

    DOM.style.值对象
    作用: 给 HTML 设置行内样式,数以权重高
    值: css 样式
    使用: DOM.style.width

  • 新增

    div.appendChild()
    作用: 从父元素尾部添加一个新的子元素
    参数: DOM 对象
    返回值: 无

  • 赋值

    div.innerHTML()
    作用: 重新进行赋值
    参数: DOM 对象
    返回值: 无

  • 返回节点名称

    Node.nodeName
    作用: 返回当前节点名称
    参数: Node 更改为 变量
    使用: var Node = document.querySelector(‘input’);

  • 小写转换

    str.toLocaleLowerCase()
    作用: 把字符串全部转换为小写
    参数: 无
    返回值: 新的字符串，在其中 stringObject 的所有大写字符全部被转换为了小写字符。

  • 大写转换

    str.toLocaleUpperCase()
    作用: 把字符串全部转换为大写
    参数: 无
    返回值: 新的字符串，在其中 stringObject 的所有大写字符全部被转换为了大写字符

  • 查找指定元素的下一个兄弟元素

    Node.nextElementSibling
    作用: 查找指定元素的下一个兄弟元素
    参数: 无
    返回值: 返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。

    Node.nextSibling
    作用: 返回列表项的下一个同胞
    参数: 无
    返回值: 返回指定节点之后紧跟的节点，在相同的树层级中。

  • 获取某个子元素的标签名称

    Element.children
    作用: 只读属性
    参数: 无
    返回值: 对象类型为 HTMLCollection，你可以使用 elementNodeReference.children[1].nodeName 来获取某个子元素的标签名称。

  • 获取某个父元素节点

    Node.parentElement
    作用: 返回当前节点的父元素节点
    返回值: 返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。

  • 返回包含指定节点的子节点的集合

    Node.childNodes
    作用: 返回包含指定节点的子节点的集合,该集合为即时更新的集合
    参数: 无

  • 删除父元素中的子元素

    parent.removeChild(子元素)
    作用:删除父元素中的子元素
    参数：子元素

  • 替换新旧节点

    prentDom.replaceChild(newDom,oldDom)
    作用: 替换新旧节点
    参一: 新节点
    参二: 旧节点

  • 获取视图窗口宽度高度
    页面滚动条:页面高度 - 窗口高度 = 滚动最大高度

    innerWidth
    作用: 获取视图宽度
    参数: 无
    返回值: 窗口宽度

    innerHeight
    作用: 获取视图高度
    参数: 无
    返回值: 窗口高度

  • 记录是否勾选

    check.checked
    作用: 查看是否选中
    参数: 无
    返回值: true 选中/false 没有选中

  • 浏览器的本地存储

    localStorage 浏览器的本地存储
    localStorage.setItem(key,value)
    作用：往 localStorage 中添加或者修改 key value 键值对
    参一：key 意义：表示存储数据的名字
    参二：value 意义：具体的数据
    返回值：无

  • 第一次打开页面,判断是否有 user

    localStorage.getItem(key)
    作用：从 localStorage 中共读取数据
    参数：key
    返回值：key 的 value 值

分析猛如虎，操作菜如鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Router Dom API 中文 文档
你好，今天！
11-27 1万+
&lt;BrowserRouter&gt; &lt;Router&gt;的一种，通过使用HTML5提供的history API(pushState,replaceState,propstate)机制来维持页面UI同RUL的统一。 Props basename: 该router下路由路径的base url. 应该有一个前置斜杠，但不能有后置斜杠。如果你的页面路由路径为某个子目录，那base url...
DOM常用API
weixin_48115183的博客
05-12 2386
一、基本类型介绍 #1.1 Node类型 DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法 Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型 假设我们要判断一个Node是不是元素，我们可以这样判断 if(someNode.nodeType == 1){ console.lo
JavaScript DOM API的使用
trong_ 的烂笔头
03-08 2889
JavaScript主要由ECMAScriptDOMBOM这三部分组成;我们要知道要完成一个程序, 光有语法是远远不够的, 对于JS来说, 除JS语法(ES)外, 还需要掌握一些WebAPI, 这些API是浏览器给JS代码提供的功能, 即DOM和BOM;DOM是页面文档对象模型, 可以对页面中的元素进行操作, 而BOM是浏览器对象模型, 可以对浏览器窗口进行操作, 本篇博客中主要介绍的就是DOM.
DOM API是什么
京龙
05-09 697
多年来，我们一直依赖第三方 JavaScript 库（例如 jQuery）来为 Web 编写 JavaScript。 然而，近年来，DOM API 有了很大的发展，因此使用原生 JavaScript 向网页添加动态功能对开发人员来说变得越来越容易。 本文是对每个现代 Web 浏览器中内置的 DOM API 的高级概述。 我们将研究 DOM API 是什么，它与 JavaScript 的关系，以及如何使用它为 Web 编写 JavaScript。 什么是DOM DOM 代表文档对象模型（ Document O
BOMAPI和DOMAPI
cxuyuanLch的博客
03-05 439
bom api： 用于操作浏览器的API BOM是browser object model的缩写，简称浏览器对象模型 它提供了独立于内容而与浏览器窗口进行交互的对象， 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。 BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 BOM缺乏标准，JavaScript语法的标准化组织是ECMA， DOM的标准化组织是W3C。 window.history 操纵浏览器记录 history.back(); // 等同于点击浏览
五、DOM api
wang_liuyong的博客
08-02 1244
关于DOM的一些概念 DOM是一个api，是一个接口规范，可以用各种语言实现，并不仅限于js,但是js只能通过dom提供的接口来操作页面。 DOM树是由不同类型的节点组成的，每一个节点就是树上的一片叶子。 如上图，今天我们就着重讲一下上图相关三个对象的接口（document对象、element对象），他们既有自己的属性，同时也继承了其原型的全部属性。 总结 + 我认为的重点 ...
DOM API简析
夜落初阳，书写欢乐
03-28 5525
DOM API简析 DOM释义   API通俗的来讲，就是人家提供给你的，让你可以直接使用的东西。DOM，Document Object Model，文档对象模型。这里的文档以前特指xml文档，这也就是我们在html里边使用DOM API那么难用的原因，它一开始就不是给html使用的。   所谓Document Object Model，本质上还是一种model，将document（xml...
[JavaScript]DOMAPI
程序员云锦的博客
12-18 1027
文章目录获取DOM节点对象获取的DOM元素命名格式字母o前缀字母a前缀对象属性和标签属性概念的区分判断某一个属性是否有某属性DOM节点对象的属性 获取DOM节点对象 var oHeader = document.getElementById("header"); 表示直接获取ID名称为header的标签，返回对应的节点对象(单个）,如果有多个ID名为header的标签，也只获取第一个标签 var aP = document.getElementdByTagName("p"); 表示获取文档中的所有p标签，返
JavaScript | DOM API 操作元素
1226
05-22 3024
一、WebAPI 背景知识 JS 分成三个大的部分： ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 要想写实际的程序，光会语言是不够的，还需要掌握相关的 "生态”，配套的库 / 框架 对于在浏览器上运行 JS 来说，最最核心的库，就是 DOM API 就是浏览器给 JS 提供的原生接口 基于这样的接口，就可以针对页面的上的元素进行操作了 DOM => 文档 对象 模型 HTML 中，会把每个 html 标签，都视为是一个 JS 中可以操作的对象
React中使用原生DOM API 中的innerHTML
charlie________的博客
06-23 304
React中使用原生DOM API 中的innerHTML
domapi
06-17
"domapi"是一个开源项目，专注于DOM（Document Object Model）元素的操作。这个工具提供了一种高效的方法，允许用户使用有限的DOM元素来创建或生成其他的HTML元素，从而简化Web页面的动态构建和交互过程。在现代Web...
通用dom api
07-27
1. **Dom Core API**： Dom Core API是DOM（Document Object Model）的基础，它提供了一系列方法和属性，用于处理任何类型的结构化文档，无论是HTML还是XML。这些方法允许我们创建、修改、遍历和查找文档节点。例如...
javascript dom api
06-28
这个.chm文件"jsdom.chm"应该包含了JavaScript DOM API的详细解释和示例，涵盖了以上所有知识点，是学习和查找DOM API的实用工具。通过深入学习和实践，开发者可以熟练掌握DOM操作，提升网页动态化和交互性设计的...
JavaScript DOM API
09-17
DOM API提供了丰富的接口，用于创建、修改、查找和遍历文档元素。 一、DOM基础 DOM是文档对象模型的缩写，它将网页内容视为一棵树形结构，每个节点代表页面上的一个元素或属性。根节点是`document`对象，包含了整个...
Element.details:纯JS polyfill用于使用DOM API标记所有浏览器（包括IE6 +）
05-20
带有DOM API的纯JS polyfill for details标签，适用于所有浏览器，包括IE6 + 状态：测试版2 演示： : 使用 <!--[if lt IE 8]>[removed][removed]<![endif]--><!--[if IE 8]>[removed][removed]<!...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1559
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 233
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 471
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【面试经验】滴滴 秋招储备实习 前端面经
最新发布
litterfinger的博客
08-05 117
时间线：5.15 11点半一面，下午2点半二面。● 不知道盒子宽高情况下水平垂直居中。● scale是怎么放大盒子宽高的。● transform的属性。滴滴秋招储备实习 前端面经。● 文件断点续传+切片上传。● 自我介绍+项目介绍。
JavaScript DOM API 在哪查看
03-02
JavaScript DOM API 可以在 Mozilla Developer Network (MDN) 的文档中心查看。您可以访问 https://developer.mozilla.org/en-US/docs/Web/API 来查找所有可用的 DOM API，也可以使用搜索框来查找特定的 API。该网站...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值