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. oracle 存储过程 动态sql语句

    一.在oracle项目开发中越到问题: 在利用ODP向oracle中插入数据时,如果这样写:   insert into clobTable (id, story) values(1,'....'); ...

  2. 2013 ACM区域赛长沙 H zoj 3733 (hdu 4798) Skycity

    题意:一个圆台,底面和顶面半径分别为R,r,然后高度为H,一共F层,每层高度一样,然后要在每层的天花板上贴方格玻璃,方格玻璃要满足以下几个条件: 方格玻璃面积不能小于S,且方格玻璃要围成一个正多边形, ...

  3. 新浪微博、腾讯微博、QQ空间、人人网、豆瓣 一键分享API

    新浪微博: http://service.weibo.com/share/share.php?url= count=表示是否显示当前页面被分享数量(1显示)(可选,允许为空) & url=将页 ...

  4. nginx 多域名配置 （nginx如何绑定多个域名）

         nginx绑定多个域名可又把多个域名规则写一个配置文件里,也可又分别建立多个域名配置文件,我一般为了管理方便,每个域名建一个文件,有些同类域名也可又写在一个总的配置文件里. 一.每个域名一个 ...

  5. MSSQLSERVER数据库- 判断全局临时表是否存在

    写一下今天遇到的一个问题. 今天因为一些作用域的问题,我使用了全局临时表,然后我在存储过程里使用了这么一段语句,想判断全局临时表是否存在,如果不存在,则将他DROP掉. 可是这段语句没用. if ex ...

  6. spring4使用websocket

    看到spring4的介绍上说已经支持websocket了,尝试了一下之后各种坑,不如servlet简单,写篇文章来讲解一下自己遇到的坑. 环境:tomcat8+spring4.1.6+jdk8+ngi ...

  7. UVa 497 - Strategic Defense Initiative

    题目:最大上升子序列.输出一组解. 分析:dp,LIS.数据较小 O(n^2)算法就可以. 设以第i个数字作为最大上升子序列中的最后一个数的长度为 f(i),则有转移方程: f(i)= max(f(j ...

  8. [caffe]深度学习之图像分类模型VGG解读

    一.简单介绍 vgg和googlenet是2014年imagenet竞赛的双雄,这两类模型结构有一个共同特点是go deeper.跟googlenet不同的是.vgg继承了lenet以及alexnet ...

  9. 这难道是CSDN的BUG？ 大家帮忙看看哪里有问题

    问题: 有位网友发私信给我,提问关于网络project专业以后这么就业,要掌握哪些技术? 我就给回复, 内容例如以下: 你好,很抱歉这么晚才给你回复.对于网络project专业,就业范围事实上挺广泛的 ...

  10. Spring3.0 AOP 具体解释

    一.什么是 AOP. AOP(Aspect Orient Programming),也就是面向切面编程.能够这样理解,面向对象编程(OOP)是从静态角度考虑程序结构,面向切面编程(AOP)是从动态角度 ...