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. KNN与K-Means的区别

    KNN(K-Nearest Neighbor)介绍 Wikipedia上的 KNN词条 中有一个比较经典的图如下: KNN的算法过程是是这样的: 从上图中我们可以看到,图中的数据集是良好的数据,即都打 ...

  2. redis-string操作

    操作之String操作 String操作,redis中的String在在内存中按照一个name对应一个value来存储.如图: set(name, value,ex=None,px=None,nx=F ...

  3. 文本处理三剑客之awk（No.1）

    示例1:只查看test.txt文件内的第3到第7行的内容 awk '{if(NR>=3 && NR<=7) print $0}' test.txt #其中的$0是输出整个行 ...

  4. Python与R的区别和联系

    转自:http://bbs.pinggu.org/thread-3078817-1-1.html 有人说Python和R的区别是显而易见的,因为R是针对统计的,python是给程序员设计的,其实这话对 ...

  5. python 用xlwt包把数据导出到excel表中

    def write_excel(): f = xlwt.Workbook() #创建工作簿 ''' 创建第一个sheet: sheet1 ''' sheet1 = f.add_sheet(u'shee ...

  6. Eclipse中代码字体背景变红/变黄/变绿

    如图所示:运行之后,突然这样.到底是什么原因导致的呢? : 经过查找资料可知:因为Eclipse中有覆盖代码功能 (绿色表示代码被执行到,红色表示代码没有被执行到,黄色表示代码部分执行到) 怎么解决这 ...

  7. websocket-heartbeat-js心跳检测库正式发布

    前言: 两年前写了一篇websocket心跳的博客——初探和实现websocket心跳重连.  阅读量一直比较大,加上最近考虑写一个自己的npm包,因此就完成了一个websocket心跳的检测库.在这 ...

  8. CodeForces - 1025C 字符串处理，画一个圆。。。

    题目链接: https://vjudge.net/problem/1810469/origin 题目大意: 给你一个字符串,中间切一刀,左右两边均反转,然后右边的串拼接到左边上. 思路: 比如  aa ...

  9. django——中间件

    1.中间件概念 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影响 ...

  10. 将ActiveX打包成CAB发布的注意事项

    1.在实现ActiveX组件时,注意VS必须使用管理员身份运行,否则会提示不成功 2.在解决方案中添加一个安装项目 a.在View中点击文件系统,添加对ActiveX项目的输出 b.注册表HKEY_C ...