html DOM简介基础入门_dom小白基础

今天我们将了解WEB编程中一个重要的概念DOM(Document Object Model)文档对象模型,它帮助我们使用JavaScript(或其他编程语言)操纵文档。一   DOM是什么DOM是HTML和XML文档的编程接口。它不同于把html源码在浏览器窗口当做页面或使用文本编辑器当做纯文本展示,它是对文档的另一种结构化的表述。DOM把文档的所有节点都解

html DOM简介基础入门

今天我们将了解WEB编程中一个重要的概念DOM(Document Object Model)文档对象模型,它帮助我们使用JavaScript(或其他编程语言)操纵文档。

html DOM简介基础入门_dom小白基础

一   DOM是什么

DOM是HTML和XML文档的编程接口。它不同于把html源码在浏览器窗口当做页面或使用文本编辑器当做纯文本展示,它是对文档的另一种结构化的表述。DOM把文档的所有节点都解析为一个对象,并提供了一些属性和方法来描述它们。

DOM是W3C的标准。它被分为3个部分:

DOM不是一种编程语言,它是一种标准,一个模型,它与编程语言相对独立。编程语言都可以按照这种模型实现对文档的访问和处理。

注:因为我们主要是学习WEB编程,所以接下来文章中即将提到的DOM均指HTML DOM,使用到的DOM API也均是JavaScript脚本语言实现。

二       DOM的访问

我们知道,各个浏览器对JavaScript都有不同的实现,所以它们在实现DOM标准时,也会有一些差异,但它们既然都遵循了该标准,所以又呈现出了不同程度一致性。所以我们在使用DOM时,并不需要做任何特别的操作,如果碰到有差异的地方(主要体现在方法名称和参数上),只需根据不同浏览器使用他们各自实现的相关方法即可。实际上他们的实现都遵循了统一标准。

DOM把文档视做树结构:

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

html DOM简介基础入门_dom小白基础

通过这个节点树,JavaScript可以轻松的访问并操作这些节点。

三      DOM节点类型

每个节点对象有都有一个nodeType,nodeName和nodeValue属性,通过这几个属性的值,我们可以获取该节点的相关信息:

节点类型nodeName 返回nodeValue 返回
1Element元素名null
2Attr属性名称属性值
3Text#text节点的内容
4CDATASection#cdata-section节点的内容
5EntityReference实体引用名称null
6Entity实体名称null
7ProcessingInstructiontarget节点的内容
8Comment#comment注释文本
9Document#documentnull
10DocumentType文档类型名称null
11DocumentFragment#document 片段null
12Notation符号名称null

 

四   DOM分级

 一级DOM

1级DOM在1998年10月份成为W3C的提议,由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构,允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

 二级DOM

2级DOM在一级DOM的基础上进行了扩展,它引进了几个新DOM模块来处理新的接口类型:

DOM视图:描述跟踪一个文档的各种视图(使用CSS样式设计文档前后)的接口;

DOM事件:描述事件接口;

DOM样式:描述处理基于CSS样式的接口;

DOM遍历与范围:描述遍历和操作文档树的接口;

 三级DOM

3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展,DOM3包含一个名为“DOM载入与保存”的新模块,DOM核心扩展后可支持XML1.0的所有内容,包括XML Infoset、 XPath、和XML Base。

海计划公众号
(0)
上一篇 2020/03/26 23:29
下一篇 2020/03/26 23:29

