专栏首页前端之旅DOM Core 与 HTML-DOM

DOM Core 与 HTML-DOM

1.DOM

DOM(文档对象模型)是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API。比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记(Tag)。

DOM与特定的平台、浏览器、语言无关,很多种语言都实现了DOM,比如因为JavaScript和PHP都实现了DOM,所以 JavaScript中有getElementsByTagName()方法,PHP中也有 getElementsByTagName(),getElementsByTagName()方法是DOM规定的访问XML文档的接口。

2.XML、XHTML、HTML

XML与HTML相似,但两者是有区别。XML和HTML都来自于SGML,它们都含有标记,有着相似的语法,HTML和XML的最大区别在 于:HTML是一个定型的标记语言,用固定的标记来描述和显示数据,比如<h1>表示首行标题,有固定的尺寸;而XML没有固定的标记,只能通过自定义的标记来描述数据的形式和结构,而不能显示。HTML是将数据 和显示混在一起,而XML则是将数据和显示分开来。那为什么能使用DOM访问和操作HTML文档(即网页)呢?Web语义化的一个发展方向是将HTML逐 渐演变为更有语义、能将数据内容与现实分离的XML,但HTML不可能立即演变为XML,目前推荐使用的是一个过渡产物——XHTML。HTML与 XHTML网页形成的节点树(统称为HTML节点树)在结构上与XML节点树一样,可以看做是一个符合DOM的XML文档,因此可以使用实现了DOM的程序语言(如JavaScript、PHP等)来访问和操作HTML文档,即访问和操作那些节点。

3.DOM Core和HTML-DOM

由于HTML与XML的相似性及差异,JavaScript不仅实现了标准的DOM方法和属性(即由W3C制定的),而且还实现了HTML特有的 DOM方法和属性,前者称为DOM Core,并不专属于JavaScript,后者称为HTML-DOM。不管是DOM Core还是HTML-DOM,我们在使用JavaScript的时候要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样。

常见的DOM Core方法如下:

1、创建节点 createElement() createTextNode() 2、复制节点 cloneNode() 3、插入节点 appendChild() insertBefore() 4、删除节点 removeChild() 5、替换节点 replaceChild() 6、查找和设置节点属性 setAttribute() getAttribute() 7、查找节点 getElementById() getElementsByTagName() hasChildNode()

常见的DOM Core属性如下:

node.childNodes node.firstChild node.lastChild node.nextSibling node.previousSibling node.parentNode

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 聊一聊:一道 Promise 链式调用的题目

    不知道你有没有猜对?反正我猜错了。一开始我还以为是常规的 EventLoop 题目,无非就是考链式调用。但事实证明,它没有看上去那么简单。当时心里想的是,好奇怪...

    Chor
  • 深入理解计算机系统cp1:存储单位、数制、编码

    PS:数据传输大多以 bit 为单位,比如我们常说的网速100M/s,M/s其实Mbit/s,也就是兆比特每秒,我们还可以写成100Mbps。

    Chor
  • 深入理解原型和继承

    这几天在掘金上阅读到了一篇关于原型的文章,角度较之前看到的几篇博客都不一样,顿时感觉我对于原型的知识点还没有完全吃透。鉴于本篇文章很可能会进行不定期的修订和拓展...

    Chor
  • 为什么操作DOM会影响WEB应用的性能?

    面试官经常会问你:“平时工作中,你怎么优化自己应用的性能?” 你回答如下:“我平时遵循以下几条原则来优化我的项目、以提高性能,主要有:”

    xing.org1^
  • javascript简史

    一、javascript简介 1.1 javascript简史 javascript诞生于1995年。当时它的主要目的是处理以前由服务器端语言负责的一些输入验证...

    柴小智
  • Vue中的nexTick()

    获取更新后的DOM言外之意就是,操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM会出问题,所以就衍生出了这个获取更新后的 DOM的Vue...

    刘亦枫
  • WebComponent:像搭积木一样构建Web应用

    我们站在开发者和项目角度来聊聊 WebComponent,它是一套技术的组合,能提供给开发者组件化开发的能力。

    Dunizb
  • React的diffing算法学习

    这段时间主要在学习React的使用,React是一个用于构建用户界面的框架,其使用了一些方式来使得视图渲染更加高效,这里主要记录一下学习期间了解到的Diffin...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券