JavaScript大杂烩10 - 理解DOM

时间：2022-08-24 15:09:31
操作DOM
　　终于到了JavaScript最为核心的部分了，通常来说，操作DOM，为页面提供更为友好的行为是JavaScript根本目标。
 
DOM树 - HTML结构的抽象
　　既然DOM是操纵HTML文档的，那么必然是先要将HTML文档抽象成JavaScript的对象，这样才能使用JavaScript去操作它们。
　　HTML文档抽象的结果是DOM树 - 一棵与HTML结构对应的JavaScript对象组成的树。
　　先看一个简单的HTML页面：
<!doctype html>

<html>

  <head>

    <title>My title</title>

  </head>

  <body>

    <a href="">My link</a>

    <h1>My header</h1>

  </body>

</html>

　　我们这里忽略第一行的文档说明<!doctype html>，剩下的HTML其实是一个单根的树，那么抽象出来的JavaScript对象组成的DOM树是：

JavaScript大杂烩10 - 理解DOM
 JavaScript大杂烩10 - 理解DOM
　　这棵树上有两种类型的对象：
第一种对象就是Document对象。
　　Document对象是树的根，可以这么说，所有的DOM操作都起源于Document对象，最终也回归到Document对象。
　　如何获取这个对象是所有操作的前提，在BOM里面我们已经总结过了。因为Document对象是Window对象的成员，Window对象通常是用window获取到的，而window标识符是可以省略的，所以在程序中我们可以使用document标识符获取到代表当前页面的document对象。Document对象主要提供了访问各种元素的快捷方式，这个在下面的例子中你会看到。完整的成员列表请参看：http://www.w3school.com.cn/jsref/dom_obj_document.asp。
 
第二种对象就是节点。
　　这棵树上除了Document外的所有对象都称为“节点”，节点可能是这些对象：Root Element (还是Element)，Element，Attribute，Text。
　　Element对象是HTML元素的抽象，它完成对所有HTML元素的操作，包括获取/设置属性值，添加/删除子元素，获取/设置图形信息等等。完整的成员列表请参看：http://www.w3school.com.cn/jsref/dom_obj_all.asp。
　　Attribute对象是HTML元素属性的抽象，它完成对HTML元素属性的操作，主要是获取/设置属性值。完整的成员列表请参看：http://www.w3school.com.cn/jsref/dom_obj_attributes.asp。
　　Text对象是对HTML元素中字符串值的抽象，是最低层的节点。这个对象很简单，在下面的例子中会有所涉及。
　　从实现上来说，Node是表征节点的基对象，Element，Attribute，Text都是从Node继承的，Node对象封装了节点的基本信息，比如nodeName, nodeType, nodeValue等等。其中nodeName和nodeValue都比较简单，值得一提的是nodeType，一般说来，nodeType有以下取值：
 节点类型            NodeType

元素element            1

属性attr               2

文本text               3

注释comments           8

文档document           9

　　所有nodeType值为1的节点都被处理成了Element对象，也就是HTML元素对象。Element对象是从Node对象继承的，提供了针对对HTML元素的各种扩展方法。

　　大部分时间，我们都是直接去操作Element对象，偶尔也会直接使用Node对象。document对象针对Node, Element对象提供了不同的方法，我们一般都是选择使用名称中包含Element或者是明确返回Element的各种方法。当然这里并不是说Node对象就不能用，很多场合使用Node对象也是很方便的，这个要具体问题具体分析。
　　这里DOM4中据说Attribute对象不再是从Node节点继承了，所以使用起来可能稍微有点区别，标准出来以后同学可以自己查询一下。
 
DOM第一步： 查找目标对象
　　DOM操作很多，第一步通常是要查找到要操作的DOM对象，这个通用的功能由document对象提供，可以有两种方式达到目的。
第一种方式，从document上直接根据某些条件查找，这种不妨称为“绝对查找”。
　　这种方式是使用document对象的下列方法实现的：
document.getElementById
element.getElementsByTagName
element.getElementsByClassName

　　从上面函数的名字我们可以知道:

