JS-DOM总结

最新推荐文章于 2024-05-06 16:25:21 发布
最新推荐文章于 2024-05-06 16:25:21 发布
阅读量435 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itSeven7/article/details/78404149
版权
这篇博客总结了JavaScript中的DOM操作，包括Node类型、属性、方法，如节点获取与操作，属性设置，选择器，HTML5 API中的类名操作，以及事件对象的坐标位置等。重点介绍了如何使用DOM进行元素的增删改查以及属性处理。
摘要由CSDN通过智能技术生成

JS-DOM总结

DOM将任何的HTML或XML文档绘制成一个由多层节点构成的结构—节点树。

Node类型

javascript中所有节点类型都继承自Node类型，
因此所有节点类型都共享着相同的基本属性和方法，节点类型由Node类型中定义的12个数值常量来表示，任何节点都必居其一

  • Node.ELEMENT_NODE(1)　　　　　　　　　　代表element元素节点
  • Node.ATTRIBUTE_NODE(2) 　　　　　　　　　attr类型
  • Node.TEXT_NODE(3) 　　　　　　　　　　　　text节点 文本节点
  • Node.CDATA_SECTION_NODE(4)
  • Node.ENTITY_REFERENCE_NODE(5)
  • Node.ENTITY_NODE(6)
  • Node.PROCESSING_INSTRUCTION_NODE(7)
  • Node.COMMENT_NODE(8) 　　　　　　　　　　注释节点
  • Node.DOCUMENT_NODE(9)　　　　　　　　　　表示文档类型
  • Node.DOCUMENT_TYPE_NODE(10) // doctype 类型
  • Node.DOCUMENT_FRAGMENT_NODE(11)
  • Node.NOTATION_NODE(12)

其中常用的节点类型由 1,2,3,8,9,10。

Node类型的属性

  1. nodeType属性，用于节点类型检测
    var someNode = document.getElementById('test');
    if(someNode.nodeType == Node.ELEMENT_NODE){
        //通过与Node.ELEMENT_NODE 可以判断该节点类型 为元素节点
        // 由于ie8以下没有公开Node类型的构造函数，所以这种写法只兼容ie9+ 及其他浏览器
        alert('node is an element')
    }
