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 ,

  • 相关阅读:
    IntelliJ idea 2021.3 安装使用及激活
    高项-信息系统基础-UML图
    软考高项(信息系统项目管理师)介绍
    Android Studio中的Gradle面板没有Task任务列表如何找回?
    ubuntu 安装nodejs,npm,
    解决video.js video-player不能自动播放问题
    vuex开启namespaced
    axios提交body raw格式
    vue配置服务代理
    PIDFile没有配置导致将mongodb配置成服务时启动失败
  • 原文地址:https://www.cnblogs.com/dousil/p/14525408.html
Copyright © 2011-2022 走看看