DOM

DOM 全称是 Document Object Model,也就是文档对象模型。

DOM 就是针对 HTML 和 XML 提供的一个API。什么意思?就是说为了能以编程的方法操作这个 HTML 的内容(比如添加某些元素、修改元素的内容、删除某些元素),我们把这个 HTML 看做一个对象树(DOM树),它本身和里面的所有东西比如

 

这些标签都看做一个对象,每个对象都叫做一个节点(node),节点可以理解为 DOM 中所有 Object 的父类。

 
 

DOM 有什么用?就是为了操作 HTML 中的元素,比如说我们要通过 JS 把这个网页的标题改了,直接这样就可以了:

document.title='how to make love';

这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

document

当浏览器下载到一个网页,通常是 HTML,这个 HTML 就叫 document(当然,这也是 DOM 树中的一个 node),从上图可以看到,document 通常是整个 DOM 树的根节点。这个 document 包含了标题(document.title)、URL(document.URL)等属性,可以直接在 JS 中访问到。

在一个浏览器窗口中可能有多个 document,例如,通过 iframe 加载的页面,每一个都是一个 document。

在 JS 中,可以通过 document 访问其子节点(其实任何节点都可以),如

document.body;document.getElementById('xxx');

DOM与document的区别的更多相关文章

  1. DOM BOM document window 区别

    DOM 是为了操作文档出现的 API,document 是其的一个对象: BOM 是为了操作浏览器出现的 API,window 是其的一个对象.   使用下图讲解:   归DOM管的: E区:即doc ...

  2. document.documentElement和document.body区别介绍

    document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...

  3. [转]JQ中$(window).load和$(document).ready区别与执行顺序

    一.$(window).load().window.onload=function(){}和$(document).ready()方法的区别 1.$(window).load() 和window.on ...

  4. sax/dom/jdom/dom4j的区别

    sax/dom/jdom/dom4j的区别[转] 博客分类: xml   网上能够查到很多的4种解析方式的区别,我再做一下摘录和总结,顺带给自己做个备份. SAX sax分析器在对xml文档进行分析时 ...

  5. javascript 对象(DOM)document window history

    Javascript对象 目录: window对象 document对象 history对象 navigator对象 window对象 所有浏览器都支持window对象,它表示浏览器窗口. 所有jav ...

  6. Commons JXPath - DOM/JDOM Document Access

    除了 JavaBean,JXPath 也可以访问 DOM/JDOM. 示例 XML: <?xml version="1.0" encoding="utf-8&quo ...

  7. DOM 之 document 查找元素方法

    DOM 之 document 查找元素方法 getElementById("idName"); // 始终取得第一个 idName 的元素 getElementsByTagName ...

  8. 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  9. window和document的区别理解,bom和dom的区别理解

    Window对象: 是整个BOM的核心,所有对象和集合都以某种方式回接到window对象.Window对象表示整个浏览器窗口,但不必表示其中包含的内容. Document对象: 实际上是window对 ...

随机推荐

  1. vue中使用BetterScroll

    BetterScroll可以通过给content加min-height实现永远滚动 content千万不可以删除,千万不要在 content上写v-if

  2. volatile 变量使用

    1,对其它线程可见性.原理是:别的线程每次使用前都是要刷新一下值,并不是原子性同步.所有还是会出现线程不安全. 2,禁止指令重新排序.也就是会出现机器实际执行可能和代码的顺序不一样.使用volatil ...

  3. (转) Dissecting Reinforcement Learning-Part.2

    Dissecting Reinforcement Learning-Part.2 Jan 15, 2017 • Massimiliano Patacchiola 原文链接:https://mpatac ...

  4. position relative top失效的问题,温习下常用两种的居中方式

    因为body和html,默认高度是auto 所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;} <!DOCTYPE h ...

  5. (转载)一张表搞清楚西门子S7系列标准DB块与优化DB块

    在TIA Portal中为S7-1200/S7-1500 CPU 添加一个 DB 块时,其缺省属性为优化的 DB ,优化的 DB 块与标准的 DB 块整体对比如下表所示: 项 标准 DB 优化 DB ...

  6. String、StringBuffer 的使用 ,两个面试问题

    1>统计不同类型字符个数 public static void main(String[] args) { //案例:统计不同类型字符个数 String password = "abZ ...

  7. Centos7更改网卡名称Eth0并配置静态IP

    1.首先查看一下centos7的网卡名称 eno33554984 2.更改为centos7之前版本的网卡名称 3.更改网卡文件的名称 4.禁用可预测命名规则. 通过编辑 /etc/default/gr ...

  8. MySQL GROUP BY语句

    GROUP BY 语句根据一个或多个列对结果集进行分组 在分组的列上我们可以使用COUNT.SUM.AVG等函数 SELECT column_name,function(column_name) FR ...

  9. PostgreSQL安装及使用教程一(exe安装方式)

    下载安装 百度搜索PostgreSQL,进入官网,选择相应版本的图形化安装程序(BigSQL)安装即可 连接数据库 对数据库操作有两种方式,一种是通过命令行工具psql,另一种是通过图形化界面pgAd ...

  10. 《剑指offer》第五十六题(数组中唯一只出现一次的数字)

    // 面试题56(二):数组中唯一只出现一次的数字 // 题目:在一个数组中除了一个数字只出现一次之外,其他数字都出现了三次.请 // 找出那个吃出现一次的数字. #include <iostr ...