zoukankan      html  css  js  c++  java
  • DOM Core和HTML DOM的区别 windrainpy

    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
    <note>
    
    <to>George</to>
    
    <from>John</from>
    
    <heading>Reminder</heading>
    
    <body>Don't forget the meeting!</body>
    
    </note>

    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); 

    参考文章:

    http://www.jb51.net/article/19186.htm

    http://www.admin9.com/webdesign/2010/0928/85501.shtml

  • 相关阅读:
    pug 基础篇
    胡里胡哨-老师改卷纸
    javaScript 原生技巧
    angular9的学习(十二)插槽
    typescript高级编程(二)
    typescript高级编程(一)
    ActiveMq 使用指北
    基于ZooKeeper的分布式锁实现
    windows下配置启动脚本并设置开机自启及相应关闭脚本
    腾讯位置服务JavaScript API GL实现文本标记的碰撞避让
  • 原文地址:https://www.cnblogs.com/windrainpy/p/2679640.html
Copyright © 2011-2022 走看看