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="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个基本方法的更多相关文章
- dom编程艺术笔记2--第三章
DOM 1.dom:简单理解为文档对象模型<==>节点树 2.宿主对象:浏览器提供的对象—>document对象 3. html标签为树顶点元素 head body为html子元素以 ...
- JavaScript高级编程学习笔记(第三章之一）
继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...
- JavaScript DOM编程艺术 笔记（三）函数
函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...
- javascript dom 编程艺术笔记 第四章：图片库
首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- dom编程艺术笔记1--第二章
第二章语法部分: 1.js注释:<!-- XXXXX 而“-->”这部分js会认为是注释内容的一部分 2.var 声明变量 不用声明变量类型 3.声明使用一个数组语法:var object ...
- JavaScript DOM编程艺术 笔记（二）语句操作
操作 var total = (1+4)*5; year = year +1; year++; var message = "i am" + "girl"; 是 ...
- 程序员编程艺术：第三章续、Top K算法问题的实现
程序员编程艺术:第三章续.Top K算法问题的实现 作者:July,zhouzhenren,yansha. 致谢:微软100题实现组,狂想曲创作组. 时间:2011年05月08日 ...
- 《DOM Scripting》学习笔记-——第三章 DOM
<Dom Scripting>学习笔记 第三章 DOM 本章内容: 1.节点的概念. 2.四个DOM方法:getElementById, getElementsByTagName, get ...
- Javascript高级编程学习笔记（35）—— DOM（1）节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
随机推荐
- Html笔记(八)其他标签
<pre></pre> :此标签内封装的文本数据格式将保持原样,包括空格和缩进等格式.常用于页面中显示带有缩进层次的代码. <p></p> :段落标签, ...
- hdu5601-N*M bulbs（黑白棋盘染色）
一个矩形,一个人从左上角走到右下角,每走过一个位置把0变成1,1变成0. 求有没有可能他离开之后所有的数都是0 假设这个矩形是一个棋盘,黑白相间. 这样会发现从一个颜色走到相同颜色可以对棋盘不产生任何 ...
- 在C#中我们能调用一个类的私有方法吗
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在C#中我们能调用一个类的私有方法吗.
- Cocos2d-x学习笔记之Cocos2d-x开发环境搭建
作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz Cocos2d-x源码包下载地址: http://cocos2d-x.org/projects/cocos2d-x/ ...
- 写一些有关android的东西吧，那时候玩android时候的一些笔记
写一些有关android的东西吧,那时候玩android时候的一些笔记
- Test-NetConnection
有了PowerShell 4.0,排除网络故障的日子就会轻松很多.Test-NetConnection cmdlet将多个测试整合到了一个简单的有几个参数的命令当中.例如,命令Test-NetConn ...
- DNF即将代替Yum
也许你会惊奇在新安装的 Fedroa 22中没有找到 yum 包,也不明白为何在调用 /usr/bin/yum 或使用各种 Yum 插件时会得到警告.嗯,你看到的没错,Yum 已经去了~.直白的说, ...
- STM32 驱动12864液晶显示汉字、图片、画点、横线、竖线、斜线
我做本实验的软件平台为MDK软件,选用STM32VET6,12864液晶屏5v供电采用并行接法.之前本来想网上找一个现成的程序实验一下,但都没找到合适的,于是就自己编写了一个,最终可在12864液晶屏 ...
- 【转】cocos2d-x 模仿计时器效果，动态增加分数——2013-08-25 16
http://www.cocos2dev.com/?p=90 游戏中要用到分数是动态增加的,而不是瞬间加上去的. bool HelloWorld::init() { if ( !CCLayer::in ...
- JNI 学习笔记系列(二)
c中没有Boolean类型的值,一般是使用1表示true,0表示false,c中也没有String类型的数据,c中的字符串要通过char数组来表示.c中没有byte类型,一般用char表示byte类型 ...