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. tyvj P1519 博彩游戏（AC自动机+DP滚动数组）

    P1519 博彩游戏 背景 Bob最近迷上了一个博彩游戏…… 描述 这个游戏的规则是这样的:每花一块钱可以得到一个随机数R,花上N块钱就可以得到一个随机序列:有M个序列,如果某个序列是产生的随机序列的 ...

  2. 用 ggplot2 在同一个图上画多条颜色不同的线

    假如数据格式是这样: day    邓文迪    微博    城管0    0.0    9.262970888519191E-4    0.01    0.0    0.00144775855013 ...

  3. Esper系列(四)Output

    功能 控制Esper事件流计算结果的输入形式.时间点及频率: 格式 1  ";

  4. Spring笔记(三)AOP前篇之动态代理

    AOP思想是将程序中的业务代码与服务代码进行分离,在运行时进行结合.比较强调程序的层次结构,是一种面向切面的编程.而在AOP实现的底层主要用到了动态代理,而动态代理又分为JDK动态代理和CGLIB动态 ...

  5. HW2.17

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  6. 【ACM/ICPC2013】树形动态规划专题

    前言:按照计划,昨天应该是完成树形DP7题和二分图.最大流基础专题,但是由于我智商实在拙计,一直在理解树形DP的思想,所以第二个专题只能顺延到今天了.但是昨天把树形DP弄了个5成懂我是很高兴的!下面我 ...

  7. python seq

    missing parentheses in call to print  ==> python高版本 print("") name 'raw_input' is not d ...

  8. Java 下 SSL 通信原理及实例

    有关SSL的原理和介绍在网上已经有不少,对于Java下使用keytool生成证书,配置SSL通信的教程也非常多.但如果我们不能够亲自动手做一个SSL Sever和SSL Client,可能就永远也不能 ...

  9. maven 通过nexus创建工厂的配置

    访问中央工厂的地址:http://localhost:8081/nexus/index.html#welcome   admin.admin123 查找到自己配置的maven仓库的位置,编辑setti ...

  10. AngularJS开发下一代Web应用笔记（一）

    一.写在最前 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM操作.MVC设计模式和模块加载等. 现在网上JS框架茫茫多,真 ...