zoukankan      html  css  js  c++  java
  • Dom 中的node与element的区别

    先看document 的两个常见的方法

    1. document.createTextNode

      .Constructor :Text

    2. document.createElement 

       .Constructor :HTML*Elemnt

    此处涉及到DOM  API :Text,Node,Element 

    <div id="p">Hello<div id="c">DOM API</div><!--I am a comment--></div>

    Node 是一个基类,DOM 中的element ,text,document  都是继承他。

    也就是说element ,text ,document 是三种特殊的Node。分别叫做,Element_node,Text_node,Comment_node

    实际上node 表示的是DOM树形结构,在html中,节点和节点之间是可以插入文本的,这个插入的空机就是Text_node Comment  是注解。

    具体实例如下:

    <body>
    we can put text here 1...
    <h1>China</h1>
    we can put text here 2...
    <!-- My comment ... -->
    we can put text here 3...
    <p>China is a popular country with...</p>
    we can put text here 4...
    <div>
    <button>See details</button>
    </div>
    we can put text here 5 ...
    </body>
    这下就顺理成章了,body的直系元素(3)+ COMMENT_NODE(1) + TEXT_NODE(5) = 9
    原文链接:https://blog.csdn.net/kkkkkxiaofei/article/details/52608394

    我们利用childNodes 找到了NodeList ,但我们操作DOM时往往不想操作Node,

    其实我们经常使用的getElementsByXXX返回的就是一个ElementList,只不过它的真实名字是ElementCollection。

    就像NodeList是Node的集合一样,ElementCollection也是Element的集合。但需要特别注意的是:

    NodeList和ElementCollcetion都不是真正的数组

    最后我们说一下Document ,document  简称对象模型,他是html 和xml是文档遍程。document 是第一个节点 (childeNodes[0])就是htm ,

  • 相关阅读:
    Active Url 激活URL
    Specified argument was out of the range of valid values.
    EnumHelp
    历史对像(版本对像)
    dom4j API 简介
    即时通讯软件openfire+spark+smack
    openfire插件入门学习
    Openfire本地化配置
    JSONObject与JSONArray的使用
    Android端服务器推送技术原理分析及XMPP的使用
  • 原文地址:https://www.cnblogs.com/dousil/p/14525408.html
Copyright © 2011-2022 走看看