博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM Core和HTML DOM的区别
阅读量:4644 次
发布时间:2019-06-09

本文共 3017 字,大约阅读时间需要 10 分钟。

W3C所制订的DOM Level分为两大模块:CoreHTML

 

第一个大模块是Core核心,W3C规范是这样描述Core的:满足软件开发者和Web脚本编写者,访问和操控产品项目中包含的可解析的HTML和XML内容。DOM Core,并不专属于JavaScript(如php也支持)。

 

第二个HTML模块,规范描述为:HTML之中特定元素的功能,和恰到好处的、易用的、针对常见性任务的HTML文档操作机制。HTML模块的意义也在于解决了向后兼容的问题。

  

DOM(文档对象模型)是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API。

DOM与特定的平台、浏览器、语言无关,很多种语言都实现了DOM,比如因为JavaScript和PHP都实现了DOM

注意理解:

1、应用标准DOM的思维在于,在节点树之中不含有固定的节点标记,假设所有的标记都是自定义的,而不依赖html结构,通过dom的一些方法和属性来操控文档。

View Code
George
John
Reminder
Don't forget the meeting!

 

2区分CoreAPI和HTMLAPI两者

HTML文档可以使用CoreAPI和HTMLAPI两者;而XML文档只能使用CoreAPI。

DOM Core模块:接口基于节点方式(Node-based)。

DOM1 HTML的模块:接口基于元素方式(Element-based);

 

元素方式与节点方式:

例如,要得到id属性的字符串的值是什么

1采用DOM1Core的方式

myElement.attributes["id"].value;//从Node接口提供的属性

等于:

myElement.getAttributes("id");//从Element实现的方法返回 

2使用DOM1 HTML方式的话

myElement.id;myElement.id; 

 

3我们日常工作的时候,跟HTML文档打交道,其实就是属于W3C所规定的DOM Level1HTML模块内的处理工作。HTMLDOM的特性和方法不是标准的DOM实现,是专门针对HTML同时也让一些DOM操作变的更加简便。

  

有待理解:DOM1Core部分中一切皆是节点,节点以及其接口都可实现在每个对象身上(从继承的角度理解出发),实现了节点接口才可以有节点的属性、方法。——这是我们理解的前提。然后,根据特定的节点类型的不同,其接口的属性和方法都是不同的,视乎DOM对该节点的设计而定。

 

归纳一下,

不管是DOM Core还是HTML-DOM,我们在使用JavaScript的时候要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样,一般推荐使用DOM Core方法和属性,尽管稍显繁杂。

 

 

常见的Core DOM方法如下:

1、创建节点

createElement()

createTextNode()

2、复制节点

cloneNode()

3、插入节点

appendChild()

insertBefore()

4、删除节点

removeChild()

5、替换节点

replaceChild()

6、查找和设置节点属性

setAttribute()

getAttribute()

7、查找节点

getElementById()

getElementsByTagName()

hasChildNode()

 

常见的Core DOM属性如下:

node.childNodes

node.firstChild

node.lastChild

node.nextSibling

node.previousSibling

node.parentNode

  

 

总结/回顾:

 DOM 基本方法

 

直接引用方法:

1、documen.getElementById(id);

2、document.getElementByTagName(tagName);

返回一个数组,包含对这些节点的引用

 

间接引用节点 

3、子节点element.childNode

返回element的所有子节点,通过element.childNodes[i]的方式来调用

Element.firstChild = element.childNodes[0];

Element.lastChild = element.childNodes[element.childNodes.length-1];

4、父节点element.parentNode

5、下一个兄弟节点element.nextSibling;

上一个兄弟节点element.previousSibling;

 

 

获得节点信息 

6、nodeName属性获得节点名称eg:<a></a>返回”a”; class=”test”返回”test”; 文本节点返回文本内容。

7、nodeType返回节点的类型。元素节点返回1;属性节点返回2;文本节点返回3;

8、nodeValue返回节点的值。元素节点返回null;属性节点返回undefined;文本节点返回文本内容。

9、hasChildNodes()返回布尔值,判断是否含有子节点。

10、tagName属性返回元素的标记名称。等价于nodeName属性

 

 

处理属性节点

 

11、用setAttributeNode()方法给元素节点添加属性。

ElementNode.setAttribute(attributeName,attributeValue); 参数分别为(属性名称,属性值)

12、用getAttribute()方法获得属性值

 

 

处理文本节点

13、innerHTML和innerText方法

 

 

改变文档的层次结构

 

14、创建元素节点document.createElement()

15、创建文本节点Document.createTextNode();

//注: document.createTextNode(" ");他不会通过html编码,也就是说这里创建的不是空格,而是字符串

16、添加子节点 appendChild()。parentElement.appendChild(childElement);

17、插入子节点insertBefore()。

appendChild、insertBefore和insertAfter(自定义函数) 的区别

18、使用replaceChild方法取代子结点。parentNode.replaceChild(newNode,oldNode); 

19、使用cloneNode方法复制结点 。node.cloneNode(includeChildren); includeChildren为bool,表示是否复制其子结点 。

20、使用removeChild方法删除子结点 。parentNode.removeChild(childNode); 

 

参考文章:

转载于:https://www.cnblogs.com/windrainpy/archive/2012/09/12/2679640.html

你可能感兴趣的文章
简单入门dos程序
查看>>
vue element 关闭当前tab 跳转到上一路由
查看>>
4、面向对象
查看>>
[NOI2005]聪聪与可可(期望dp)
查看>>
POJ 3723
查看>>
Maven的安装
查看>>
angular初步认识一
查看>>
springmvc3.2+spring+hibernate4全注解方式整合(一)
查看>>
Elgg网站迁移指南
查看>>
素数筛法优化
查看>>
installshield 注册dll
查看>>
Sublime Text 3 及Package Control 安装(附上一个3103可用的Key)
查看>>
LTE QCI分类 QoS
查看>>
Get MAC address using POSIX APIs
查看>>
bzoj2120
查看>>
基于uFUN开发板的心率计(一)DMA方式获取传感器数据
查看>>
【dp】船
查看>>
oracle, group by, having, where
查看>>
⑥python模块初识、pyc和PyCodeObject
查看>>
object-c中管理文件和目录:NSFileManager使用方法
查看>>