程序员经验分享-hwhale

暴打JavaScript语法之DOM基础一：节点详解和类型简单说明

2023-05-16

欢迎来到JavaScript频道🔅🔅🔅语法篇章总是这样冗杂而漫长，但是要坚持

  • 什么是"DOM"?💢
  • 节点⛳
    • 概念
    • 节点属性
  • 重要类型
    • Node类型
    • Document类型

🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞

什么是"DOM"?💢

D(👉🏼👉👉🏾文档)：也就是整个Web加载的网页文档
O(👉🏼👉👉🏾对象)：可以理解成类似window对象之类的东西，用于调用属性和方法，也就是"document"对象👨🏽‍🔬
M(👉🏼👉👉🏾模型)：网页"树形结构"(后续重点)

那么DOM也即是"文档对象模型",它是针对HTML和XML文档的一个API🧸，经过上面的描述，DOM其实是描绘了一个层次化的"节点树",DOM也是脱胎于动态HTML，我觉得也是学习JavaScript的一个很重要的原因，就是希望加上"动态效果"嘛，JavaScript的初衷就是增加页面的“互动性”那么DOM就是重点,DOM的作用就是将网页转为一个JavaScript对象，然后就可以使用JavaScript的很多不同的方法对网页进行操作，浏览器也会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构

以上就是DOM的片面解释，重点开始讲以下知识点，拿好好本本，点好收藏，我们开始吧

在这里插入图片描述

节点⛳

概念

上面讲到DOM可以将任何的HTML或者是XML描绘成一个由多层次节点构成的结构，那么这个"节点"也是分为很多不同类型，每个节点都有它自己的特点数据和方法，不同节点之间也和其他节点存在某种关系，这样节点之间的关系就构成了层次🔮🔮🔮，下面介绍一些概念：

🎽文档节点：文档节点只有一个子节点，也就是 元素
🎽文档元素：文档最外层元素，所有其他的元素都被包含其中，每个文档同样也只有一个文档元素，在所有常见的html页面中，文档元素始终都是元素啦💡💡💡
🎽在HTML中元素就是通过每个不同的元素节点来表示，那么每个节点的特性就通过特性节点表示，也被叫做属性节点

比如说：

在这里插入图片描述

这个简单的例子就可以表示为一个简单的层次结构，所以这个时候又引出“节点层次”这一概念🍦🍦，具体分析看下图：

在这里插入图片描述

再详细讲一下概念：

< p>是元素节点，hello world是文本节点，在head标签中，head是元素节点，title是其属性节点，Simple Page是文本节点，这些概念比较简单，就说明一下，总共有12种不同的节点类型，并且都对应着1到12的常数值，具体看👇👇👇

 元素节点            　　   Node.ELEMENT_NODE(1)
 属性节点            　　   Node.ATTRIBUTE_NODE(2)
 文本节点            　　   Node.TEXT_NODE(3)
 CDATA节点                 Node.CDATA_SECTION_NODE(4)
 实体引用名称节点           Node.ENTRY_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)
 文档片段节点        　　  Node.DOCUMENT_FRAGMENT_NODE(11)
 DTD声明节点                 Node.NOTATION_NODE(12)

//在标准浏览器下返回1，而在IE8-浏览器中好像会报错，提示Node未定义
console.log(Node.ELEMENT_NODE);//会返回1
//通过比较的方法，根据返回值可以确定节点的类型，这是非常常用的方法

更加具体的解释剩余的节点，可以这篇博客，我觉得写的很详细：点我点我
在这里插入图片描述

节点属性

一般的，节点一般有nodeType、nodeName、nodeValue三个基本属性，nodeName和nodeValue这两个属性的值完全取决于节点的类型，所以一般要先确定nodeType，以下为属性解释：

nodeType属性返回节点类型的常数值💨
nodeName属性返回节点的名字💨
nodeValue属性返回节点或者设置的值，默认格式为字符串💨

下面讲一些非常重要的属性，而后详细再讲这些属性的方法💨

