javascript设置和获得属性
2018-10-27 本文已影响0人
moly琴
获得属性(元素节点的函数)
如：
object.getAttribute(attribute)
<body>
<div id="demo"></div>
<script>
var demo = document.getElementById("demo");
demo.setAttribute("title","test");
alert(demo.getAttribute("title"));
</script>
</body>
注意：属性名要用引号引起来
设置属性（元素节点的函数方法）
若原本就有的属性，那么设置的值将会成为新的值，覆盖掉之前的值。
该方法是“第1级DOM”的组成部分。它可以设置任意元素节点的任意属性。
object.setAttribute(attribute,value)
<body>
<div id="demo"></div>
<script>
var demo = document.getElementById("demo");
demo.setAttribute("title","test");
alert(demo.getAttribute("title"));
</script>
</body>
值得注意的是：
在浏览器中查看源码：源码里并不会显示增加的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="demo"></div>
<script>
var demo = document.getElementById("demo");
demo.setAttribute("title","test");
alert(demo.getAttribute("title"));
</script>
</body>
</html>
但是在控制台中：会显示出修改后的状态
设置元素属性image.png
通过setAtrribute对文档的修改，在通过浏览器view source选项去查看源代码时看到的仍是之前的状态，其做出的修改不会反映在文档本身的源代码里。
这种表里不一的现象源自于DOM的工作模式：先加载文档的静态内容，再动态刷新,动态刷新不影响文档的静态内容。
这个时候展示的就是DOM的真正威力。
对页面内容进行刷新却不需要在浏览器里刷新页面。
值得注意的点：
虽然可以用老方法object.attribute = value;给部分元素设置属性。
但是：
DOM是一种适用于多种环境和多种程序设计语言的通用型API。
“第1级DOM”的可移植性更好
老方法只适用于web文档，DOM则适用于任何一种标记语言。