1. 它们分别是通过元素的id，元素的tag，元素应用的style分别实现查找的。
2. 通过id的方式返回的单一的元素，因为一般一个文档中每个元素的id都是唯一的，如果不唯一那是自寻烦恼。这个方法只属于document对象。
3. 通过tag名字和style名字可以返回多个元素，这两个方法是每个element都有的(当然document对象也有)，可以在自己的children成员中查找符合条件的对象。
　　看下面的例子：
<input type="button" value="Change Name From Long Path" onclick="changeName()"></input>

<ul id="listValues">

<li class="big">A</li>

<li class="big">B</li>

<li class="big">C</li>

</ul>

<script>

  function changeName(){

    // 根据id查找元素，缩小范围

    var list = document.getElementById('listValues');

    // 根据tag查找子元素中符合条件的

    var values = list.getElementsByTagName('li');

    for(var i = 0; i < values.length; i++) {

      values[i].innerHTML = values[i].innerHTML + 's';

    }

    // 根据style查找符合条件的子元素

    values = list.getElementsByClassName('big');

    for(var i = 0; i < values.length; i++) {

      values[i].innerHTML = values[i].innerHTML + 'c';

    }

  }

</script>

　　这个例子通过元素对象的innerHTML属性来修改元素的内容。

 
第二种方式，从相关元素通过关联关系查找，这种不妨称为“相对查找”。
　　这种方式是在已知某元素的情况下，通过查找这个元素的子女，兄弟，父亲来找到目标的方式。一般是使用下列成员： parentNode, children, firstChild, lastChild, previousSibling, nextSibling来查找。看改写后的例子：
<input type="button" value="Change Name From Short" onclick="changeNameShort()"></input>

<ul id="listValues">

<li class="big">A</li>

<li class="big">B</li>

<li class="big">C</li>

</ul>

<script>

  function changeNameShort(){

    // 获得某个元素的方式还是使用getElementById方法

    var list = document.getElementById('listValues');

    // 使用children方式

    var values = list.children;

    for(var i = 0; i < values.length; i++) {

      values[i].innerHTML = values[i].innerHTML + 's';

    }

    // 使用childNodes方式

    values = list.childNodes;

    for(var i = 0; i < values.length; i++) {

      values[i].innerHTML = values[i].innerHTML + 's';

    }

    // 其它的一些方式

    // list.firstChild.innerHTML = list.firstChild.innerHTML + 'f';

    // list.lastChild.innerHTML = list.lastChild.innerHTML + 'l';

  }

</script>
DOM第二步： 标准的元素级别的CRUD操作
　　标准的CRUD操作中，我们已经演示过查找元素并进行更新操作了，下面再看一下创建，删除，克隆操作：
<input type="button" value="Add new" onclick="add()"></input>

<input type="button" value="Remove first" onclick="remove()"></input>

<input type="button" value="Clone last" onclick="clone()"></input>

<ul id="listValues">

  <li class="big">A</li>

  <li class="big">B</li>

  <li class="big">C</li>

</ul>

<script>

  // add and append

  function add(){

    var list = document.getElementById('listValues');

    var item = document.createElement('li');

    var text = document.createTextNode("D");

    item.appendChild(text);

    list.appendChild(item);

  }

  // remove

  function remove(){

    var list = document.getElementById('listValues');

    list.removeChild(list.children[0]);

  }

  // clone

  function clone(){

    var list = document.getElementById('listValues');

    var node = list.lastElementChild.cloneNode(true);

    list.appendChild(node);

  }

</script>

　　这个例子中主要是演示了document.createElement, element.appendChild, element.removeChild等方法的作用。

 
DOM第三步： 属性Attribute的操作
　　DOM可以操作元素，也可以操作更新的元素的属性，看例子：
<input type="button" value="显示tooltip" onclick="changeAttribute()"></input>

<div id='demo'>不带tooltip的文本，点击上面的button来开启tooltip.</div>

<script>

  // get/set attributes

  function changeAttribute() {

    var div = document.getElementById('demo');

    alert(div.getAttribute('title'));

    div.setAttribute('title', 'updated tooltip!');

  }

</script>

　　这个例子是给div添加了一个title属性，这个属性用于存放元素的tootip值。

　　说到属性的问题，我们需要知道HTML是支持自定义属性的，这些自定义的属性常常是用来存放页面的逻辑数据，很多的框架都通过这种方式来扩展页面的行为。
 
