如何在DOM中更改输入字段的属性

时间:2018-11-27 02:15:55

标签: javascript html

我想使用jquery插件“ datedropper”。 Datedropper

要设置默认日期,插件将在输入字段上使用属性:

<input id="addjobstartdate" data-default-date="CURRENT DATE"/>

我想动态更改默认日期,所以我尝试使用:

document.getElementById("addjobstartdate").setAttribute('data-default-date', getjobdetails[31]);    

$('#addjobstartdate').attr('data-default-date', getjobdetails[31]); 

但是,当我查看页面的源代码时,这两个命令都不会更改DOM。

数据默认日期仍为“当前日期”。有人可以向我解释一下。

3 个答案:

答案 0 :(得分:1)

通过客户端代码更改HTML元素的属性时,更改不会反映在源代码或开发工具中。尝试在控制台中运行$('#addjobstartdate').attr('data-default-date')以确认该值。

编辑: 我站得住了。开发工具确实会更新值。不知道这是否改变。您的代码似乎正确。

答案 1 :(得分:1)

如果您想查看DOM中的更改,这对我有用:

document.getElementById("addjobstartdate").dataset.defaultDate = "TODAY"
<input id="addjobstartdate" data-default-date="CURRENT DATE"/>

MDN

答案 2 :(得分:1)

“源代码”与当前加载到内存中的“文档对象”不同。在查看源代码时,您所看到的只是传递给客户端计算机进行处理的原始代码。

一旦客户端修改,更改将仅保留在内存中。通过查看开发人员工具(在浏览器中按F12)并单击“元素”选项卡,可以看到这些更改。此选项卡向您显示当前内存中的代码(也称为DOM或文档对象模型)。

现在,在JavaScript中使用DOM对象时,有两种方法可以影响 元素的当前状态 ,了解使用这些对象的效果非常重要两种技术:

  1. 使用元素的当前HTML状态(通过 setAttribute()removeAttribute()getAttribute())。在“元素”标签中查看DOM时,这些类型的更改将可见。
  2. 使用元素在内存中的元素的 当前DOM对象状态 (通过代表当前状态的JavaScript属性完成)。这些类型的更改不会对“元素”选项卡中显示的标记造成任何更改,但是会通过保留在内存中来影响元素。

最重要的是, property 值可能与 attribute 值不同。这可能会造成混淆,但是HTML状态是元素从外观上看,属性状态实际上是在内部发生的事情,例如您可以戴上笑脸,以便看着您的人认为您很高兴(HTML状态),但实际上您可能会为之感到难过(财产状态)。

当尚未设置属性状态时,属性状态就很重要,并且将完全控制元素的状态。设置属性状态后,它将覆盖属性状态可能存在的任何内容,并控制元素的实际状态。

// Get a reference to the button
var btn = document.querySelector("[type=button]");

// Test what the current HTML state is:
console.log("disabled attribute state: ", btn.getAttribute("disabled"));

// Test what the current mapped property state is:
console.log("disabled property state: ", btn.disabled);

console.log("...changing button's disabled PROPERTY to false...");

// Change the property state, which will override the HTML state and 
// and cause it to become enabled.
btn.disabled = false;

// Test what the current HTML state is:
console.log("disabled attribute state: ", btn.getAttribute("disabled"));  // null because property overrode HTML

// Test what the current mapped property value is:
console.log("disabled property state: ", btn.disabled);
<input type="button" value="I'm disabled" disabled="disabled">