初识DOM(三)

在我们掌握了获取特定元素的方法之后,我们还可以继续想办法获取它的各个属性(getAttribute方法)和更改节点属性的值(setAttribute)。

1.getAttribute

getAttribute() 方法返回指定属性名的属性值。

使用方法:object.getAttribute(attribute)

它只有一个参数,就是你打算查询的属性的名字。

因为getAttribute方法不属于document对象,所以不能通过document对象调用。它只能通过元素节点对象调用,所以我们这里就要用到getElementsByTagName方法。

还是用到之前的代码:


初识DOM(三)_第1张图片

在body中加入下面的代码:


初识DOM(三)_第2张图片

运行结果:

初识DOM(三)_第3张图片

在代码中,只有一个

元素,并且它有title属性,所以alert对话框中显示了一段文本就是这个

元素的title属性的值。如若我将title的属性值改成了空的,那么它会显示什么呢?这里我就可以用到setAttribute方法来修改了。

2.setAttribute

setAttribute() 方法添加指定的属性,并为其赋指定的值。

使用方法:object.setAttribute(attribute,value)

这个方法有两个参数,第一参数是要修改的属性的名字,第二个参数是属性修改后的值。

现在我们把

元素的属性修改为空的,进行下面的代码修改:


初识DOM(三)_第4张图片

运行结果:

初识DOM(三)_第5张图片

       需要注意的是,通过setAttribute对文档做出修改后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的属性值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。

你可能感兴趣的:(初识DOM(三))