DOM第四步： 样式CSS的操作
　　CSS是特殊的属性，它可以在class属性中存放CSS样式的名字，这种方式经常用于把CSS样式定义在元素之外的情况，也是推荐的写法，除此以外，CSS还可以直接定义在style属性中，这些情况都可以使用DOM直接修改。看个例子：
<head>

  <title>My title</title>

  <style>

  .big {

   font-size:40px;

  }

  .small {

   font-size:20px;

  }

 </style>

</head>

<body>

  <input type="button" value="Change CSS" onclick="changeCSS()"></input>

  <ul id="listValues">

    <li class="big">A</li>

    <li class="big">B</li>

    <li class="big">C</li>

 </ul>

  <script>

    // modify css

   function changeCSS() {

      var list = document.getElementById('listValues');

      var values = list.children;

      for(var i = 0; i < values.length; i++) {

        // 方式一：通过修改class的方式修改css

        values[i].className = 'small';

        // 方式二：通过直接修改style属性的方式修改css

        // 经验：一般在css中有-的，在js中-去掉，后面的那个词大写就变成style的属性了

        //values[i].style.fontSize = '20px';

        // 方式三：通过直接修改style对象的cssText属性

        //values[i].style.cssText = 'font-size: 20px; background-color: green';

        // 方式四：通过直接调用style对象的setProperty方式修改css

        //values[i].style.setProperty('background-color', 'red', '');

   }

  }

  </script>

</body>

　　上面的例子中有修改fontSize的语句，这个语句是直接修改style元素的方式，这里有一个经验，一般来说css中样式的名字去掉短线后，把短线后第一个字符大写就是JavaScript中对应的style对象的属性的名字，比如CSS中的font-size直接对应到style.fontSize上。此外还可以通过sytle对象的cssText属性(一次性可以把全部CSS值都加上)，setProperty(一次添加一个值)等方式修改CSS，例子中都提到了。

　　上面我们简单总结了DOM的常见操作，这些操作很简单，却是很多高级特效的基础。
 
DOM的级别
　　上面我们概括了基本的一些操作，其实DOM的操作是在不同的时期，不同的版本中加入到JavaScript中来的，这个一般可以用DOM的级别来划分，DOM的级别代表了DOM操作的演变过程，通常来说：DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级别则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。为此DOM2和DOM3级分为许多模块（模块之间具有某种关联），分别描述了DOM的某个非常具体的子集。我们上面例子中使用的操作都是这些级别的操作。
　　但是事实上，所有的浏览器都支持所谓的JavaScript DOM0操作的。DOM0与后来的这些操作最大的区别在于它提供了数组的方式直接返回一些特殊的成员，这些成员通常是document对象的images (图片), forms (表单), links (超链接的目标地址), anchors (超链接的名字), cookie (客户度存储), body, title，每个element的id, name, title, style，图片的src等等。看一下具体的例子：
<img src="imgs/1.jpg" alt="images" onclick="changeImage()"></img>

<script>

  function changeImage() {

    // DOM 0方式访问图片

    var image = document.images[0];

    image.src = 'imgs/2.jpg';

  }

</script>

　　相对于DOM1后面的操作来说，这种方式可以更加方便的访问页面中所有的图片，表单等常用数据，适当的使用这种方式可以加速程序的开发。

 
特殊的操作innerHTML
　　我们上面使用innerHTML来修改一个Element的内容，然后又使用appendChild来修改Element的内容，那么这两种方式有什么不同呢？
　　innerHTML不是DOM的标准操作，这个属性完全是浏览器自己实现的行为，它最初是微软加入的，不过由于使用起来相当方便快捷(直接的字符串操作，比DOM操作要快，特别是需要大量添加HTML元素的时候，而且字符串中的元素可以嵌套多层，DOM实现这种嵌套的话需要书写大量的代码)，所以其它主流浏览器都提供了这个属性。
　　什么时候使用innerHTML与什么时候使用DOM并没有严格的标准，通常是看个人的习惯，一般的知道思想是添加大量确定的静态结构的时候使用innerHTML相当高效，添加不确定数量的动态结构的时候DOM更为灵活。看个例子：
var x = document.getElementById('root');

x.innerHTML = '<ul><li>第一点</li><li>第二点</li><li>第三点</li></ul>';

　　这段代码写成appendChild的话则是：

var x = document.getElementById('root');

var y = document.createElement('ul');

var z = document.createElement('li');

