在语句中分配 getElementById() 返回的 HTML 元素对象的属性？答案

【问题标题】：Assigning property's of HTML Element Objects returned by getElementById() in a statement?在语句中分配 getElementById() 返回的 HTML 元素对象的属性？
【发布时间】：2015-09-23 05:50:29
【问题描述】：

这是一个对我有意义的陈述

var x = object.function();

变量x的值等于对象函数的返回值。

或

var y = object.property;

变量y的值等于对象的属性。

但是我看不懂下面的代码：

 document.getElementById("demo").innerHTML = "Paragraph changed!";

在上面，对象document正在调用ITS方法getElementById()。哪个返回一个 HTML 对象 demo，它正在调用 ITS 对象属性 innerHTML？这是正确的吗？

这是一个更令人困惑的陈述......

<button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>

在上面的代码中，innerHTML 属性是否属于 HTML 对象元素演示？如果是，那么 getElementById() 方法属于哪个对象？

作为 OOP 和 Javascript 的新手，我无法完全理解 object.function.property; 语句的概念。或function.property; 声明。

【问题讨论】：

Document.getElementById()
这对你有意义吗？ var y = object.property; object.property2 = y; ?
如果是，则将document.getElementById('demo') 视为您的object，将innerHTML 视为您的property2。 :)

标签： javascript jquery html oop

【解决方案1】：

getElementById() 方法在这里属于document 对象。

【讨论】：

【解决方案2】：

在 javascript 中，如果您愿意，每个函数/代码块都会在范围或上下文中执行。此范围由关键字this 引用。所以当你尝试访问某个变量，或者调用某个函数时，应该在那个作用域中声明它，否则它会在全局作用域中查找，也就是window对象。当您像指定的那样分配onclick 处理程序时，javascript 块getElementById('demo').innerHTML=Date() 的范围将是按钮本身，它属于文档，它具有指定的函数getElementById。因此，您正在调用由document 对象指定的函数getElementById，就像在前面的示例中一样，并且您将其innerHTML 属性分配给新创建的对象new Date() 的字符串值。

但是，正确的实现应该是这样的（假设您使用的是 jQuery）

// Call the function after the DOM is ready
$(function() {
   // Find the button on the page
   $("button")
       .click(function() {     // Assign the handle for the click event
          // Finds the div on the page and assign its innerHTML
          $("#demo")[0].innerHTML = new Date();
       });
})

【讨论】：

【解决方案3】：

document.getElementById("demo") 是一个 DOM 对象，引用 Dom 元素，innerHTML 是该对象的属性。

【讨论】：

【解决方案4】：

考虑一下

var x = object.function();

在你的问题中相当于

var DOMObject = document.getElementById("demo"); // ----------- (1)

现在，这个

var y = object.property;

在你的问题中相当于

var InnerHtml = DOMObject.innerHTML; // ----------- (From 1)

所以说到底，

document.getElementById("demo").innerHTML = "Paragraph changed!";

只是一种简单的方法

var DOMObject = document.getElementById("demo");
DOMObject.innerHTML = "Paragraph changed!";

【讨论】：