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. HDR拍照

    HDR 拍照:        (High Dynamic Range Imaging)高动态范围成像,是用来实现比普通数字图像技术更大曝光动态范围(即更大的明暗差别)的一组技术.高动态范围成像的目的就 ...

  2. 【原创】大数据基础之Hive（1）Hive SQL执行过程之代码流程

    hive 2.1 hive执行sql有两种方式: 执行hive命令,又细分为hive -e,hive -f,hive交互式: 执行beeline命令,beeline会连接远程thrift server ...

  3. ubuntu 16.04系统下解决MySQL 5.7版本的root用户重置密码问题

    最近在ubuntu系统上安装了MySQL,但是安装时没有提示输入root用户密码,在网上找了一天解决方案,试图修改root用户下的登入密码,但是网上的帖子都不凑效,最后终于改成功了,因此记下来以供有同 ...

  4. js定义数组集合

    简单描述:最近脑子有点抽,js要用到数组,竟然傻傻的写了 var [] str = .简直是糟糕的不要不要的 //js代码var str = [];var str =new Array(); 啥也不说 ...

  5. zt 正则

    http://deerchao.net/tutorials/regex/regex.htm     正则表达式30分钟入门教程 版本:v2.3.5 (2017-6-12) 作者:deerchao 转载 ...

  6. Java组合模式

    定义:将对象组合成树形结构以表示  部分--整体的层次结构 组合模式使客户端对单个对象和组合对象保持一致的方式处理 类型:结构型 优点: 1.清楚地定义分层次的复杂对象,表示对象的全部去或部分层次 2 ...

  7. module.exports与exports

    API文档是枯燥的,下面本人收集了一些论坛经常有人疑问和开源代码中经常遇到的案例供大家研究一下. module.exports与exports的区别 每一个node.js执行文件,都自动创建一个mod ...

  8. C#学习-接口的成员

    在接口中定义方法不能添加任何访问修饰符,因为接口中的方法是默认为public,如果显式地指定了修饰符,则会出现编译时错误. 定义玩接口之后,如果有类想继承该接口,则它必须显示接口中定义的所有方法. 在 ...

  9. Python-uiautomator使用说明文档

    https://github.com/xiaocong/uiautomator 这个Python库是基于Android自带的uiautomator测试框架的一个python封包.适用于Android ...

  10. Oracle做insert或者update时未提交事务导致表锁定解决办法

    //查看被锁定表有几个 select object_name,machine,s.sid,s.serial# from v$locked_object l,dba_objects o ,v$sessi ...