一、DOM基础
DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似Window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。
1、节点
加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。

从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。head标签是html标签的子标签，meta和title标签之间是兄弟关系。如果把每个标签当做一个节点的话，那么这些节点组合成了一棵节点树。
注：后面我们经常把标签称作为元素，是一个意思。

2、节点种类

示例：

<div title="属性节点">测试Div</div>

节点分为三类：
 1、元素节点：其实就是标签，即：<div></div>
 2、文本节点：其实就是标签内的纯文本，即：测试Div
 3、属性节点：其实就是标签的属性，即：title=“属性节点”

二、查找元素
W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作，分别为getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　                 元素节点方法

 方法  说明
 getElementById()  获取特点ID元素的节点
 getElementsByTagName()  获取相同元素的节点列表
 getElementsByName()  获取相同名称的节点列表
 getAttribute()  获取特点元素节点属性的值
 setAttribute()  设置特点元素节点属性的值
 removeAttribute()  移除特定元素节点属性

1、getElementById()
getElementById()方法，接受一个参数：要获取的元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。
示例：

var box=document.getElementById('box');           //获取id为box的元素节点
     alert(box);

上面的例子，默认情况返回null，这无关是否存在id='box'的标签，而是执行顺序问题。

注：DOM操作必须等待HTML文档全部加载完毕以后，才可以获取元素。

解决方法：

1、把script调用标签移到html末尾即可；

2、使用onload事件来处理JS，等待html加载完毕再加载onload事件里面的JS。

window.onload=function(){
        //这里存放当网页所有内容都加载完毕后，再执行的代码
    };

上面的代码可以改为：
   window.onload=function(){
        var box=document.getElementById('box');                //预加载html后执行

alert(box);
    };

注：id表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建同一个命名的id。某些低版本的浏览器会无法识别getElementById()方法，这时需要做一些判断：
   if(document.getElementById){     //判断是否支持getElementById
        alert('但前浏览器支持getElementById');
    };

上面例子中的代码最终修改为：

window.onload=function(){
     if(document.getElementById){
               var box=document.getElementById('box');
               alert(box);
      }else{
               alert('浏览器不兼容，请更换浏览器');
      }
};

当我们通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　元素节点属性

属性 说明
tagName 获取元素节点的标签名
innerHTML 获取元素节点里的内容(即纯文本)，非W3C DOM规范

示例：
document.getElementById('box').tagName;         //获取这个元素节点的标签名 输出DIV

document.getElementById('box').innerHTML;       //获取这个元素节点里面的文本（包含HTML标签）

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　HTML属性的属性

属性 说明
id 元素节点的id名称
title 元素节点的title属性值
style CSS内联样式属性值
className CSS元素的类

示例：

window.onload=function(){
    var box=document.getElementById('box');
    alert(box.id);                   //获取这个元素节点id属性的值，注意；不是属性节点
    alert(box.title);                //获取title属性的值
    alert(box.style);              //获取style属性对象
    alert(box.style.color);     //获取style属性对象中的color属性的值
    alert(box.className);   //获取class属性的值   
};

注：直接调用的属性也可以赋值

示例：

var box=document.getElementById('box');

box.id="KKK";

box.innerHTML="玩转<strong>JS</strong>";         //赋值，可以解析HTML，不是单独的文本（包含HTML标签）。

2、getElementsByTagName()方法
getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。该方法需要一个参数：HTML标签的名称。

document.getElementsByTagName('*');              //获取所有元素
注：IE浏览器在使用通配符的时候，会把文档最开始的HTML的规范声明当作第一个元素。

示例：

window.onload=function(){
     var li=document.getElementsByTagName('li');    //参数传递一个标签名即可
     alert(li);                             //返回一个数组集合，HTMLCollection
     alert(li.length);                  //返回数组的个数
     alert(li[0]);                        //HTMLliElement，返回数组的第一个
     alert(li.item(0));                //返回数组的第一个
     alert(li[0].tagName);        //输出第一个LI标签
     alert(li[0].innerHTML);    //输出第一个<li>标签的文本：即1
};

示例获取body节点：

window.onload=function(){
   //获取body节点对象
   var body=document.getElementsByName('body')[0];
   alert(body);            //返回HTMLBodyElement对象，body节点
};

注：不管是getElementById还是getElementsByTagName，在传递参数的时候，并不是所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦，我们必须坚持养成区分大小写的习惯。

3、getElementsByName()方法
getElementsByName()方法可以获取相同名称（name）的元素，返回一个对象数组HTMLCollection(NodeList)。该方法需要一个参数：HTML标签的name属性的值。

示例：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta/>
  <title>DOM基础</title>  
 </head>
 <body>
    <div  id="box" title="标题" class="pox" style="color:red">测试Div</div>
    <input name="test" type="checkbox" value="测试" checked="checked">
          <ul>
       <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
 </body>
 <script type="text/javascript" src="demo.js"></script>