最低0.47元/天 解锁文章
SevenBig
关注
专栏目录
JavaScript的DOM知识点总结
ccj_cmp的博客
08-13 776
JavaScript的DOM操作详解
DOM
忘川的博客
11-23 127
在介绍DOM之前，我们首先来看一下下面的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM第一次体验</title> </head> <body> <div></div...
JS DOM总结
一个减肥的小胖子
01-17 833
目录 DOM的定义 DOM树 DOM树的定义 为什么会是树形结构 根节点 节点对象 节点三大属性 DOM的操作流程 DOM查找    不需要查找可直接获取的元素     按HTML查找     按节点关系查找     按选择器查找      遍历节点 DOM查找总结 修改         内容         属性         样式 添加 删除 替换...
JavaScript之DOM总结
ditan20061218的博客
06-14 138
DOM （Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口），是一个能够让程序和脚本动态访问并且更新文档内容、结构及样式语言平台 。D（document），是web加载的网页文档；O（Object），我们熟知的对象，可以调用属性和方法；而M（Model）理解为网页文档的结构。 主要内容概括如下...
DOM总结
系统运维
08-05 138
DOM总结 跨浏览器开发 市场上的浏览器种类多的不计其数，它们的解释引擎各不相同，期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候，然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了，主要分为两种：1.userAgent字符串检测，2.对象检测；当然，也不能考虑所有的浏览器，我们需要按照客户需求来，如果可以确信浏览网站的用户都使用或大部分使...
react-router-dom V6 中文文档教程总结
热门推荐
xm1037782843的博客
10-21 1万+
react-router-dom v6 使用文档教程 react-router-dom
2024年前端最全react-router-dom V6 中文文档教程总结_reactrouter6中文文档(1)，从零开始系统化学前端
最新发布
2401_84619145的博客
05-06 1408
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】ter 可以直接嵌套 Router**这在之前是不行的需要在一个组件中再定义子路由。
JavaScript-DOM学习归纳总结
sen_03的博客
10-22 302
JavaScript-DOM学习归纳总结 现在所说的JavaScript包含了三个部分 ECMAScript：js的语法规范 DOM：操作网页的功能 BOM：操作浏览器的功能 DOM（Document Object Model文档对象模型）： 1.概念 DOM 是 W3C（万维网联盟）的标准。 （1）W3C DOM 标准被分为 3 个不同的部分： ① 核心 DOM - 针对任何结构化文档的标准模型 ② XML DOM - 针对 XML 文档的标准模型 ③ HTML DOM - 针对 HTML 文档的标准
Vue3中runtime-dom的实现-详细步骤
老司机的后备箱
06-24 1214
runtime-dom本质上没做什么，它只是封装了一些平台对应的代码，它封装好以后，内部去调用创建渲染器去进行一个渲染，那具体怎么渲染是内部去做的，内部runtime-core去根据你传进来的一些属性操作、事件操作和dom操作等等方法，把传进来元素生成的vnode虚拟节点，然后放进对应的容器中就可以了。所以runtime-dom跟平台有关，而runtime-core跟平台无关。...
JavaScript-in-the-Browser-DOM-and-Events-Fundamentals-Practice:学习新事物和练习
03-30
总结，学习JavaScript在浏览器中的DOM操作和事件处理是Web开发的基础。熟练掌握这些技能，可以让你创建出功能丰富、交互性强的网页应用。通过实践项目，不断练习和巩固，将理论知识转化为实际能力，是成为一名优秀...
JS DOM知识总结 全！！
weixin_46534854的博客
04-08 393
1 DOM 介绍 **MDN 文档对象模型手册：**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model 1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。 2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。 2 Node 节点 2.1 五大节点类型 document 文档节点 nodeType:9 element 元素
JavaScript DOM总结
weixin_44540247的博客
04-26 193
当网页被加载时，浏览器会创建页面的文档对象模型（DOM：Document Object Model）。通过HTML DOM可以访问到JavaScript HTML文档中所有的元素。HTML DOM被构造为对象的树，创建了一套完整体系，通过可编程性，JavaScript获得了能够操作动态改变HTML的能力。 一、 HTML HTML改变输出流 HTML输出流指的是当前格式是HTML数据格式，这部...
Beautifulsoup
qq_42413820的博客
06-20 310
文中示例均使用下面的文档：html_doc = """ &lt;html&gt;&lt;head&gt;&lt;title&gt;The Dormouse's story&lt;/title&gt;&lt;/head&gt; &lt;body&gt; &lt;p class="title"&gt;&lt;b&gt;The Dormo
DOM 总结（一）
03-16 135
 DOM 总结（一）      一，概念：      DOM 全称：Document Object Modle （文档目标模板），DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言. ...
JavaScriptDOM总结（有序整理）史上最全最详细（建议收藏）
编程教培一线讲师
04-09 1078
在学习JavaScript时,DOM和BOM都是重点内容 在学习加复习的情况下 理解了浅层内容 下面是展示 一：DOM简介 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。  文档：一个页面就是一个文档，DOM 中使用 document 表示  元素：页面中的所有标签都是元素，DOM 中使用 ele.
JS DOM 总结
dongsunxiadao的博客
03-02 238
DOM是“Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素。document:文档的意思，代表浏览器内部的最大的区域，代表整个的html文件。 我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐...
js DOM总结
baiqiangdoudou的博客
05-06 359
一、什么是DOM DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML ...
js-DOM总结
cjy082322的博客
05-30 268
DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。 DOM的分类 l    核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。 l    HTML DOM（元素对象）：针对HTML文档提供的专用的属性方法。 l    XML DOM：针对XML文档提供的专用的属性和方法。(就业班讲) l    CSS DOM：提供了操作CSS的属性
react-router-dom v6 添加路由
09-08
总结起来，通过使用React Router Dom V6的`<Routes>`和`<Route>`组件，可以轻松地添加路由路径和对应的组件。并且，通过`<Switch>`组件可以实现路由的排他性匹配。在需要进行导航操作时，可以使用`<Link>`组件或`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值