《JavaScript DOM 编程艺术》06：获取与修改属性

《JavaScript学徒》系列会以经典书籍为教材制作影片，和大家一起学习JavaScript。

本文同步发表于我的个人网站：ZackLive

这是《JavaScript学徒》系列的第六课，今天会继续《JavaScript DOM 编程艺术》第3章，介绍如何用DOM方法获取与修改元素属性。

教学视频连结

YouTube

优酷

B站

获取属性：getAttribute

object.getAttribute(attribute)

var para = document.getElementsByTagName("p");

for (var i = 0; i < para.length; i++) {

  alert(para[i].getAttribute("title"));

}

若属性不存在，则返回null。对if语句来讲null就等于false，属性存在时会返回的字符串，而字符串只要不是空的，对if来讲就是true。

var para = document.getElementsByTagName("p");

for (var i = 0; i < para.length; i++) {

  text = para[i].getAttribute("title")

  if (text) alert(text);

}

只有属性存在时才alert。

修改属性：setAttribute

object.setAttribute(attribute, value)

同样透过元素节点对象调用。

var buyList = document.getElementById(purchases);

alert(buyList.getAttribute("title"));

buyList.setAttribute("title", "things to buy");

alert(buyList.getAttribute("title"));

若属性原本不存在，则会先创建，再赋值。

当你查看网页的源代码时，并不会看到修改后的内容，因为浏览器会先载入网页，再运行JavaScript进行动态修改，因此所有修改并不会影响原本的网页文件（HTML）。

文本节点？

我们知道节点有三种：元素节点、属性节点和文本节点。而我们学习了：

元素节点的获取：

getElementById

getElementsByTagName

getElementsByClassName

属性节点的获取与修改：

getAttribute

setAttribute

那文本节点又是如何操作的呢？这便是《JavaScript DOM 编程艺术》第四章的重点。