根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

获取某个元素下的第一个节点:firstElementChild
获取某个元素下的最后一个节点:lastElementChild

parentNode:查找某个元素的父节点。

找到某个元素的下个兄弟节点:nextElementSibling
找到某个元素的上个兄弟节点:previousElementSibling

HTML DOM querySelector() 方法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

DOM追加笔记的更多相关文章

  1. javascript dom追加内容的例子

    javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  2. DOM&BOM笔记

    day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...

  3. DOM学习笔记--入门1

    HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 首先节点有很多种,不仅仅HTML元素是节点,尤其 要注意文本节点的存在. 根据 W3C 的 HTML DOM 标准,HTML ...

  4. HTML DOM 学习笔记

    一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准二.DOM节点1.分类整个文档是一个文档节点每个HTML ...

  5. 【javascript dom读书笔记】 第九章 CSS-DOM

    用dom设置样式 element.style.property = value 何时用dom脚本设置样式 作者写到:绝大多数的现代浏览器,虽然对css伪类的支持不是很完整,但是对dom都有良好的支持, ...

  6. Dom学习笔记

    今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...

  7. JS DOM学习笔记

    1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...

  8. Dom学习笔记-(一)

    一.概述 DOM(文档对象模型)是针对HTML和XML文档的一个API,其脱胎于DHTML. DOM可以将任意HTML和XML文档描绘成一个由多层节点构成的结构. 每一个文档包含一个根节点-文档节点, ...

  9. BOM、DOM学习笔记——JavaScript

    1.BOM的概述    browser object modal :浏览器对象模型.    浏览器对象:window对象.    Window 对象会在 <body> 或 <fram ...

随机推荐

  1. [UE4]记录瞬移目标点

    1.判定射线是否击中一个物体:LineTraceByChannel的Return Value返回值 2.击中的目标点:LineTraceByChannel.Out Hit.Location,如图提示文 ...

  2. MySQL架构之 主从+ProxySQL实现读写分离

    准备服务器: docker run -d --privileged -v `pwd`/mysql_data:/data -p 3001:3306 --name mysql5-master --host ...

  3. 刘志梅201771010115.《面向对象程序设计(java)》第二周学习总结

    实验二 Java基本程序设计(1) 实验时间 2018-9-6 第一部分:理论知识学习 3.1一个简单的Java应用程序 关键字public称为访问修饰符,这些修饰符用于控制程序的其他部分对这段代码的 ...

  4. win10环境下Android studio安装教程----亲测可用

    这段时间学习了一下Android的基本开发,发现Google已经停止了对eclipse的支持,并开发了自己的Android开发工具--Android Studio,于是想安装一下Android Stu ...

  5. BZOJ 4584 luogu P3643: [Apio2016]赛艇

    4584: [Apio2016]赛艇 Time Limit: 70 Sec  Memory Limit: 256 MB[Submit][Status][Discuss] Description 在首尔 ...

  6. laravel中消息通知功能

    以laravel5.5为例子,这个功能laravel自带的有: 1.生成表文件的migration文件,再migrate一下在数据库里生成表.命令为:php artisan notifications ...

  7. [Unity优化]UI优化(二):Mask组件分析

    参考链接: https://www.sohu.com/a/211665096_99940808 1.Mask组件实现原理 使用模板测试,一方面使Mask对象所在区域的模板缓冲值置为1,另一方面使被Ma ...

  8. Oracle不能并行直接添加主键的方法:先建唯一索引后建主键

    环境:Oracle 11.2.0.3 需求:生产一张表由于前期设计不当,没有主键.现需要添加主键,数据量很大,想并行建立. 1.直接添加,提示ora-3001:未实施的功能;只能单线程建立主键 SQL ...

  9. nginx+python+windows 开始

    参考文章:http://www.testwo.com/article/311 参考如上文章基本能够完成hello world示例,我来记录下自己操作步骤及不同点,用以备忘,如果能帮助到其他人更好. 以 ...

  10. Xeon Phi 《协处理器高性能编程指南》随书代码整理 part 2

    ▶ 第四章,逐步优化了一个三维卷积计算的过程 ● 基准代码 #include <stdio.h> #include <stdlib.h> #include <string ...