JavaScript中，经常需要操作DOM。所谓DOM指的是文档对象模型(Document Object Model)。它提供了对文档结构化的描述，并将HTML页面与脚本、程序语言联系起来。

为了大家更好地理解，下面演示-段HTML代码以及其对应的DOM树形结构图，如下所示。

测试

标题

<1i>

链接

1i>

上述代码中，层层嵌套的HTML标签就是一个类似树形的DOM文档。其中，最外面的一层是标签，标签中嵌套着标签和标签，而这两个标签中也会嵌套其他标签，这样一层层的延伸很像一棵倒着的树。

对应上述HTML代码的DOM树形结构如下图所示。

上图中，所有的元素内容都是一个节点。其中，是所有内容的根节点，

是

和

的父节点。

和标签下面的分支href与charset是标签的属性，在DOM中称为属性节点;标签下面的文本是属于该标签内部的文字，在DOM中称为文本节点。

在了解什么是DOM后，就不再难理解什么是DOM对象。DOM对象就是JavaScript操作DOM所使用的对象。例如，获取以上HTML代码中li标签的DOM对象，并调用innerText属性获取第一个li标签的文本，如下所示。

//获取1i标签对象集合: HTMLCollection(2) [li, li]

var lis = document.getElementsByTagName('li');

var firstLi = lis[0]; //获取第1个1i标签的DOM对象

var text = firstLi.innerText; //获取第1个1i标签的文本内容

html dom树的结构图,什么是DOM对象?DOM树形结构介绍相关推荐

图解DOM树（最简单的方式理解DOM树）
elementui树状菜单tree_vue.js+element-ui做出菜单树形结构
这次给大家带来vue.js+element-ui做出菜单树形结构,vue.js+element-ui做出菜单树形结构的注意事项有哪些,下面就是实战案例,一起来看一下. 由于业务需要,要求实现树形菜单, ...
php 实现树状组织图插件,使用jstree插件实现树形结构
jstree的CDNJS地址的相关链接: (1):js (2):css jstree的简单使用 1:引入css 2:引入js 3:html内容: 父节点1 子节点1 子节点2 父节点2 子节点3 子节 ...
DOM 树是如何构建的？
今天通过对 DOM 模型.HTML 解释器和 JavaScript 的执行的介绍,来初步学习 HTML 解释器是如何将从网络或者本地文件获取的字节流转成 DOM 树的. DOM 模型 1.DOM 标准 ...
【读书笔记】【WebKit技术内幕（二）】Chromium Webkit资源加载与网络栈、DOM树、HTML解释器、影子DOM、CSS解释器和样式布局、网页层次与渲染、绘图上下文、
文章目录前言 Something great 第4章资源加载和网络栈 Webkit 资源加载 Chromium多进程资源加载 Chromium 网络栈第5章 HTML解释器和DOM模型 DOM模 ...
深入解析DOM树的加载
DOM树在介绍 DOM 树之前,首先要清楚,DOM 规范中,对于文档的表示方法并没有任何限制,因此,DOM 树只是多种文档结构中的一种较为普遍的实现方式. DOM 结构构成的基本要素是 " ...
Dom树 CSS树渲染树(render树) 规则、原理
前端不可不学的浏览器渲染机制,阿里年年问,去一个栽一个.听说百度也在考这个,你还不准备学吗? 首先你要了解浏览器渲染的顺序: 1.构建dom 树 2.构建css 树 3.构建渲染树 ...
vue 中的虚拟dom树
虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的当页面渲染的时候Vue会创建一颗虚拟DOM树当页面发生改变Vue会再创建一颗新的虚拟DOM树前后两颗新旧虚拟DOM树进行对比 ...
面试题15：Dom树 CSS树渲染树(render树) 规则、原理
面试官:请说一下Dom树 CSS树渲染树(render树) 规则.原理答: 首先你要了解浏览器渲染的顺序: 1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 ...

html dom树的结构图,什么是DOM对象?DOM树形结构介绍

标题

和

html dom树的结构图,什么是DOM对象?DOM树形结构介绍相关推荐

最新文章

热门文章