简介

  • 节点(node)是一个网络术语,它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。
  • 在DOM里,文档是由节点构成的集合,此时的节点是文档树上的树枝和树叶。

分类

DOM中包含许多不同类型的节点,下面先介绍其中三种:元素节点、文本节点和属性节点。

1. 元素节点

解释:DOM的原子是元素节点。

特征

  • 元素的名字就是标签的名字。example:文本段落元素的名字是“p”。
  • 元素可以包含其他的元素。example:在html文件中,\元素是节点树的根元素,其他元素,例如head、body等,都包含在根元素中。

2.文本节点

解释:文本节点总是包含在元素节点内部,其内容就是文本。但不能说所有的元素节点都包含有文本节点。

例子

<p>This is an example.</p>

在上面的<p>元素中,“This is an example.”就是一个文本节点。

3.属性节点

解释:属性节点用来对元素做出更具体的描述。

例子

</p><p title="an example title">This is an example.</p>

在上面的<p>元素中,我们可以利用title属性来描述这个</p>

元素。

在DOM中,title="an example title"就是一个属性节点。

注意

  • 属性节点总是被放在起始标签里,即属性节点总是被包含在元素节点中。

  • 但并非所有的元素都包含着属性,但所有的属性都被元素包含。

参考书籍:《JavaScript DOM编程艺术》

JavaScript-DOM-节点简介与分类的更多相关文章

  1. javascript DOM 节点 第18节

    <html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...

  2. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  3. JavaScript DOM节点和文档类型

    以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  5. javascript DOM节点

    获得子节点方式: 1.将文本内容也当成节点 childNodes firstChild lastChild 2.获得标签为内容的节点 children firstElementChild lastEl ...

  6. console.time 简单分析javascript动态加入Dom节点的性能

    Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...

  7. JavaScript获取HTML DOM节点元素详解(转)

    在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...

  8. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

  9. JavaScript学习笔记(三)——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  10. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

随机推荐

  1. mysql日期时间处理

      获得当前周的周一到周日 select subdate(curdate(),date_format(curdate(),'%w')-1)//获取当前日期在本周的周一 select subdate(c ...

  2. 如果面试官问你 JVM,额外回答逃逸分析技术会让你加分!

    我是陈皮,一个在互联网 Coding 的 ITer,微信搜索「陈皮的JavaLib」第一时间阅读最新文章. 引言 我在面试别人的过程中,JVM 内存模型我几乎必问,虽然有人说问这些就是面试造航母,工作 ...

  3. 【网络IO系列】IO的五种模型,BIO、NIO、AIO、IO多路复用、 信号驱动IO

    前言 在上一篇文章中,我们了解了操作系统中内核程序和用户程序之间的区别和联系,还提到了内核空间和用户空间,当我们需要读取一条数据的时候,首先需要发请求告诉内核,我需要什么数据,等内核准备好数据之后 , ...

  4. Github Copilot 结合python的使用

    之前提交的github copilot技术预览版申请,今天收到准入邮件,于是安上试一试这个准备把我送去电子厂上班的copy a lot ? 官网及申请地址:https://copilot.github ...

  5. 家庭账本开发day04

    对之前的构架进行修改,对成员类新加属性余额,在进行账单的新增时 ,对余额进行相应的修改.并且对账单类加入属性:id方便之后的查询和 删除操作

  6. final修饰符(6)-final类

    final修饰的类不可以有子类,例如:java.lang.Math类就是一个final类,它不可以有子类 子类继承父类,可以访问父类的内部数据,可以重写父类的方法来改变父类方法的实现细节,可能导致不安 ...

  7. MySQL中的redo log和undo log

    MySQL中的redo log和undo log MySQL日志系统中最重要的日志为重做日志redo log和归档日志bin log,后者为MySQL Server层的日志,前者为InnoDB存储引擎 ...

  8. Linux文件浏览(less、more、head、tail)以及vim编辑器命令总结

    结合小编学习实践,整理了Linux下查看内容(less.more.head.tail)和编辑内容(vim)的部分基础命令解析: 1.less命令 分页浏览内容,如果在shell命令行下按回车键,则一点 ...

  9. 最大流最小割——bzoj1001狼抓兔子,洛谷P2598

    前置知识 平面图 平面图就是平面上任意边都不相交的图.(自己瞎画的不算XD) 对偶图 比如说这个图,我们发现平面图肯定会把平面分成不同的区域(感觉像拓扑图),并把这些区域当做每个点(不被包围的区域独自 ...

  10. 第三十一篇 -- 理一下.h和.cpp的关系

    今天突然想到一个问题,我们平时写代码会将代码进行分类,写到不同的cpp里,然后要用到那个类里面的函数,就直接include .h文件就好了.然后今天就在想,.h里面都是一些声明,它是怎么链接到.cpp ...