JS DOM 编程复习笔记 -- 属性操作（十）

今天我们来复习HTML属性和DOM对象属性之间的关联和使用。

当浏览器加载HTML页面时，会根据文档的DOM节点生成相应的DOM对象。

比如，下面的HTML中包含一个input元素

<input type="text" id="username">

浏览器会生成一个HTMLInputElement对象

input元素有两个属性

• type属性的值为text
• id属性的值为username

生成的HTMLInputElement对象也将具有相应的属性

• input.type为text
• input.id为username

换而言之，浏览器会自动将HTML元素的属性转换为DOM对象的属性。

但是，浏览器仅将标准属性转换为 DOM 对象的属性。

例如下面的secured属性为我们自定义的属性，所以就访问不到。

<input type="text" id="username" secured="true">

<script>
  let input = document.querySelector('#username');
  console.log(input.secured); // undefined
</script>

属性操作方法

要访问自定义属性可以使用下面的方法

• element.getAttribute(name) – 获取属性的值
• element.setAttribute(name, value) – 设置属性值
• element.hasAttribute(name) – 判断属性是否存在
• element.removeAttribute(name) – 删除属性

attributes属性

element.attributes属性用来获取元素上的属性集合，

<input type="text" id="username" secured="true" value="1223">

<script>
  let input = document.querySelector