您可能感兴趣的内容

  • 使用webpack4搭建一个基于Vue的组件库基础指南_库基础知识

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的。记录如何使用webpack4搭建一个library的脚手架前言使用 webpack4,需要安装 webpack 和 webpack-cliyarn add webpack webpack-cli -D
    然后就是

    2020/03/24
  • JavaScript设计模式菜鸟知识js实现建造者模式_模式使用教程

    什么是建造者模式建造者模式:是将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。工厂类模式提供的是创建单个类的模式,而建造者模式则是将各种产品集中起来进行管理,用来创建复合对象,所谓复合对象就是指某个类具有不同的属性。具体表现为4个角色产品(Product):建造的产物导演(Director):指挥建造的过程,不涉及建造的细节建造者

    2020/04/05
  • 让你的网站支持iOS13 Darkmode 模式的工具入门基础_模式基础指南

    最近iOS13 发布了darkmode模式。虽然本人觉得次此功能呼声大于实际,但作为一个以用户体验为己任的前端,当然不能坐视不管,我们总该做点什么。在进行了一番调研了解后,我们有几种支持darkmode模式的方法。首先了解到一个叫 Darkmode.js 的工具,该工具通过配置一些通用的颜色,能让网站实现一键切换darkmode模式,简单方便。但缺点就是没办

    2020/03/23
  • ES6新特性Async基础知识_async攻略教程

    基本概念Async实际上是一个封装了自动化执行并返回一个Promise的Generator函数的语法糖。这句话的意思我们可以分为三个部分来解读:首先它有一个自动化执行,Generator函数是依靠不停的调用.net来依次执行的,Async有一个自动化执行的过程。第二个,它返回一个Promise,也就是说在Async函数里面我们拿到它的结果需要调用promis

    2020/03/24
  • 赞片CMS指南教程_功能最全最专业的电影CMS系统、影视程序、电影程序

    赞片CMS指南教程 官方网址:https://www.zanpiancms.com/ 简介描述:功能最全最专业的电影CMS系统、影视程序、电影程序 赞片赞片CMS系统一套基于Thi…

    2020/03/11
  • Proxy 的巧用使用帮助_Proxy使用教程

    Proxy 介绍使用Proxy,你可以将一只猫伪装成一只老虎。下面大约有6个例子,我希望它们能让你相信,Proxy 提供了强大的 Javascript 元编程。尽管它不像其他ES6功能用的普遍,但Proxy有许多用途,包括运算符重载,对象模拟,简洁而灵活的API创建,对象变化事件,甚至Vue 3背后的内部响应系统提供动力。Proxy用于修改某些操作的默认行为

    2020/03/29
  • 你想知道的关于 Refs 的知识都在这了菜鸟教程网_refs基础教程

    Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。Refs 使用场景在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素,例如:管理焦点,文本选择或媒体播放。触发强制动画。集成第三方 DOM 库。设置 Refs1. create

    2020/03/23
  • Nerv菜鸟教程网一款类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库_TypeScript基础知识教程

    Nerv_是一款由京东凹凸实验室打造的类 React 前端框架,基于虚拟 DOM 技术的 JavaScript(TypeScript) 库。它基于React标准,提供了与 React 16 一致的使用方式与 API。对于熟悉React的开发者来说Nerv可以快速上手进行开发。官网:https://nerv.aotu.io/文档:https://nervjs.

    2020/04/05
  • 如何利用 策略模式 优化表单验证小白入门_表单使用帮助

    如何利用 策略模式 优化表单验证小白入门 背景 在做移动端项目开发的时候,经常会遇到各种表单验证,有时候不同的页面,验证规则是一样的 ,如图 之前项目里的验证代码写的很凌乱,最近刚…

    2020/03/20
  • html/css弹性布局的几大常用属性详解使用帮助_布局入门知识

    弹性布局的名称概念:1、容器:需要添加弹性布局的父元素;项目:弹性布局容器中的每一个子元素,称为项目。2、主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴;与主轴垂直的另一方向,称为交叉轴。弹性布局的重要的几大基础属性:1、flex-direction属性决定主轴的方向(即项目的排列方向)。row(默认值): 主轴为

    2020/03/26
  • bricks.js使用攻略_一款超快的用于固定宽度元素的“砖石”布局生成器

    bricks.js使用攻略 官方网址:http://callmecavs.com/bricks.js/ GitHub:https://github.com/callmecavs/b…

    2020/03/06
  • ES6入门之Promise对象基础教程_Promise基础教程

    1. Promise 的含义Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件更合理、更强大。 1.1 什么是Promise简单来说就是一个容器,里面保存着某个未来才会结束的事件(也就是异步操作)的结果。从语法上来讲,Promise是一个对象,从它可以获取异步操作的消息,它提供统一的API,各种异步操作都可以用同样的方法进行处理。

    2020/03/24
  • 编写高质量JavaScript模块的4个最佳实践基础指南_模块攻略教程

    编写高质量JavaScript模块的4个最佳实践基础指南 使用ES2015模块,您可以将应用程序代码分成可重用的、封装的、专注于单一任务的模块。 这很好,但是如何构造模块呢?一个模…

    2020/03/19
  • Tippy.js入门攻略一款轻量级的纯js tooltip工具提示插件

    Tippy.js基础入门 官方网址:https://atomiks.github.io/tippyjs/ GitHub:https://github.com/atomiks/tip…

    2020/03/05
  • 程序员面试的时候,大家都中过什么套路?小白帮助_面试入门指南

    1、利用面试人员解决难题之前有网友爆料自己在面试一家创业公司的时候,最开始只是一位面试官在场,面着面着整个开发组的人都过来了,围绕面试者擅长的数据库开发,提出了非常具体的问题。虽然该网友完美的回答了这个问题,但最后也没能进入那家公司,后来旁敲侧击的了解了一下,这才知道那家公司发布职位的原因只是为了解决开发过程中遇到的难题。除此之外,面试中有些公司还会让你现场

    2020/03/30
  • RemoveBG指南教程_在线免费人物去背景神器

    RemoveBG指南教程 官方网址:https://www.remove.bg/ 简介描述:在线免费人物去背景神器 「RemoveBG」是国外的一个专业抠图去背景神器,堪称神器的抠…

    2020/03/06