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="data: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="data: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个方法。

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

  1. dom编程艺术笔记2--第三章

    DOM 1.dom:简单理解为文档对象模型<==>节点树 2.宿主对象:浏览器提供的对象—>document对象 3. html标签为树顶点元素 head body为html子元素以 ...

  2. JavaScript高级编程学习笔记(第三章之一）

    继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...

  3. JavaScript DOM编程艺术 笔记（三）函数

    函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...

  4. javascript dom 编程艺术笔记 第四章：图片库

    首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  5. dom编程艺术笔记1--第二章

    第二章语法部分: 1.js注释:<!-- XXXXX 而“-->”这部分js会认为是注释内容的一部分 2.var 声明变量 不用声明变量类型 3.声明使用一个数组语法:var object ...

  6. JavaScript DOM编程艺术 笔记（二）语句操作

    操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...

  7. 程序员编程艺术：第三章续、Top K算法问题的实现

    程序员编程艺术:第三章续.Top K算法问题的实现 作者:July,zhouzhenren,yansha.     致谢:微软100题实现组,狂想曲创作组.     时间:2011年05月08日    ...

  8. 《DOM Scripting》学习笔记-——第三章 DOM

    <Dom Scripting>学习笔记 第三章 DOM 本章内容: 1.节点的概念. 2.四个DOM方法:getElementById, getElementsByTagName, get ...

  9. Javascript高级编程学习笔记（35）—— DOM（1）节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

随机推荐

  1. Fibonacci数列小程序

    Fibonacci数列小程序 问题分析:Fibonacci数列特征是前两项数均为1,从第三项起,前两项的和为第三项的数的数值用公式归纳起来为:f1=f2=1.f1=f1+f2.f2=f1+f2. 程序 ...

  2. Add And Reset a Federation Server to a Federation Server Farm adfs ad

    Applies To: Active Directory Federation Services (AD FS) 2.0 After you install the Active Directory ...

  3. post方法

    CookieContainer cookie = new CookieContainer(); private string HttpPost(string Url, string postDataS ...

  4. ajaxfileUpload ajax 上传图片使用

    前台html: <div class="b-mg15 img-text" room_id="<?= $items['id'] ?>"> ...

  5. Unrecognized Windows Sockets error: 0: JVM_Bind 异常解决办法

    java.net.SocketException: Unrecognized Windows Sockets error: 0: JVM_Bind 此异常的原因是服务器端口被占用 所以解决办法是: 一 ...

  6. matlab两种不同模式的并行运算

    1.distributed job      distributed job是一种比較简单的并行任务.假定用户须要完毕一组作业.各个计算作业之间是独立的.并且相互之间不须要进行数据通信.这意味着各个作 ...

  7. Android SDK Manager无法更新问题解决

    有时候在网络不好的情况下,android sdk manager更新可能一直报错.原因跟国内对于google相关服务的访问受限有关系,需要设置代理访问. 最近也遇到了这个问题.解决方法如下. 启动An ...

  8. sendStickyBroadcast和sendStickyOrderedBroadcast

    sendStickyBroadcast和sendStickyOrderedBroadcast发出的广播会一直滞留(等待),以便有人注册这则广播消息后能尽快的收到这条广播.其他功能与sendBroadc ...

  9. leecode 每日解题思路 127-Factorial Trailing Zeroes

    原题描述: 原题地址: Factorial Trailing Zeroes 题目描述很直接, 给出一个整数N, 求这个N的阶乘后尾有几个零.(要求O(logN)时间复杂度) 个人思路: 一开始,最简单 ...

  10. NIO学习：异步IO实例

    工作模式: 客户端代码: package demos.nio.socketChannel; import java.io.ByteArrayOutputStream; import java.io.I ...