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. 【原创】大数据基础之Mesos（1）简介、安装、使用

    Mesos 1.7.1 官方:http://mesos.apache.org/ 一 简介 Program against your datacenter like it’s a single pool ...

  2. JAVA 遍历数组

    package Code411;//遍历数组public class CodeArray { public static void main(String[] args) { int[] array ...

  3. mysql根据分组和条件查询以后如何统计记录的条数

    1.子查询,查询出的数据随便起一个别名,然后根据分组和条件查询出的数据,作为一个具有一列的一个表,然后外面的查询查询这个数据表的这一列的总数,即可. SELECT COUNT( * ) FROM ( ...

  4. IIS 支持 m3u8

    加上俩 MIME 类型就可以了 <mimeMap fileExtension=".m3u8" mimeType="application/x-mpegURL&quo ...

  5. 视频转码成mp4格式，添加关键帧，添加元数据，把元数据放在第一帧，可拖动

    作者测试是在windows下使用,所以下载的页面地址是: http://ffmpeg.zeranoe.com/builds/点击页面上的Download FFmpeg git-738ebb4 64-b ...

  6. Cordova IOT Lesson002

    hello index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  7. Codeforces 755F PolandBall and Gifts bitset + 二进制优化多重背包

    PolandBall and Gifts 转换成置换群后, 对于最大值我们很好处理. 对于最小值, 只跟若干个圈能否刚好组能 k 有关. 最直观的想法就是bitset优化背包, 直接搞肯定T掉. 我们 ...

  8. 蓝桥杯 全球变暖(dfs)

    标题:全球变暖 [题目描述]你有一张某海域NxN像素的照片,"."表示海洋."#"表示陆地,如下所示: 其中"上下左右"四个方向上连在一起的 ...

  9. Tomcat 本地运行正常，服务器部署后乱码问题

    Tomcat 在本地运行项目没啥问题,可是部署到服务器后就会发现有乱码的问题,这问题还是一半一半的,有些有,有些没有,这不是接收数据的时候会出现的乱码,是后台管理的页面中文乱码,我也是醉了, 把解决方 ...

  10. MyBatis（三）MyBatis的增删改查

    (1)接口中编写方法 public Emp getEmp(Integer id); public void addEmp(Emp emp); public void deleteEmp(Integer ...