zoukankan      html  css  js  c++  java
  • Node,Document,HTMLDocument,HTMLCollection解析

    这里说的是XML的这些对象,而HTML是继承这些对象的,并进行了扩展。如Document对象,

    Node对象

    它是一个节点对象,代表文档树中的一个节点。是所有节点类型的基类

    Node对象是整个DOM的主要类型。节点对象代表文档树中的一个单独的节点

    通过childNodes获取NodeList对象(即节点列表)

    Node对象的属性和方法主要是操作节点的,获取上下左右的节点,增删改查复制节点。

    具体参照 http://www.w3school.com.cn/xmldom/dom_node.asp

    js中的应用:

    var d = document.getElementsByTagName('div');

    var node = d.item(0).childNodes.item(0);

    node instanceof Node    //true

    d.item(0).childNodes instanceof Node //false
    d.item(0).childNodes instanceof NodeList   //true

    NodeList对象

    它代表一个有顺序的节点列表,节点列表可保持自身的更新,如果节点列表或XML文档中的某个元素被删除或添加,列表也会被自动更新。

    属性:

    length  返回节点列表中的节点数目

    方法:

    item()  返回节点列表中处于指定的索引节点

    Document对象(Document类型)

    Document对象是一棵文档树的根,可为我们提供对文档数据的最初的访问入口。

    包括元素节点、文本节点、注释、处理指令等,document对象同样提供了创建这些对象的方法。

    所以Document对象是一个对象。可以使用new操作符。

    http://www.w3school.com.cn/xmldom/dom_document.asp

    Document类型是继承Node对象的属性和方法,并且新增了属性和方法。

    在浏览器中document对象是HTMLDocument(继承Document类型)的一个实例

    HTMLDocument对象

    从上可以看出HTMLDocument继承自Document对象

    表示HTML文档树的根,它是一个接口(?有待考察,因为不能new一个HTMLDocument()),提供了对HTML层级的访问。

    HTMLDocument接口对DOM Document接口进行了扩展,定义了HTML专用的属性和方法。

    很多属性和方法都是HTMLCollection对象(实际上是可以用数组或名称索引的只读数组),其中保存了对锚、表单、链接以及其他脚本元素的引用。

    注意,在 1 级 DOM 中,HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中,该方法已经被转移到了 Document 接口,它现在由 HTMLDocument 继承而不是由它定义了。

    HTMLCollection对象

    它是一个接口,表示HTML元素的集合,它提供了可以遍历列表的方法和属性。

    HTML DOM 中的HTMLCollection是“活”的,如果基本的文档改变时,那些改变通过所有HTMLCollection对象会立即显示出来。

    下面的每个项目(以及它们指定的属性)都返回HTMLCollection对象实例

    Document(images,applets,links,forms,anchors)

    form(elements)

    map(areas)

    select(options)

    table(rows,tBodies)

    tableSection(rows)

    row(cells)

    HTMLDocument接口的许多属性都是HTMLCollection对象,它提供了访问诸如表单、图像和链接等文档元素的便捷方式。form.elements和select.options都是HTMLCollection对象,HTMLCollection还提供了遍历Table的各行以及TableRow的各个单元格的一种方便方法。

    HTMLCollection 对象是只读的,不能给它添加新元素,即使采用 JavaScript 数组语法也是如此。

    HTMLCollection 对象和 NodeList 对象很相似,但前者可能既能用名称索引也能用数字索引。

    HTMLCollection对象的属性

    cssRules   只读属性,返回指示列表长度的整数(即集合中的元素数)

    方法

    item(),返回集合中指定位置的元素(节点)

    namedItem(),返回集合中name属性或id属性具有指定值的元素(节点)

    HTML中的实际应用:

    通过document实例的方法取到的都是HTMLCollection对象

    var d = document.getElementsByTagName('div')

    d.__proto__     返回的是HTMLCollection对象

    d.item(0).__proto__   返回的是HTMLDivElement对象

    d.item(0).childNodes.__proto__    返回的是NodeList对象。也就是childNodes才是NodeList对象。

    html中的NodeList还有forEach方法

    var d = document.getElementsByTagName('div');

    var node = d.item(0).childNodes.item(0);

    d instanceof HTMLCollection    //true
    d是一个HTMLCollection的集合
    d instanceof HTMLDocument    //false

    Document, HTMLDocument 是顶部节点,所以其他节点都不是Document的实例

    d.item(0).childNodes instanceof NodeList   //true
    d.item(0).childNodes instanceof HTMLCollection  //false
    通过document的方法如document.getElementsByTagName('img')等取到的是HTMLCollection对象,通过childNodes取到的是NodeList对象,这两个都是列表

    node instanceof Element   //true  ,node是div元素

    node instanceof Node      //true

    这里有些是自己的理解,如有不对之处请指出。



  • 相关阅读:
    vs2015连接oracle 11g(.net自带方式 using System.Data.OracleClient;)
    div层叠顺序额
    linux运维、架构之路-Zabbix自动化
    linux运维、架构之路-Zabbix监控
    linux运维、架构之路-keepalived高可用
    linux运维、架构之路-内网NTP时间服务器
    linux运维、架构之路-Nginx反向代理
    linux运维、架构之路-数据库迁移
    linux运维、架构之路-网络基础
    linux运维、架构之路-shell编程(一)
  • 原文地址:https://www.cnblogs.com/wenwenli/p/Node_NodeList_Document_HTMLCollection.html
Copyright © 2011-2022 走看看