【问题标题】:Help me understand objects in DOM帮助我理解 DOM 中的对象
【发布时间】:2009-11-12 20:51:11
【问题描述】:

我有一个关于 DOM 对象的问题。

我了解到文档中的所有内容都是对象?

<form name="myform" action="script.js">
    <input type="text">type something</input>
</form>

如果我们看这个例子,form 是一个具有nameaction 属性的对象吗?

但是nameaction 本身也是对象吗?我不太明白对象和属性之间的区别。

对象元素和节点有什么区别?

我了解 html、css、javascript 和 dom 的基础知识。但是有人可以在这里为我描述一下这些部分是如何相互通信的吗?

因为有太多的元素、属性和方法。所以我都迷路了

【问题讨论】:

    标签: javascript dom object


    【解决方案1】:

    在我看来,您的问题在于不了解面向对象编程背后的概念。 JavaScript 是一种面向对象的语言。您可能应该使用quick tour of the concepts

    不过,简而言之,对象是一种封装数据(您所指的“属性”)和功能(您可以要求对象执行的“方法”或“功能”)的方法。

    在 JavaScript DOM 的情况下,有一个对象树,其中每个对象都包含本身就是对象的属性。因此,您可以拥有一个带有诸如 onSubmit() 之类的方法和诸如“元素”之类的属性的 Form 对象,它是一个表单字段数组。数组中的每个元素都是另一个对象,可能是 TextField 对象或 Checkbox。

    所以现在你知道对象了。关于对象的一件事是它们可以从对象的父类继承属性。例如,在 JavaScript 中,有一个 Element 类,每个表单字段对象都是 Element 类的“子类”的一个实例。因此,由于 Element 定义了“name”属性,并且 TextField 和 Checkbox 以及它们的所有朋友都继承自 Element,它们都自动拥有这个“name”属性。

    术语“节点”是指树或图形结构中的特定位置。在这种情况下,DOM(文档对象模型)定义了允许作为代表网页的树中的节点的对象类型。对于您访问的每个网页,浏览器都会构建一个“DOM 树”,它是一棵代表网页中每个元素的对象的大树。

    请注意,HTML 自然是树状结构:html 标签包含 head 和 body,head 标签包含 title、meta 和 script 标签,meta 标签包含 name 和 content 等属性。这一切都被浏览器排列成一棵对象树,而那个就是你在使用 JavaScript 进行 DOM 编程时所操纵的。

    回顾一下:对象是 JavaScript 中数据和功能的基本表示。元素是特定的对象类,它们是“元素”类的子类,代表某种形式的字段。这些可以在 form.elements 数组中找到,它是表单对象的一个​​属性。最后,节点是构成网页的标签、文本、脚本和其他对象树中的点。

    希望对您有所帮助!

    【讨论】:

      【解决方案2】:

      我以前教过人们有关 DOM 的知识,并发现看到了 DOM 的实际作用。

      去买萤火虫,如果你没有的话。 http://getfirebug.com/

      当然是在重启 Firefox 之后...

      打开任何网页并右键单击某些内容,将会有一个名为“检查元素”的选项。这将显示页面的渲染代码。当我说渲染时,我指的是被任何 javascript 修改后的页面,与标准源代码不同,标准源代码只是从服务器发送的直接 HTML。

      您正在检查的元素将被突出显示。现在,右键单击该突出显示的元素并选择“Inspect in DOM Tab”。

      进入 DOM 选项卡后,它会显示您检查的元素的所有属性。在这里,您可能会看到元素的属性(如 type="input")、元素的方法(如 focus())、自定义原型、Firefox 专有属性等等。

      以下是您需要了解的列表中的一些方法、函数和属性,请在 Mozilla 开发人员中心查找这些内容。花一些时间编写脚本,让您在 DOM 中移动并允许您使用这些脚本来更改它,不要使用 innerHTML 来做任何事情。

      • 创建元素
      • 创建文本节点
      • 追加子项
      • 插入之前
      • 删除孩子
      • 克隆节点
      • 设置属性
      • 移除属性
      • getElementById
      • getElementsByTagName
      • 子节点
      • 第一个孩子
      • 最后一个孩子
      • 下一个兄弟
      • 有ChildNodes
      • 标签名
      • attachEvent (IE) / addEventListener(所有其他)
      • detachEvent (IE) / removeEventListener(所有其他)

      【讨论】:

        【解决方案3】:

        HTML 属性公开为 元素对象的属性。

        元素 = 对象,属性 = 属性。方法只是一个可调用的属性,例如 onclick。

        <form
        onsubmit="alert('hi');"
        id="contact-form"
        >
        

        onsubmit 是一个方法,id 是一个属性,form 是一个节点类型为 1 的节点,这意味着它是一个 HTMLElement,并且继承了通用的 HTML 属性。

        【讨论】:

        • 你很困惑。元素!= 对象({} 不是元素),属性!= 属性。元素和属性是 DOM 的术语,对象和属性是 JS 的术语。一个好的答案可以解释这一点以及 DOM 到 JS 的映射,因此是反对票。
        • 它们可以互换,因为所有元素都是 DOM 对象,所有属性都是属性。
        【解决方案4】:

        在您的示例中,名称和操作是表单对象的属性。 如果您在 JSP 页面中有类似的内容

        <form name="frm" action="somepage.jsp" onSubmit=" return validateForm();">
          <input type="text" name="txtField" id="txtField"></input>
          <input type="submit" value="submit"></input>
        </form>
        

        还有一个类似这样定义的 js 函数,用于检查是否在文本框中输入了任何文本。

        <script>
          function validateForm(){
            if(document.frm.txtField.value="")
               return false;
            else
               return true;
          }
         </script>
        

        您可以使用文档对象来访问 dom 中的表单对象,并从该对象访问表单所包含的输入元素。

        【讨论】:

          猜你喜欢
          • 2011-08-15
          • 1970-01-01
          • 1970-01-01
          • 2010-12-21
          • 2011-11-14
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多