JavaScript操作DOM对象详解

2024-09-29 06:38:32

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

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