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. C# 在webapi项目中配置Swagger

    这篇文章已经过时了,新的主要配置一个就行了,请参照:http://www.cnblogs.com/alunchen/p/7397396.html Swagger是非常流行用于编辑api给前端同事用.或 ...

  2. react - web + webpack4 从0构建

    https://www.jianshu.com/p/91a4214b913b  文章https://github.com/Liao123/react-web 可运行的代码 dev分支

  3. elementui+vue修改elementUi默认样式不生效

    重写,覆盖都不行, ! important  也不行. 原因是 在style标签加了 scoped 的原因.

  4. 在CentOS 7上部署Ghost博客

    作者:waringid 一.简介 跟静态博客不同的是,Ghost 这种轻量级的动态博客,有一个管理后台,可以直接写作和管理博客.本质上,跟 WordPress 是相通的,只是 Ghost 搭建在 No ...

  5. 八.nginx网站服务实践应用

    期中集群架构-第八章-期中架构nginx章节====================================================================== 01. web ...

  6. 上传jar包到maven中央仓库过程中遇到的一些问题总结!

    网上有很多相关教程, 我按步骤一步步走下来, 都还算顺利, 简单列举一下步骤以及其中需要注意的几个点(不详细, 不适合当教程) 第一步: 到https://issues.sonatype.org/se ...

  7. 集腋成裘-08-ECharts -简介-01

    目标:让数据说话. 大数据时代的到来以及有效应用,大幅度提升了企业的管理能力.决策科学化与可执行性水平,推动传统决策方式朝着数据驱动转型.可视化数据分析对决策者产生的意义将在事前预测.事中感知以及事后 ...

  8. 饮冰三年-人工智能-Python-24 Django ORM增删改查

    一:首先使用默认的sqlite3创建表 1:现在在models.py中添加表模型 from django.db import models # Create your models here. cla ...

  9. ansible的tests

    Ansible的tests : 路径 /usr/lib/python2.7/site-packages/ansible/plugins/test core.py # failure testing ' ...

  10. net core体系-web应用程序-4asp.net core2.0 项目实战（任务管理系统）-2项目搭建

    系统要求 首先建议采用 Windows 10 专业版/企业版/教育版,且必须是64位操作系统,原因是docker装起来比较方便,Win7装起来比较麻烦,且不确定是否有其他问题(自己没有实践过) 其次W ...