JavaScript操作DOM对象详解

一、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对象详解的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript DOM 对象深入了解

    什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起

  • jquery对象和javascript对象即DOM对象相互转换

    jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象. DOM对象就是Javascript 固有的一些对象操作.DOM 对象能使用Javascript 固有的方法,但是不能使用

  • js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

  • 浅谈JS读取DOM对象(标签)的自定义属性

    DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: <div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为tes

  • JavaScript——DOM操作——Window.document对象详解

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunment.getElementById("id");将找到的元素放在变量中:     docunment.getElementsByName("name"):根据name找,找出来的是数组:     docunment.getElementsByTagName("name"):根据标签名找,找

  • JavaScript变量Dom对象的所有属性

    DOM对象的HTML: <button>Disable State</buttom> 1,遍历DOM对象所具有的属性(全部,不管是否在HTML tag中是否设置) <!DOCTYPE html> <html> <body> <button id="btnToggleState" onclick="toggleStateManagement()"> Disable State </butto

  • JavaScript Dom对象的操作

    目录 一.核心 1.获得Dom节点 2.更新节点 2.1 实战演练 3.删除Dom节点 4.插入节点 4.1 把已有的标签进行插入 4.2 创建一个新的标签,实现插入 4.3 在子节点前插入(insertBefore) 一.核心 浏览器网页就是一个Dom树形结构 更新:更新Dom节点 遍历Dom节点:获得Dom节点 删除:删除一个Dom节点 添加:添加一个新的节点 要操作一个Dom节点,就必须要先获得这个Dom节点 1.获得Dom节点 <body> <div id="div1&

  • JavaScript文档对象模型DOM

    目录 一.JavaScript 能够改变页面中的所有 HTML 元素 1.通过 id 找到 HTML 元素 2.通过标签名查找 HTML 元素 3.通过类名找到 HTML 元素 4.JavaScript 能够改变页面中的所有 HTML 属性 5.JavaScript 能够改变页面中的所有 CSS 样式 6.JavaScript 能够对页面中的所有事件做出反应 前言: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).通过可编程的对象模型,JavaScr

  • JavaScript实现DOM对象选择器

    目的: 根据传入的选择器类型选出第一个符合的DOM对象.  ①可以通过id获取DOM对象,例如 $("#adom");  ②可以通过tagName获取DOM对象,例如 $("a");  ③可以通过样式名称获取DOM对象,例如 $(".classa");  ④可以通过attribute匹配获取DOM对象,例如 $("[data-log]"),$("[data-time=2015]");  ⑤可以通过层叠组合获

  • JS实现访问DOM对象指定节点的方法示例

    本文实例讲述了JS实现访问DOM对象指定节点的方法.分享给大家供大家参考,具体如下: 一 介绍 使用getElementById()方法来访问指定id的节点,并用nodeName属性.nodeType属性和nodeValue属性来显示出该节点名称.节点类型和节点值. 1.nodeName属性 该属性用来获取某一个节点的名称. [sName=]obj.nodeName sName:字符串变量用来存储节点的名称. 2.nodeType属性 该属性用来获取某一个节点的类型. [sType=]obj.n

  • JavaScript 中的文档对象模型 DOM

    目录 1.什么是DOM 2.选择元素 3.getElementById() 4.querySelector() 5.querySelectorAll() 6.添加新元素 7.更改CSS样式 8.如何监听事件 1.什么是DOM DOM 文档对象模型,是 HTML 和 XML 文档的编程接口,用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects),允许从文档中创建.更改或删除元素,还可以向这些元素添加事件,使页面更加动态. DOM 将 HTML

  • js基础之DOM中document对象的常用属性方法详解

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do

  • js对象关系图 方便dom操作

    js对象关系图 JavaScript 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Array Boolean Date Math Number String RegExp Global Browser 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Window Navigator Screen History Location HTML DOM 对象参考手册 本参考手册描述每个对象的属性和方法,并提供实例. Document Anchor Area Base

  • javascript DOM对象的学习实例代码

    DOM对象的学习 function searchNode(){ /*文本节点*/ /*元素节点*/ /*属性节点*/ var nodes=document.getElementsByTagName("li"); alert("节点数"+nodes.length+"第一个节点元素的名称"+nodes[0].tagName+";第四个节点的第一个节点文本"+nodes[3].childNodes[0].nodeValue); va

随机推荐