在我们掌握了获取特定元素的方法之后,我们还可以继续想办法获取它的各个属性(getAttribute方法)和更改节点属性的值(setAttribute)。
1.getAttribute
getAttribute() 方法返回指定属性名的属性值。
使用方法:object.getAttribute(attribute)
它只有一个参数,就是你打算查询的属性的名字。
因为getAttribute方法不属于document对象,所以不能通过document对象调用。它只能通过元素节点对象调用,所以我们这里就要用到getElementsByTagName方法。
还是用到之前的代码:
在body中加入下面的代码:
运行结果:
在代码中,只有一个<p>元素,并且它有title属性,所以alert对话框中显示了一段文本就是这个<p>元素的title属性的值。如若我将title的属性值改成了空的,那么它会显示什么呢?这里我就可以用到setAttribute方法来修改了。
2.setAttribute
setAttribute() 方法添加指定的属性,并为其赋指定的值。
使用方法:object.setAttribute(attribute,value)
这个方法有两个参数,第一参数是要修改的属性的名字,第二个参数是属性修改后的值。
现在我们把<p>元素的属性修改为空的,进行下面的代码修改:
运行结果:
需要注意的是,通过setAttribute对文档做出修改后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的属性值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。