z.appendChild(document.createTextNode('第一点'));

y.appendChild(z);

var z1 = document.createElement('li');

z1.appendChild(document.createTextNode('第二点'));

y.appendChild(z1);

var z2 = document.createElement('li');

z2.appendChild(document.createTextNode('第三点'));

y.appendChild(z2);

x.appendChild(y);

　　同学们自己辨别思考一下吧，其实这两种方式并不是互斥的，我们完全可以结合使用这两种方式。

　　DOM说白了就是一句话：“使用抽象的DOM对象操作页面本身，动态的添加页面的行为”。

JavaScript大杂烩10 - 理解DOM的更多相关文章

  1. JavaScript大杂烩1 - 理解JavaScript的类型系统

    随着硬件水平的逐渐提高,浏览器的处理能力越来越强大,本人坚信,客户端会越来越瘦,瘦到只用浏览器就够了,服务端会越来越丰满:虽然很多大型的程序,比如3D软件,客户端仍然会存在,但是未来的主流必将是浏览器 ...

  2. JavaScript大杂烩12 - 理解Ajax

    AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下 ...

  3. JavaScript大杂烩11 - 理解事件驱动

    前面我们回顾了前端JavaScript只干的两件事:操作BOM与操作DOM,那么什么时候去干这些事呢?答案是需要干的时候去干.那么什么时候是需要干的时候呢?答案是事件被触发的时候.这就是通常所说的“事 ...

  4. JavaScript大杂烩9 - 理解BOM

    毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript ...

  5. JavaScript大杂烩6 - 理解JavaScript中的this

    在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this) ...

  6. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  7. JavaScript大杂烩7 - 理解内置集合

    JavaScript内置了很多对象,简单的类型如String,Number,Boolean (相应的"值类型"拥有相同的方法),复杂一点的如Function,Object,Arra ...

  8. JavaScript大杂烩4 - 理解JavaScript对象的继承机制

    JavaScript是单根的完全面向对象的语言 JavaScript是单根的面向对象语言,它只有单一的根Object,所有的其他对象都是直接或者间接的从Object对象继承.而在JavaScript的 ...

  9. JavaScript大杂烩3 - 理解JavaScript对象的封装性

    JavaScript是面向对象的 JavaScript是一种基于对象的语言,你遇到的所有东西,包括字符串,数字,数组,函数等等,都是对象. 面向过程还是面向对象? JavaScript同时兼有的面向过 ...

随机推荐

  1. C&plus;&plus;中的注解理解

    SAL: the Microsoft Source Code Annotation Language. SAL: the Microsoft Source Code Annotation Langua ...

  2. &lbrack;leetcode 34&rsqb; search for a range

    1 题目: Given a sorted array of integers, find the starting and ending position of a given target valu ...

  3. Windows Server 2012安装时所需要的KEY

    Windows Server 2012不像Server 2008和2008 R2那样可以先装系统再输入序列号,而是在一开始就必须输入Server 2012 cdkey,目前在网上找到两枚序列号,标准版 ...

  4. PHP处理超时方法

    一.在php.ini里面设置 max_execution_time = 1800; 二.通过PHP的ini_set 函数设置 ini_set("max_execution_time&quot ...

  5. 贪心-poj-2437-Muddy roads

    题目链接: http://poj.org/problem?id=2437 题目意思: 给n个区间,每次可以用长度为L的棒A去覆盖,求将所有区间覆盖至少需要几次.给的区间不覆盖. 解题思路: 简单贪心. ...

  6. The iOS Design Cheat Sheet 界面设计速参

    http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ With the release of iOS 7, app designers ...

  7. WAS ND V6下配置IHS V6

    记录在同一台机器上进行WebSphere Application Server Network Deployment V6和IBM HTTP Server V6的配置情况. 配置的步骤如下: 一. 在 ...

  8. 企业IT管理员IE11升级指南【12】—— 兼容视图列表介绍

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  9. AngularJS实战之路由ui-view

    1. 路由(ui-router) 1.1. 环境 1) angular.min.js 2) angular-ui-router-0.2.10.js 3) 确保确保包含ui.router为模块依赖关系. ...

  10. CSS 折角效果

    1 <style type="text/css"> .div1 { width: 200px; height: 200px; background-color: #ff ...

相关文章