根据 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. 用网站把图标做成iconFont文件引用

    1,把psd文件另存为eps文件(ai能打开的格式),前提图标有路径, 2,用ai打开eps文件 3,新建一个空白文件100*100,然后把图标复制进来,等比拉宽至最大化 4,如果图标有蒙版,就点击图 ...

  2. Web项目中得到访问者的真实ip

    Web项目中得到访问者的真实ip 描述:最近要实现个功能是要记录管理员登录的真实ip,但在项目中如果直接使用request.getRemoteAddr()获得ip的话,获得的可能不是真实ip,是因为使 ...

  3. centos关闭邮件提醒

    解决:you have mail in /var/spool/mail/root 提示   echo "unset MAILCHECK">> /etc/profile; ...

  4. Android 开发 框架系列 Android-Universal-Image-Loader 图片加载使用demo

    Android-Universal-Image-Loader github地址:https://github.com/nostra13/Android-Universal-Image-Loader 加 ...

  5. 中间件weblogic控制台创建数据源报错---根据真实故事改编

    1.在weblogic控制台创建数据源,有报错--不能创建数据源,图免 2.weblogic数据源管理节点所在服务器telnet测试,到数据库1521端口是通的 3.经过请教各路大神,得出结论:由于子 ...

  6. Maven CXF wsdl2Java List<Xxx>生成ArrayOfXxx包装对象 解决方法

    添加-xjc-Xxew解决,同时还要给插件添加相应的jar包,如下: <plugin> <groupId>org.apache.cxf</groupId> < ...

  7. leetcode581

    public class Solution { public int FindUnsortedSubarray(int[] nums) { , end = -, min = nums[n - ], m ...

  8. 源码阅读经验谈-slim,darknet,labelimg,caffe(1)

    本文首先谈自己的源码阅读体验,然后给几个案例解读,选的例子都是比较简单.重在说明我琢磨的点线面源码阅读方法.我不是专业架构师,是从一个深度学习算法工程师的角度来谈的,不专业的地方请大家轻拍. 经常看别 ...

  9. python 数据分析库介绍

    1 引言 高效处理数据的python工具: 与外界进行交互: 读写各种文件格式和数据库 准备: 对数据进行清理.修整.整合.规范化.重塑.切片切换.变形等处理以便进行分析 转换: 对数据集做一些数学和 ...

  10. 无法启动 nexus 服务,错误1067:进程意外终止。java环境变量设置技巧。

    Nexus启动失败 wrapper.log记载: 无支持版本 51.0,版本51.0指的是Java1.7. 分析: nexus版本为2.14.8,适用JRE版本为1.7. 已配置JAVA_HOME为1 ...