DOM结构（DOM树）

DOM

文档类型DOM（Document Object Model）主要用于HTML文档和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过节点的操作，来实现对文档内容进行增删改查。

1.DOM（Document Object Model）：文档对象模型

文档：HTML文档
文档对象：页面中的元素
文档对象模型：对象被组织在一个树形结构中，用来表示文档中对象的标准模型就叫DOM，目的为了让程序（js）去操作元素

2.DOM树

（1）DOM分为两种：元素树和节点树

元素树：把文档中所有的标签看成是一棵树
节点树：把文档中所有的内容看成是一棵树

（2）常见的三种DOM节点

元素节点，如<html>，<a>，<body>等都是元素节点，即标签
文本节点，向用户展示的内容，如<title>...</title>中的“文档标题”
属性节点，元素的属性，如<a>中的href属性
通过document.getElementById和document.body获取的元素就是获取元素的节点

3.操作

（1）查找节点

（2）创建节点

（3）删除节点

（4）添加新的节点

（5）修改节点

、

4.浏览器的工作过程

（1）从网络或者本地拿到HTML源代码

（2）浏览器将HTML源代码中的每个标签都实例化对应的对象

（3）在内存中形成一个DOM树

（4）将DOM树形成一个可视页面

（5）JS直接修改DOM树改变页面视图

DOM结构（DOM树）相关推荐

javascript遍历DOM结构和对象结构
在实际工作中,记住浏览器中对象的属性.方法几乎是件不可能完成的任务,保持一份资料或网址是个好办法.但是查阅资料也是要花费不少时间,如果能有个脚本将对象的结构打印出来,将会加速开发进程. 下面是我编写的 ...
jQuery EasyUI Datagrid组件的完整的基础DOM结构
标题可能有点长,什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例 ...
javascript --- 将DOM结构转换成虚拟DOM 虚拟DOM转换成真实的DOM结构
虚拟DOM的实现使用虚拟DOM的原因: 减少回流与重绘将DOM结构转换成对象保存到内存中 <img /> => { tag: 'img'} 文本节点 => { tag: u ...
DOM-3 【utils/待讲评】节点属性、方法、封装方法、DOM结构
讲评节点属性 nodeType 元素节点 1 大写属性节点 2 文本节点 3 #text 注释节点 8 #comment document 9 DocumentFragment 11 nodeNa ...
datagrid 完整dom结构
<!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象, ...
提高测试脚本复用性降低DOM结构引起路径变化的影响
问题描述在定位元素时直接复制的xpath. 但是因为下面这些原因导致之前引用的路径失效, 不得不频繁修改脚本重新定位元素, 大降低了脚本的复用性, 也增加了维护的成本: 1. UI修改 (比如增加了 ...
DOM文档树和节点操作
1 DOM文档树 1.1 DOM的定义(document object modle) DOM就是文档对象模型. /* 查看这段HTML代码中p的DOM模型 */ <html><hea ...
简单认识JavaScript 与 DOM结构的文本、标签和属性节点
一 JavaScript JavaScript 是属于网络的脚本语言!被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用.JavaScript 是因特网上最流行的脚 ...
SpringMVC--Ajax异步加载数据$(function (){ 逻辑代码}) 的意思是让dom结构加载完毕后再去执行逻辑代码
1. SpringMVC–Ajax异步加载数据 1.1 实体类user User.java package com.tian.pojo;import lombok.AllArgsConstructor ...
ihtml2document能不能根据id获取dom_回到基础：什么是DOM及DOM操作？
译者:前端小智来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...

DOM结构（DOM树）

DOM结构（DOM树）相关推荐

最新文章

热门文章