javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

JavaScript的 DOM操作，主要是对DOM这三个字母中D、O、M的操作。D代表的是document(文档)，即我们可以使用javascript对文档进行操作，O代表的是object(对象)，对象包括用户自定义对象，内建对象和宿主对象，这里不再赘述，M代表的是model(模型)，今天我们主要讲的就是model。

model，就是把一份文档表示成一份树状结构的模型(ps：实在找不到图了，我觉得树状结构还是很容易脑补出来的吧！)，这个树状结构由无数个节点组成，因为这个性质，所以，我们可以把整个文档叫做节点树。这些节点组成了整个文档，就像盖房子一样，文档是一座房子，那么节点就是砖头。（这样的比喻还有很多）

节点主要分为三种：元素节点、文本节点，和属性节点。

<p color="red">hello world!</p>

上面这段html代码当中p就是元素节点，hello world！就是文本节点，color=”red”就是属性节点;

今天介绍的5种方法中，有三种就是获取元素的方法

1.document.getElementById(id);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习日记</title>
</head>

<body>
<p id="text">网络就像一个有神奇魔力的水晶球，从中我们可以找到无穷无尽的乐趣。 </p>
<p id="pic"><img src="images/a._Sun.jpg" width="128" height="128" /></p>

<script>

  alert(typeof document.getElementById("text"));

</script>
</body>
</html>

上面这段代码就是使用该方法获取了文档当中id为“text” 的独一无二的元素，该方法返回的是对应此独一无二元素的一个对象，我们用typeof操作符验证结果。上一段代码的输出结果为object。

2.document.getElementsByTagName(tag);

tag表示的是元素的名字，该方法返回的是一个数组，数组中包含了文档中所有此元素对应的对象。

<script> 
  var para=document.getElementsByTagName("p");
  for(i=0;i<para.length;i++){
    alert(typeof para[i]);
  }
</script>

把上面的一段代码代替第一段代码当中的javascript部分，para就是这个文档当中所有p元素的集合，既然是集合，那他必定有length属性，代表数组的长度。输出结果为两个object。

3.getElementsByClassName(class);

HTML5 DOM中新增的方法，获取文档中所有class属性为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){
                results[results.length]=elems[i]
            }
        }
        return results;
        }
    }

下面举一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习日记</title>
</head>

<body>
<p id="text">网络就像一个有神奇魔力的水晶球，从中我们可以找到无穷无尽的乐趣。 </p>
<p id="pic"><img src="images/a._Sun.jpg" width="128" height="128" /></p>
<ul id="line">
<li class="row1">row1</li>
<li class="row1">row1</li>
<li class="row2">row2</li>
<li class="row2">row2</li>
</ul>
<script> 
    var line=document.getElementById("line");
    var row1=line.getElementsByClassName("row1");
    alert(row1.length);
</script>
</body>
</html>

上面的代码表示id为“line”节点下class为“row1”的元素的个数。

4.object.getAttribute(attribute);

获取某元素的属性值

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

上面代码获取了img标签的width属性的值。

也可以在for循环里面加一个if判断，判断可不可以取到相应的属性，提高代码的可读性。

5.object.setAttribute(attribute,value);

设置某个元素属性的值。

var imgs=document.getElementsByTagName("img");
    for(var i=0;i<imgs.length;i++){
        var width_val=imgs[i].getAttribute("width");
        if(width_val){
        imgs[i].setAttribute("width","228");
        }
    }

把img的width属性值设置为“228”。

以上的5个方法是dom操作中最基本，最常用的5个方法。

posted @ 2016-03-25 20:43 有礼貌的Wu 阅读(749) 评论(0) 收藏举报

刷新页面返回顶部

故事情结

javascript dom编程艺术笔记第三章：DOM操作的5个基本方法

公告