zoukankan      html  css  js  c++  java
  • Node、Document关系的探究

    上图来自于《JavaScript权威指南(第六版)》P375

    受到上图的启发,写了如下测试代码:

    1 var head = document.getElementsByTagName("head");
    2 console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(head[0])))));    // Node对象
    3 
    4 console.log(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(document))));    // Node对象

    沿着上图的文档节点层次结构,上面的代码输出都为Node对象。

    那么问题来了,上篇博文引自《Professional JavaScript for Web Developers》中的那段话:

    In browser, the document object is an instance of HTMLDocument (which inherits from Document) and presents the entire HTML page. 

    1. The document object presents the entire 要怎么解释呢?(document.getElementById());   

    2. Document对象和Element对象在DOM中各扮演了什么角色?(新增了哪些自己的(非继承的)属性和方法?)

    部分解答这个问题: (《高程》P354)

    •  The Document type represents an entire document and is the root node of a hierarchy. In javaScript, the document object allows for querying and retrieval of nodes in a number of different ways.
    • An Element node represents all HTML or XML elements in a document and can be used to manipulate their contents and attributes.

     因此我们认为,首先通过Document方法找到某个节点(宏观),然后再通过手术刀式地对元素节点进行内容和属性上的操作(微观)。

  • 相关阅读:
    堆和栈的区别
    熟悉熟悉常用的几个算法用JS的实现
    JS设置CSS样式的几种方式
    javascript的基本语法、数据结构
    DOM的概念及子节点类型
    三列自适应布局
    Javascript中括号“[]”的多义性
    Javascript中大括号“{}”的多义性
    Javascript小括号“()”的多义性
    JavaScript 开发者经常忽略或误用的七个基础知识点
  • 原文地址:https://www.cnblogs.com/linxd/p/4519499.html
Copyright © 2011-2022 走看看