HTML DOM(一):认识DOM

什么是DOM?

通过 JavaScript,您能够重构整个HTML文档。您能够加入、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript就须要对HTML文档中全部元素进行訪问的入口。这个入口,连同对HTML 元素进行加入、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。在 1998 年,W3C 公布了第一级的 DOM 规范。这个规范同意訪问和操作 HTML 页面中的每个单独的元素。全部的浏览器都运行了这个标准,因此,DOM
的兼容性问题也差点儿难觅踪影了。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):

Core DOM

定义了一套标准的针对不论什么结构化文档的对象

XML DOM

定义了一套标准的针对 XML 文档的对象

HTML DOM

定义了一套标准的针对 HTML 文档的对象。

节点

依据 DOM,HTML 文档中的每一个成分都是一个节点。

DOM 是这样规定的:

  • 整个文档是一个文档节点
  • 每个 HTML 标签是一个元素节点
  • 包括在 HTML 元素中的文本是文本节点
  • 每个 HTML 属性是一个属性节点
  • 凝视属于凝视节点

Node 层次

节点彼此都有等级关系。HTML 文档中的全部节点组成了一个文档树(或节点树)。HTML 文档中的每一个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的全部文本节点为止。

以下这个图片表示一个文档树(节点树):

文档树(节点数)

请看以下这个HTML文档:

<html>
  <head>
    <title>DOM Tutorial</title>
  </head>
  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>
</html>

上面全部的节点彼此间都存在关系。除文档节点之外的每一个节点都有父节点。举例,<head> 和 <body> 的父节点是 <html> 节点,文本节点 "Hello world!" 的父节点是 <p> 节点。大部分元素节点都有子节点。例如说,<head> 节点有一个子节点:<title> 节点。<title> 节点也有一个子节点:文本节点 "DOM Tutorial"。当节点分享同一个父节点时,它们就是同辈(同级节点)。例如说,<h1> 和 <p>是同辈,由于它们的父节点均是
<body> 节点。节点也能够拥有后代,后代指某个节点的全部子节点,或者这些子节点的子节点,以此类推。例如说,全部的文本节点都是 <html>节点的后代,而第一个文本节点是 <head> 节点的后代。节点也能够拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。例如说,全部的文本节点都可把 <html> 节点作为先辈节点。

时间: 2024-10-12 23:32:11

HTML DOM(一):认识DOM的相关文章

DOM扩展:DOM API的进一步增强[总结篇-下]

本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档插入大量HTML标记的时候操作还是很繁杂的,每次插入一个元素,不仅要调用创建元素和文本节点的接口,还要调用appendChild等向文档中添加元素的接口,而且在添加时还要按照正确的顺序.而如果使用插入标记的方法,直接向文档中插入HTML字符串,由执行环境自动解析HTML字符串并创建相应的节点并添加到文档中,这

【DOM】1.DOM优化

1.JS include :DOM BOM ECMA 2.Browser 分别独立实现dom & JS as if two isolated islands 3.JS操作DOM from the island to the other one 4.DOM性能 The bridges between islands,charge everytime passing by 尽量减少过桥次数 5.innerHTML vs dom method webkit:eg, chrome, dom>inne

走进DOM:HTML DOM

DOM(Document Object Model)即文档对象模型.针对HTML和XML 文档的API(应用程序接口). DOM描绘了一个层次化的节点树,执行开发者加入.移除和改动页面的某一部分.当然这样说有些笼统.咱们接着往下看. 一.认识DOM DOM 中的三个字母.D(文档)能够理解为整个Web载入的网页文档.O(对象)能够理解为类似window对象之类的东西.能够调用属性和方法,这里我们说的是document对象:M(模型)能够理解为网页文档的树型结构. 通过 JavaScript,您能

Dom Animator – 提供 Dom 注释动画的 JS 库

DOM 动画是一个极好的 JavaScript 库,用来在页面的 DOM 注释中显示小的 ASCII 动画.这对于那些检查你的代码的人是一个小彩蛋,仅此而已.它是一个独立的库,不依赖 jQuery 或者其它库,所以使用是非常简单的.您不需要任何 CSS 或 HTML,只是 JavaScript 而已. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScr

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

什么是BOM?,什么是DOM? BOM跟DOM之间的关系

什么是BOMBOM是browser object model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3CBOM最初是Netscape浏览器标准的一部分在BOM章节中你将学到什么BOM教程中,同学们将学到与浏览器窗口交互的一些对象,例如可以移动

浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象

ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问. Document

操作DOM元素,Dom元素添加颜色,删除第二个li元素

<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添

DOM基础及DOM操作HTML

 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构.换句话说,这是表示和处理一个HTML或XML文档的常用方法.使用DOM可以使得我们在AJAX中通过HTML和XML数据进行DOM方式操作,从而做到页面动态修改更新和数据的提取处理. DOM的简单简绍: 在JAvaScript中有一个特殊的对象document,可以表示当前HTML页面的根节点.DOM

【使用 DOM】为DOM元素设置样式

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>为DOM元素设置样式</title> <style title="core st