ＤＯＭ（3）

１.文档：DOM中的“D”
当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把编写的网页转化为一个文档对象。
2.对象：ＤＯＭ中的“Ｏ”
对象是是一种自足的数据集合，与某个特定对象相关联的变量被称为这个对象的属性；只能通过某个特定对象去调用的函数称为这个对象的方法。
js中对象分为三种：
（1）用户自定义对象
（2）内建对象：内建在js中的对象。包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。
（3）宿主对象：由浏览器提供的对象。包括DOM和BOM。
& & &window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM。
& & &DOM对此昂的主要功能是处理网页内容。
３.模型：ＤＯＭ中的“Ｍ”
DOM代表加载到浏览器窗口的当前网页，DOM把一份文档表示为一棵家谱树。浏览器提供了网页的模型，而我们可以通过js去读取这个模型。
DOM由许多不同的节点构成：元素节点、文本节点、属性节点等
5.获取元素：
有4种DOM方法可以获取元素节点：
（1）getElementById：document对象特有的函数，返回具有给定id的元素节点对应的对象。
（2）getElementsByTagName:返回一个数组，这个数组中的每个元素都是对象
& & &允许把通配符（“*”）作为参数，可获取文档中所有元素。
& & &getElementById和getElementsByTagName可结合起来使用：
& & &例如：
& & &var shopping=document.getElementById(&purchases&);
& & &var items=shopping.getElementsByTagName(&*&);
(3)getElementsByClassName:（html5 DOM新添的方法）返回一个具有相同类名的元素的数组。
& & &document.getElementsByClassName(&inportant sale&);类名的顺序与元素中类名的顺序不一致并不重要，就算元素带有更多 & & & & & & & & 的类名也没有关系。
& & &getElementsByClassName也可和getElementById结合使用。
& & &这个方法只有较新的浏览器才支持它，下面这个函数能适用于新老浏览器：
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(&classname&);
var result=[];
var elems=document.getElementsByTagName(&*&);
for(var i=0,len=elems.i&i++){
if(elems[i].className.indexOf(classname)!=-1){
result[result.length]=elems[i];
（4）&document.getElementsByName：通过元素名称来获取元素对象，返回的是一个数组
6.获取和设置属性
getAttribute()和setAttriute()方法不属于document对象，所以不能通过document对象调用，它只能通过元素节点对象调用。
这里有一个细节：通过setAttribute对文档做出修改之后，在通过浏览器查看源代码时看到的仍将是改变前的属性值，也就是说setAttribute做出的修改不会反映在文档本身的源代码里，这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面的内容进行刷新却不需要再浏览器里面刷新。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：16361次
排名：千里之外
原创：56篇
转载：24篇
(2)(6)(4)(21)(30)(13)2012年2月 Web 开发大版内专家分月排行榜第二
2012年7月 Delphi大版内专家分月排行榜第二
2013年8月 Delphi大版内专家分月排行榜第三2012年8月 Delphi大版内专家分月排行榜第三2012年6月 Delphi大版内专家分月排行榜第三
2017年3月 PHP大版内专家分月排行榜第三2016年12月 PHP大版内专家分月排行榜第三2016年11月 PHP大版内专家分月排行榜第三2014年10月 PHP大版内专家分月排行榜第三2014年8月 PHP大版内专家分月排行榜第三2014年3月 PHP大版内专家分月排行榜第三2014年1月 PHP大版内专家分月排行榜第三2012年8月 PHP大版内专家分月排行榜第三2012年2月 PHP大版内专家分月排行榜第三2012年1月 PHP大版内专家分月排行榜第三2011年12月 PHP大版内专家分月排行榜第三2011年11月 PHP大版内专家分月排行榜第三2011年6月 PHP大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。2635人阅读
Web前端（19）
&button dataid=&1& class=&btn btn-primary btn-xs hanblog_edit&&修改&/button&juqery:
$(document).ready(function() {
$(&.hanblog_edit&).click(function(){
//|获取当前对象的 data id 属性值
alert($(this).attr(&dataid&));
运行结果：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：88816次
积分：3181
积分：3181
排名：第9199名
原创：235篇
转载：31篇
(7)(8)(26)(33)(10)(11)(10)(26)(30)(20)(9)(13)(3)(7)(4)(3)(7)(1)(7)(5)(26)3421人阅读
前端（30）
getAttribute()方法
通过元素节点的属性名称获取属性的值。
elementNode.getAttribute(name)
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&
&title&getAttribute()&/title&
&p id=&intro&&课程列表&/p&
&li title=&第1个li&&HTML&/li&
&li&CSS&/li&
&li title=&第3个li&&JavaScript&/li&
&li title=&第4个li&&Jquery&/li&
&li&Html5&/li&
&p&以下为获取的不为空的li标签title值:&/p&
&script type=&text/javascript&&
var con=document.getElementsByTagName(&li&);
for (var i=0; i& con.i++){
text=con[i].getAttribute(&title&);
if(text!=null)
document.write(text+&&br&&);
HTMLCSSJavaScriptJqueryHtml5
以下为获取的不为空的li标签title值:
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：280023次
积分：5257
积分：5257
排名：第4345名
原创：255篇
转载：81篇
评论：90条
(1)(13)(1)(2)(2)(1)(2)(2)(26)(3)(1)(1)(4)(2)(5)(14)(12)(6)(7)(3)(12)(33)(2)(4)(14)(7)(9)(19)(7)(16)(42)(49)(10)(3)}