在 HTML 文档中,每个元素都有一些属性,这些属性可以用来获取或设置元素的内容、样式、行为等。HTML DOM(文档对象模型)提供了访问和操作这些属性的方法,使得我们可以通过 JavaScript 来动态地修改页面上的内容。
获取属性值
要获取一个元素的属性值,可以使用 getAttribute()
方法。这个方法接受一个参数,即要获取的属性的名称,并返回该属性的值。例如,要获取一个 <div>
元素的 id 属性值,可以这样写:
--- --- - --------------------------------- --- -- - ----------------------- ---------------- -- -- -------
设置属性值
要设置一个元素的属性值,可以使用 setAttribute()
方法。这个方法接受两个参数,第一个参数是要设置的属性的名称,第二个参数是要设置的属性的值。例如,要设置一个 <img>
元素的 src 属性值,可以这样写:
--- --- - --------------------------------- ----------------------- -----------
删除属性
要删除一个元素的属性,可以使用 removeAttribute()
方法。这个方法接受一个参数,即要删除的属性的名称。例如,要删除一个 <a>
元素的 href 属性,可以这样写:
--- ---- - ---------------------------------- -----------------------------
常用属性
除了上面提到的 id、src、href 等属性之外,还有一些常用的属性,如 style、className、innerHTML 等。这些属性可以用来设置元素的样式、类名、内容等。例如,要设置一个 <p>
元素的文本内容和背景颜色,可以这样写:
--- - - ---------------------------------- ----------- - ------- -------- ----------------------- - ------------
在实际开发中,熟练掌握这些属性的使用方法将会极大地提高我们操作 DOM 的效率和灵活性。接下来,我们将介绍如何通过 HTML DOM 事件来实现交互功能。