重要类型

Node类型

这是DOM定义的Node接口，这个接口在JavaScript中作为Node类型实现，在上面的节点部分就可以看到这个Node，因为所有的节点都继承自Node类型，因此所有的节点类型都共享着相同的属性和方法

Document类型

提示：JavaScript是通过Document类型来表示文档的，在常见的大多数浏览器中，document的对象就是HTMLDocument的一个实例,代表着整个HTML页面，还有一点就是，document对象是window对象的一个属性，所以其具有全局的概念，可以被作为全局对象来访问，这是个非常重要的特殊类型
在这里插入图片描述

具体这两个类型对应的方法和各种知识就在下一篇博客说明啦，下期见

谁还没点赞和关注的？!
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

暴打JavaScript语法之DOM基础一：节点详解和类型简单说明 的相关文章

随机推荐

  • 测试必备技能之C语言文件函数（超级全能篇）——FILE函数

    之前出过的文件FILE函数的小白篇 xff0c 现在出一个全面一些的 以下讲解直接分为函数原型 43 函数作用 43 测试用例 让大家真真正正的理解和感受这几个FILE函数的作用 二话不说 xff0c 开冲 xff01 额 先来个小表格 x

  • Logisim之——1位比较器设计

    任务描述 本关任务 xff1a 在Logisim中完成1位比较器电路的绘制并完成测试 相关知识 在数字电路中 xff0c 经常需要对两个位数相同的二进制数进行比较 xff0c 以判断它们的相对大小或者是否相等 xff0c 用来实现这一功能的

  • Logisim之——2位比较器

    任务描述 本关任务 xff1a 在Logisim中完成2位比较器电路的绘制并完成测试 相关知识 在数字电路中 xff0c 经常需要对两个位数相同的二进制数进行比较 xff0c 以判断它们的相对大小或者是否相等 xff0c 用来实现这一功能的

  • Ｌｏｇｉｓｉｍ之——１６位无符号比较器

    任务描述 本关任务 xff1a 利用在第3关中已经设计完成的4位无符号比较器 xff08 4个 xff09 级联构建16位无符号比较器 相关知识 比较器级联扩展的基本原理 4个4位比较器的比较结果记为 xff1a Li1 xff08 大 x

  • 夏季来临啦，快来换浏览器界面吧——动画背景版本（二）

    炎炎夏日来袭啦 xff0c 你的浏览器界面也换成夏天的吧 xff01 上效果图啦啦啦 依旧是秉承简约的风格浏览器 xff0c 底部采用列表做的动画 xff0c 这里做部分代码解释 xff0c 具体代码在下方 xff0c 需要的朋友可以自行下

  • 网络层习题专项一“子网划分”及“聚合“习题（超强个人理解）

    网络层习题专项 有关最大聚合问题划分子网问题1 普通 的划分 反问 你自己2 等长子网划分问题 题目来自于 计算机网络基础第7版 xff08 谢希仁 编著 xff09 以及我本人结合自身想法题目 网络上一些经典题目 xff08 算是自己的一

  • PyGame “超级玛丽”游戏专题开篇——“变态超级玛丽”的诞生

    欢迎来到PyGame频道 x1f431 x1f453 开篇介绍源码获取 开篇介绍 哈喽 xff0c 又是我 xff0c 一个很久又不更新博客的苦逼大二学生 xff0c 哈哈哈哈哈前段时间学习了PyGame xff0c 自己也做了很多游戏啦

  • 2个74151实现16位数据选择器以及在Multisim的演示

    不说废话了 xff0c 开冲开冲 x1f431 x1f680 74151是八位数据选择器 xff0c 其实实现起来也很简单 xff0c 主要就是最高位的问题嘛 xff0c 比如说 0000 那直接都用不上2个74151 xff0c 像111

  • (无敌解释)Python 字符串、列表、字典之间的相互转换方法总结

    欢迎来到Python频道 x1f933 列表转字符串方法方法一方法二 字符串转列表方法一 xff1a 刚好 长得一样 方法二 xff1a 将字符串中每个字符转成列表中的值方法三 xff1a 分割 列表转字典方法一 xff1a 用zip 方法

  • 华为云 OBS 海思交叉编译

    https github com huaweicloud huaweicloud sdk c obs blob master Readme txt 内描述如下 xff1a 1 第三方依赖 xff1a openssl 1 0 2r zlib

  • 超级玛丽封面完工制作，谁说新手不能学哒？？！

    超级玛丽之工具 环境的搭建 所用参考文档 x1f40d 项目搭建的目录列表 x1f98b 本次博客内容主要呈现的效果图展示 x1f36c 文件代码分析 x1f93e tools py内容和说明 x1f63c 说明代码 setup py内容和

  • 计算机网络期末实验考试题目+总结(用的是CISCO软件~~)

    欢迎来到计算机网络频道 x1f987 前言 x1f973 实验题目 x1f63c 实验拓扑图 x1f648 实验分析交换机S3配置IP地址和默认网关信息 xff1a DHCP Server的配置 xff1a PC5 PC6 xff1a 交换

  • 可爱滴css滑动导航条

    欢迎来到HTML频道 x1f408 效果代码分析 今天看到了一个还蛮可爱的滑动导航条 xff0c 在这里分享一下做法 xff0c 也同时感谢一下原作者 xff0c 写的特别好 x1f60e 效果 这里没有录动态的了 xff0c 大家脑补一下

  • 暴打JavaScript语法之语法糖第一弹

    欢迎来到JavaScript频道 x1f407 基本语句 statement 43 注释 x1f3cc 变量 xff08 量量子鲜森 xff09 x1f9d7 var的小tips关键字和保留字 x1f9dc 数据类型 x1f3ca type

  • CSS之可爱的伪元素::maker详解

    欢迎来到HTML部件频道 x1f9ae 这里是x魔王 xff0c 今天分享一个非常有用的部件以及它的用处 xff0c 先来看看它的效果吧 点击是会变图案滴 xff0c 那么这个的做法就得益于CSS 伪元素 marker 就像这个大家一定熟悉

  • CSS之帅气朋克字体效果以及“故障风”按钮的实现（图片+按钮）

    欢迎来到HTML部件频道 x1f430 前言 x1f4eb 今天来实现一个帅气的朋克效果 xff0c 这个效果是我很早之前就想出的一篇博客 xff0c 今天补上 xff0c 先来欣赏一下朋克的效果感 x1f60b 不知道各位看官感觉如何呢

  • jQuery+风琴拉伸效果唯美少女滴风格菜单的做法

    欢迎来到HTML部件频道 x1f49e 今天记录一款非常常见的菜单做法 xff0c 具体效果看下图 xff1a x1f9d0 好啦如果说对今天的分享感兴趣的话就继续往下看吧 x1f4a8 lt doctype html gt lt html

  • 暴打javascript语法之变量详解

    欢迎来到javascript频道 x1f435 变量讨论全局与局部基本类型与引用类型动态属性关于复制问题传递的是基本类型传递的是引用类型小栗子 对象内建对象宿主对象 变量讨论 全局与局部 当我们在讨论一个变量的时候 xff0c 最重要的就是

  • 还不会时间复杂度的计算？？你该补补了！

    大家好 xff0c 这里是数据结构频道 x1f366 为什么需要讨论复杂度 xff1f xff1f x1f9d0 时间复杂度 x1f511 插播一下类型 x1f35c 加法规则 x1f363 乘法规则 x1f961 我的总结 x1f54a

  • 暴打JavaScript语法之DOM基础一：节点详解和类型简单说明

    欢迎来到JavaScript频道 x1f505 x1f505 x1f505 语法篇章总是这样冗杂而漫长 xff0c 但是要坚持 什么是 34 DOM 34 x1f4a2 节点 概念节点属性 重要类型Node类型Document类型 x1f3

热门标签