草庐IT

javascript - Node对象和Element对象的区别？

coder 2023-04-23 原文

我完全混淆了 Node对象和 Element目的。 document.getElementById() 返回 Element 对象，而 document.getElementsByClassName() 返回 NodeList对象(元素或节点的集合？)

如果一个 div 是一个元素对象，那么 div 节点对象呢？

什么是节点对象？

document对象、Element对象、Text对象也是Node对象吗？

根据 David Flanagan 的书“文档对象，其元素对象和文本对象都是节点对象”。

那么一个对象怎么能继承Element对象和Node对象的属性/方法呢？

如果是，我猜节点类和元素类在继承的原型(prototype)树中是相关的。

 <div id="test">
           <p class="para"> 123 </p>
           <p class="para"> abc </p>
 </div>
 <p id="id_para"> next </p>

document.documentElement.toString();    // [object HTMLHtmlElement]

var div = document.getElementById("test");
div.toString();                         // [object HTMLDivElement]                       

var p1 = document.getElementById("id_para");
p1.toString();                          // [object HTMLParagraphElement]

var p2 = document.getElementsByClassName("para");
p2.toString();                          //[object HTMLCollection]

最佳答案

一个 node是 DOM 层次结构中任何类型对象的通用名称。一个 node可以是内置 DOM 元素之一，例如 document或 document.body ，它可以是 HTML 中指定的 HTML 标签，例如 <input>或 <p>或者它可能是系统创建的文本节点，用于在另一个元素中保存文本 block 。因此，简而言之，node是任何 DOM 对象。

安element是 node 的一种特定类型因为还有许多其他类型的节点(文本节点、评论节点、文档节点等...)。

DOM 由节点的层次结构组成，其中每个节点可以有一个父节点、一个子节点列表以及一个 nextSibling 和 previousSibling。该结构形成树状层次结构。 document节点有 html节点作为它的 child 。 html节点有它的子节点列表(head 节点和 body 节点)。 body node 将有它的子节点列表(HTML 页面中的顶级元素)等等。

所以，nodeList只是 nodes 的类数组列表.

元素是一种特定类型的节点，可以在 HTML 中使用 HTML 标记直接指定，并且可以具有像 id 这样的属性。或 class .可以有子节点等等……还有其他类型的节点比如评论节点、文本节点等等……各有特点。每个节点都有一个属性 .nodeType它报告它是什么类型的节点。您可以在此处查看各种类型的节点(来自 MDN 的图表):

您可以看到 ELEMENT_NODE是一种特殊类型的节点，其中 nodeType属性的值为 1 .

所以 document.getElementById("test")只能返回一个节点，并且保证是一个元素(一种特定类型的节点)。因此，它只返回元素而不是列表。

自从 document.getElementsByClassName("para")可以返回多个对象，设计者选择返回一个nodeList因为这是他们为包含多个节点的列表创建的数据类型。由于这些只能是元素(通常只有元素具有类名)，因此在技术上它是 nodeList里面只有元素类型的节点，设计者可以制作一个不同命名的集合，它是 elementList ，但他们选择只使用一种类型的集合，无论它是否只有元素。

编辑: HTML5 定义了 HTMLCollection这是一个 HTML 元素列表(不是任何节点，只有元素)。 HTML5 中的许多属性或方法现在返回 HTMLCollection .虽然它在界面上与 nodeList 非常相似，现在做了一个区别，它只包含元素，不包含任何类型的节点。

nodeList 之间的区别和 HTMLCollection对你如何使用它几乎没有影响(据我所知)，但 HTML5 的设计者现在已经做出了区分。

例如，element.children属性返回一个实时的 HTMLCollection。

关于javascript - Node对象和Element对象的区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9979172/

javascriptElementcodedocumentsectionhtmldom

有关javascript - Node对象和Element对象的区别？的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  3. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  4. Ruby 写入和读取对象到文件 - 2

    好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

  5. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  6. ruby-on-rails - 未在 Ruby 中初始化的对象 - 2

    我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议？谢谢，马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单，因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法，但您没有调

  7. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  8. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  9. ruby-on-rails - `a ||= b` 和 `a = b if a.nil 之间的区别？ - 2

    我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行

  10. ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2

    我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

随机推荐