</html>

JS代码：

window.onload=function(){
      var input=document.getElementsByName('test')[0];
      alert(input.value);                      //输出：测试
      alert(input.checked);                 //输出：true
};

注：对于并不是HTML合法的属性，那么在JS获取的兼容性上也会存在差异，IE浏览器支持本身合法的name属性，而不合法的就会出现不兼容的问题。

4、getAttribute()方法
getAttribute()方法将获取元素中某个属性的值。它和直接使用属性获取属性值的方法有一定区别。

示例：

window.onload=function(){
   var box=document.getElementById('box');
   alert(box.bbb);                            //自定义，W3C不合法，只有IE浏览器支持
   alert(box.getAttribute('style'));    //非IE返回的是style字符串，IE返回的是对象，这里有个不兼容的问题
   alert(box.getAttribute('bbb'));     //自定义，所有浏览器都兼容
};

注：HTML通用属性style和onclick，IE7更低的版本style返回一个对象，onclick返回一个函数式。虽然IE8已经修复了这个bug，但为了更好的兼容，开发人员只有尽可能避免使用getAttribute()访问HTML属性了，或者碰到特殊的属性获取做特殊的兼容处理。

5、setAttribute()方法
setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。

示例：

window.onload=function(){
   var box=document.getElementById('box');
   box.setAttribute('title','标题');                     //创建一个属性和属性值
   box.setAttribute('align','center');                    //设置居中
   box.setAttribute('bbb','ccc');                       //设置自定义的属性和值
};

注：在IE7及更低的版本中，使用setAttribute()方法设置class和style属性是没有效果的，虽然IE8解决了这个bug，但还是不建议使用。

6、removeAttribute()方法
removeAttribute()方法可以移除HTML属性。

示例：

window.onload=function(){
   var box=document.getElementById('box');
   box.removeAttribute('style');        //移除属性
};

注：IE6及更低版本不支持removeAttribute()方法。

JavaScript：DOM操作的更多相关文章

  1. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  2. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  3. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  6. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. Javascript DOM操作实例

          最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...

  9. javascript DOM操作 第19节

    <html> <head> <title>DOM对象</title> <script type="text/javascript&quo ...

  10. 常见的原生javascript DOM操作

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

随机推荐

  1. Eclipse 调试器：零距离接触实战技巧

    http://my.oschina.net/willSoft/blog/37784调试的方法虽然千千万万,但归根结底,就是找到引发错误的代码.Eclipse调试器的目标是让程序员能对本地或远程程序进行 ...

  2. Android学习系列(6)--App模块化及工程扩展

    这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1.需求    无论是在.net还是java平台,合理的分层架构是最普遍的模块化思路之一.    dll, ...

  3. Android开发学习之浅谈显示Intent和隐式Intent

    Intent寻找目标组件的两种方式: 显式Intent:通过指定Intent组件名称来实现的,它一般用在知道目标组件名称的前提下,一般是在相同的应用程序内部实现的. 隐式Intent:通过Intent ...

  4. FastJSON使用案例（fastjson-1.1.28.jar）

    import java.util.List; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.TypeReference; ...

  5. POJ 3670 Eating Together 二分解法O(nlgn)和O(n)算法

    本题就是一题LIS(最长递增子序列)的问题.本题要求求最长递增子序列和最长递减子序列. dp的解法是O(n*n),这个应该大家都知道.只是本题应该超时了. 由于有O(nlgn)的解法. 可是因为本题的 ...

  6. Jvisualvm监控远程linux下Tomcat

    Jvisualvm监控远程linux下Tomcat 1.编辑tomcat/bin/catalina.sh 加入下面这段代码,中间无换行: CATALINA_OPTS="$CATALINA_O ...

  7. 做一个新产品需求，体验的分析文档？（例：喜马拉雅FM）

    2.1 战略层 2.11 产品定位: 一款产品覆盖面广,收听节目种类齐全,资源丰富的电台APP. 以PGC为主流,通过合作方式吸纳专业的电台人,节目人,行业名人分享内容. 融合UGC,满足人们在空闲时 ...

  8. server2012 配置SSL证书

    导入SSL证书: 开始 -〉运行 -〉MMC,启动控制台程序 -> 选择菜单“文件 -〉添加/删除管理单元”->列表中选择“证书”->点击“添加”-> 选择“计算机帐户” -& ...

  9. Android开发4——文件操作模式

    一.基本概念 // 上下文对象private Context context; public FileService(Context context){ super(); this.context = ...

  10. Python学习笔记11：标准库之文件管理（os包，shutil包）

    1 os包 os包包含各种各样的函数,以实现操作系统的很多功能.这个包很庞杂.os包的一些命令就是用于文件管理. 我们这里列出最经常使用的: mkdir(path) 创建新文件夹.path为一个字符串 ...