DOM编程艺术学习（一）

DOM，Document Object Model。

当创建一个网页，并加载到Web浏览器中时，DOM将网页文档转换为一个文档对象。DOM把一份文档表示为一棵树。

图片来自w3school

1.节点（node）

节点：表示网络中的一个连接点，一个网络是由一些节点构成的集合。

每一个HTML元素就是元素节点，例如<p>、<ul>。

HTML元素内的文本是文本节点。

元素的属性是属性节点，例如title、color。

注释是注释节点。

获取元素

（1）getElementById()

返回指定有id 属性值的元素节点对应的对象。

<script>
alert(typeof document.getElementById("title"));
</script>

一般可使用typeof操作符来验证返回值是字符串、数值、函数、布尔值或对象。

（2）getElmentsByTagNme()

返回一个对象数组，每个对象分别对应文档里有给定标签的一个元素。

（3）getElementsByClassName()

HTML5 DOM新增功能，只有较新的浏览器可以使用。可通过class属性中的类名访问元素。

getElementsByClassName(class)

function getElementsByClassName(node,classname){
  if(node.getElementsByClassName){
    return node.getElementsByClassName(classname);
  }else{
  var results=new Array();
  var elems=node.getElementsByTagname("*");
  for(var i=0;i<elems.length;i++){
    if(elems[i].className.indexOf(classname)!=-1){
      resultd[results.length]=elems[i];
    }
  }
}

node表示DOM树的搜索起点，classname是要搜索的类名。如果传入的节点上有getElementsByClassName函数，则直接调用此函数，若没有，则循环遍历所有标签，查找带有相应类名的元素。（此方法不使用于多个类名。）

2.获取和设置属性

getAttribute

object.getAttribute(attribute)可以获取元素的属性。此方法不属于document对象，只能通过元素节点对象调用。可与元素获取方法合用。

var paras=document.getElementsByTagName("p");
for (var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("title"));
}

//改进版，检查属性是否为空
<pre name="code" class="html">var paras=document.getElementsByTagName("p");
for (var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute("title");
if(title_text) alert(title_text);
}

setAttribute

此方法允许我们对属性节点的值做出修改，只能用于元素节点。

object.setAttribute(attribute,value)

var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
  var title_text=paras[i].getAttribute("title");
  if(title_text){
    paras[i].setAttribute("title","brand new title text");
    alert(paras[i].getAttribute("title"));
  }
}

通过setAttribute对文档做出修改后，在通过浏览器的view source选项去查看源代码时，看到的是修改前的属性值。setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。DOM对页面内容进行刷新却不需要在浏览器里刷新页面。