JS-DOM总结

最新推荐文章于 2022-07-07 19:33:36 发布
VIP文章 最新推荐文章于 2022-07-07 19:33:36 发布
阅读量416 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itSeven7/article/details/78404149
版权

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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Dom总结
weixin_52140964的博客
10-06 251
对DOM的总结
JavaScript-DOM学习归纳总结
sen_03的博客
10-22 253
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 文档的标准
JS 之 DOM详解
玄鱼殇
07-07 6655
dom操作博大精深，源远流长～
JavaScriptDOM总结（有序整理）史上最全最详细（建议收藏）
编程教培一线讲师
04-09 967
在学习JavaScript时,DOM和BOM都是重点内容 在学习加复习的情况下 理解了浅层内容 下面是展示 一：DOM简介 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。  文档：一个页面就是一个文档，DOM 中使用 document 表示  元素：页面中的所有标签都是元素，DOM 中使用 ele.
js基础学习之--DOM总结
freesky的专栏
07-23 836
DOM总结 JavaScript组成部分以及关系图     DOM概念 : DOM是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如HTML和XML）解析成一系列的节点（对象），再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的（比如增删内容）。
DOM（总结）
ksx2333的博客
03-29 1716
文章目录1 初识DOM2 获取DOM元素3 操作属性节点4 操作class属性5 操作文本节点 1 初识DOM DOM: Document Object Model 文档对象模型 文档：html文档。 对象：DOM元素对象 html元素对象 模型：树模型 html标签就形成一课树 DOM中有一套操作页面元素的属性和方法。 <div class="box">我是一个div</div>
Beautifulsoup
qq_42413820的博客
06-20 279
文中示例均使用下面的文档：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
JavaScript DOM 学习总结(五)
10-23
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
zengxiaodai#Web#03-DOM事件的总结1
07-25
前言要学习事件的基础内容，请看先本人的这篇基础文章：JavaScript基础：事件对象Event和冒泡知识难度不大，只是大家需要系统地学习。知识点主要包括以下几
Javascript基础知识（三）BOM，DOM总结
10-25
本文是基础知识系列的第三篇文章，主要介绍javascript中BOM,DOM的一些心得总结，非常实用，有需要的朋友可以参考下
JavaScript DOM节点操作方法总结
10-21
下面小编就为大家带来一篇JavaScript DOM节点操作方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
DOM知识总结
12-02
史上最详细的DOM笔记，最全DOM操作详解。
DOM的常见操作API
IT__learning的博客
02-06 992
DOM的常见操作API 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。 ...
DOM学习总结
Rewind_lv的博客
05-27 362
一、DOM简介 DOM定义 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式 DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表 DOM把
JS DOM知识总结 全！！
weixin_46534854的博客
04-08 348
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 元素
js DOM总结
baiqiangdoudou的博客
05-06 290
一、什么是DOM DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML ...
DOM 知识点总结
m0_67256600的博客
06-29 282
DOM DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作文档: 文档就是表示整个html网页文档 对象：对象就是表示将网页中的每一个部分都转换为了一个对象 模型：用模型来表示对象之间的关系，这样方便我们获取对象 常用节点 节点的类型：Document, DocunentType,Element,Text,Comment,D
JS DOM总结
一个减肥的小胖子
01-17 536
目录 DOM的定义 DOM树 DOM树的定义 为什么会是树形结构 根节点 节点对象 节点三大属性 DOM的操作流程 DOM查找    不需要查找可直接获取的元素     按HTML查找     按节点关系查找     按选择器查找      遍历节点 DOM查找总结 修改         内容         属性         样式 添加 删除 替换...
JavaScript中操作DOM对象重点总结
妖精小狗的博客
08-31 6772
DOM： Document Object Model（文档对象模型）   节点和节点关系： 访问节点： 使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( ) 根据层次关系访问节点 节点的属性： 属性名称 描述 ...
react-router-dom v6 添加路由
最新发布
09-08
### 回答1： 要添加路由，首先需要在react-router-dom v6中导入BrowserRouter和Routes组件。然后在Routes组件中添加Route组件，并指定path和component属性，用于指定路由路径和对应的组件。例如： ``` import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter> ); } ``` 在上面的示例中，当用户访问根路径时，会渲染Home组件，当访问/about路径时，会渲染About组件。需要注意的是，在v6中，使用element属性来指定要渲染的组件。 ### 回答2： 在使用React的项目中添加React Router Dom V6的路由非常简单。首先，确保项目中已经安装了React和React Router Dom V6的依赖。 然后，在项目的入口文件中，导入`BrowserRouter`组件，并在`ReactDOM.render`方法中将根组件包装在`<BrowserRouter></BrowserRouter>`标签中。 接下来，在根组件中，导入`Routes`和`Route`组件，分别用于定义路由规则和具体的路由路径。 使用`Routes`组件，可以在其内部使用多个`Route`组件来定义不同的路由。每个`Route`都包含两个属性：`path`和`element`。`path`表示路由的路径，`element`表示对应的组件。 通过这种方式，可以轻松地添加不同路径的路由。例如，可以创建一个`Home`组件，并在路由中添加`path="/" element={<Home />}`。这样，当用户访问根路径时，将加载`Home`组件。 除了基本的路径匹配，React Router Dom V6还引入了`<Switch>`组件用于路由的排他性匹配。在`Switch`组件内部，可以使用`<Route>`组件来定义不同的路由。当匹配到第一个路由后，就不会继续匹配后面的路由。 此外，React Router Dom V6还提供了一些其他的组件和钩子，如`<Link>`组件用于创建链接，`useNavigate`钩子用于进行编程方式的导航等。 总结起来，通过使用React Router Dom V6的`<Routes>`和`<Route>`组件，可以轻松地添加路由路径和对应的组件。并且，通过`<Switch>`组件可以实现路由的排他性匹配。在需要进行导航操作时，可以使用`<Link>`组件或`useNavigate`钩子。 ### 回答3： 在 React 中使用 react-router-dom v6 添加路由非常简单。以下是一个简单的演示： 首先，确保已经安装了 react-router-dom v6： ```shell npm install react-router-dom@next ``` 然后，在你的 App.js（或其他根组件）中导入所需的库和组件： ```jsx import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; import NotFound from './NotFound'; const App = () => { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> ); }; export default App; ``` 这里我们使用了 `<BrowserRouter>` 组件来为应用程序提供路由功能，然后使用 `<Routes>` 和 `<Route>` 组件来设置路由规则。 在 `<Routes>` 中，我们可以使用 `<Route>` 组件来定义具体的路由路径和对应的组件。`<Route>` 组件的 `path` 属性用于定义路由路径，`element` 属性用于指定该路径对应的组件。 在上面的例子中，我们将根路径 `/` 对应的组件设置为 `Home` 组件，路径 `/about` 对应的组件设置为 `About` 组件，而路径 `*` 对应的组件设置为 `NotFound` 组件（即未匹配到任何路由时显示的组件）。 当我们访问应用程序的不同路径时，react-router-dom v6 会根据路径自动加载相应的组件进行渲染。 希望这个简单的例子能够帮助你理解如何使用 react-router-dom v6 添加路由。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值