DOM可以说是把文档当成一种树状结构，这种结构被称为节点树，JavaScript脚本可以通过节点树访问所有节点，可是执行修改或者是删除它们的内容，同时也可以创建新的节点。

节点之间的关系是有上下级别的父子关系和相邻之间的兄弟关系。

1、在节点树中，最顶端的节点为根节点。

2、除了根节点外，所有的节点都有一个父节点。

3、节点可以包含数量的子节点。

4、而作为树的最末端叶子是没有子节点的。

5、同级之间的兄弟节点是拥有相同的父节点的。

如下来分析一下节点之间的关系

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <p>你好，树形节点</p>

        <ul>

            <li>兄弟关系一</li>

            <li>兄弟关系二</li>

        </ul>

    </body>

</html>

在上面的HTML中，先是!DOCTYPE文档类型声明，之后就是html元素了。html元素既没有父辈元素也没有兄弟元素，所以html被称为整个文档的根元素，可以代表整个文档。由html元素派生下的head元素和body元素是html的子元素，它们是属于同级关系的，所以被称之为兄弟元素，并且它们拥有相同的父元素html。与此同时它们又是其他元素的父元素，如meta元素、title元素的父元素是head元素，而作为叶子的meat元素和title元素是没有子元素的。

DOM---节点关系的更多相关文章

  1. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  2. DOM节点关系,节点关系

    DOM节点关系 定义 节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱. 属性 [nodeType.nodeName.nodeValue] 每个节点都有这三个属性,且节点类型不同, ...

  3. jacascript DOM节点——节点关系与操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

  4. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  5. javascript DOM 节点 第18节

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

  6. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  7. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  8. DOM访问关系（父节点 子节点）

    把下面的知识点掌握了,可以做一下下面的案例,都是工作中常用的,很有用 知识点   1.带Eleent和不带区别     a)带Element的获取的是元素节点     b)不带Element的获取文本 ...

  9. 深入学习jQuery节点关系

    × 目录 [1]后代元素 [2]祖先元素 [3]兄弟元素 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形 ...

  10. 通过DOM节点操作来获取表单信息

    这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...

随机推荐

  1. 在DIV中如何控制字的位置?

    想到实现字体在div中处于上图(右下角)的位置的话,只需在字体样式上面加上这行代码就好了:style='margin-top:120px;height:20px;float:right;text-al ...

  2. CentOS 7 中 Systemd详解

    一.systemd的由来 Linux一直以来采用init进程但是init有两个缺点: 1.启动时间长.Init进程是串行启动,只有前一个进程启动完,才会启动下一个进程.(这也是CentOS5的主要特征 ...

  3. Java Mybatis实现主从同步

    import org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource; public class DynamicDat ...

  4. WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!问题

    ➜ web_develop git:(master) ✗ ssh root@172.16.146.143@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  5. Centos系统中彻底删除Mysql数据库

    步骤: 1.输入命令查询系统中已安装的mysql. rpm -qa |grep -i mysql 2.逐个卸载mysql. yum remove 系统显示已安装的mysql 比如:yum remove ...

  6. SSH项目需要的所有架包

    原地址:https://blog.csdn.net/qq_35816104/article/details/54346182   SSH框架:struts2 hibernate spring 该三大框 ...

  7. ECMAScript6 入门-let与const命令

    块级作用域 1:let命令声明的变量只在let命令所在的代码块有效--简而言之 大括号既是代码块,也就是说存在块级作用域了. { let a =10; var b =1; } a // Referen ...

  8. js事件循环机制 （Event Loop）

    一.JavaScript是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决 ...

  9. using eclipse to write c programe

    参考:http://developer.51cto.com/art/200906/126363.htm http://www.cnblogs.com/feisky/archive/2010/03/21 ...

  10. python yield 和 yield from用法总结

    #例1. 简单输出斐波那契數列前 N 个数#缺点:该函数可复用性较差,因为 fab 函数返回 None,其他函数无法获得该函数生成的数列#要提高 fab 函数的可复用性,最好不要直接打印出数列,而是返 ...