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. sql执行计划

    http://www.cnblogs.com/kissdodog/p/3160560.html

  2. HDU3695 - Computer Virus on Planet Pandora(AC自动机)

    题目大意 给定一个文本串T,然后给定n个模式串,问有多少个模式串在文本串中出现,正反都可以 题解 建立好自动机后.把文本串T正反各匹配一次,刚开始一直TLE...后面找到原因是重复的子串很多以及有模式 ...

  3. POJ1751--Highways（最小生成树，kauskal）

    裸最小生成树.用kauskal做方便一些. 不得不说这么大数据用cin cout 真是作死..活该T那么多次... /***************************************** ...

  4. 页面接口防刷 解决思路一nginx

    线上环境 很多接口 如果不做缓存 可能导致有人拿到url  每秒几万次的访问后台程序,导致系统down机. 此处, nginx可以加一层缓存. expires起到控制页面缓存的作用,合理的配置expi ...

  5. POJ 1179 IOI1998 Polygon

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5472   Accepted: 2334 Description Polyg ...

  6. 用Natvis定制C++对象在Visual Studio调试时如何显示

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Natvis定制C++对象在Visual Studio调试时如何显示.

  7. tomcat热部署，更改java类不用重新加载context

    修改类后,tomcat热部署会重新加载整个项目的context,影响开发效率.网上查的大多数是将server的modules标签中Auto Reload项改为Disabled,但是没有效果. 使用以下 ...

  8. android 开源项目学习<二>

    roottools:   RootTools gives Rooted developers easy access to common rooted tools...  https://code.g ...

  9. Android自由行之走进zxing,轻松实现二维码扫描

    现在很多App都集成了扫一扫功能,最常用的微信.QQ.手机助手等.二维码也使得生活变得更加简洁,扫一扫订餐.扫一扫下载等等.那么,说到二维码,我们不得不提Google一个开源的扫码框架:zxing. ...

  10. Win8启用便签

    启动或显示 Sticky Notes : Win+R--->StikyNot.exe 备份Sticky Notes保存位置 : %AppData%\Microsoft\Sticky Notes\ ...