JavaScript DOM(一)

目录：

  • DOM家谱树
  • 节点的基本属性和方法
  • document与getElement方法

DOM家谱树

DOM可以将任何HTML或XML文档描绘成一个由多层次节点构成的结构。其中节点被分为几种不同的类型，每种类型表示文档中不同的信息或标记。每个节点又拥有各自的属性和方法，同时和其他节点存在着某种关系。

DOM将文档描述的层次结构可以表示为一种”树型”模型，更确切地说，是一种家谱树。它使用parent，child，sibling等称号来表明家族成员之间的关系。

为了理解DOM描述的层次结构我们不妨举例来说明：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>Fruit</title>
  </head>
  <body>
    <h2>Nice Fruit</h2>
    <p title="A list of fruit">Eat them usually.</p>
    <ul id="list1">
      <li class="fruit">Apple</li>
      <li class="fruit">Watermelon</li>
      <li class="fruit">Pear</li>
      <li class="fruit">Orange</li>
    </ul>
  </body>
</html>

以上的文档模型就可以用以下的家谱树来表示：

显然在这个家谱树中html是根元素。

html有2个child，分别是head和body。它们二者都是根元素的子节点，同时又互为兄弟节点。html就是它们的父节点。

继续向下，我们可以看到body有3个子节点。分别为h2，p，ul，这三者互为兄弟节点，它们有共同的父节点body。同时ul又是4个li节点的父节点。

body的兄弟节点head拥有2个子节点：meta和title。

节点的基本属性和方法

JavaScript中，节点有12中类型：

  • Node.ELEMENT_NODE
  • Node.ATTRIBUTE_NODE
  • Node.TEXT_NODE
  • Node.CDATA_SECTION_NODE
  • Node.ENTITY_REFERENCE_NODE
  • Node.ENTITY_NODE
  • Node.PROCESSING_INSTRUCTION_NODE
  • Node.COMMENT_NODE
  • Node.DOCUMENT_NODE
  • Node.DOCUMENT_TYPE_NODE
  • Node.DOCUMENT_FRAGMENT_NODE
  • Node.NOTATION_NODE

以上12中类型，分别对应1~12数值常量。任何节点，必属其中之一。事实上，所有类型的节点都实现了Node接口。在JavaScript中，也就是继承了Node类型，因此所有节点都有拥有共同的基本属性和方法。

节点的基本属性

节点操作的基本方法

节点的基本属性

1、nodeType、nodeName及nodeValue属性

所有的节点类型都属于以上12种类型之一。节点中的nodeType属性就存储着节点的类型值。

比如html,body,p等元素类型的节点，他们的类型都属于Node.ELEMENT_NODE，对应着数值1。

nodeName以及nodeValue中包含着更多有关节点的信息，它们取决于具体的节点类型。比如对于元素类型(Node.ELEMENT_NODE)的节点，nodeName表示元素的标签名(如：body，ul，p)，nodeValue为null；对于文档类型(Node.DOCUMENT_NODE)，nodeName为”#document”，nodeValue为null。

2、childNodes属性

文档中的节点之间通过parent,child,sibling等来描述彼此之间的关系。每一个节点都拥有一个childNodes属性，该属性中存放着一个NodeList对象。

NodeList是一种类似数组的对象，专门用于保存一组有序的节点，我们可以通过以下方式来访问其中的节点：

方括号：someNode.childNodes[i]
item()：someNode.childNodes.item(i)

NodeList对象是具有length属性的，该属性值表示其中保存的节点数量：

someNode.childNodes.length

需要强调的是，NodeList对象是基于Dom结构动态查询的结果，因此，当Dom结构发生变化时，该对象会随之变化。因此以下代码会产生死循环：

var divs = document.getElementsByTagName("div"), i, div;
for (i = 0; i < divs.length; i ++) {
    div = document.createElement("div");
    document.body.appendChild(div);
}

3、parentNode属性

每一个节点都拥有一个parentNode属性，该属性指向该节点的父节点。如果该节点没有父节点，这个值为null。

4、firstChild和lastChild属性

顾名思义，对于一个父节点，这两个属性分别指向第一个子节点和最后一个子节点。如果该节点没有子节点，那么这两个值均为null。如果只有一个子节点，这两个值相等。

5、previousSibling和nextSibling属性

父节点的childNodes属性指向一个NodeList对象，其中保存着一组有序节点。这些节点互为兄弟节点，他们之间可以通过previousSibling和nextSibling属性来互相访问。

previousSibling属性指向本节点的前一个节点，如果该节点本身为第一个节点，那么这个值为null。nextSibling属性类似，它指向本节点的下一个相邻节点，如果该节点为最后一个节点，那么这个值为null。

6、ownerDocument

该属性同样为所有节点共有，指向表示整个文档的文档节点。该属性同时也表示了任何节点都必然属于其所在的文档，同时也唯一属于该文档。这个属性给我们带来了回溯的便利，我们可以直接跳到文档的顶部而不需要在结构层中层层回溯。

对于以上几种表示节点关系的属性，我们可以用以下图片来表示：

节点操作的基本方法

1、appendChild()

该方法用于向childNodes列表的末尾添加一个节点，并返回这个节点。

注意每次，添加完成，DOM结构都会动态更新。

var node1 = someNode.appendChild(newNode);
alert(node1 == newNode);  //true
alert(someNode.lastChild == node1)  //true

2、insertBefore()

该方法会将节点插入到指定节点的前面。该方法接收2个参数：要插入的节点，参照节点。例如：

    var node = someNode.insertBefore(newNode, someNode.firstChild);  //插入到第一个节点之前

    var node = someNode.insertBefore(newNode, someNode.lastChild);  //插入到最后一个节点之前

    var len = someNode.childNodes.length;
    var node = someNode.insertBefore(newNode, someNode.childNodes[len - 2]);  //插入到倒数第二个节点之前

3、replaceChild()

该方法用于替换某子节点。该方法同样接收2个参数：要插入的节点，被替换的节点。例如：

    var len = someNode.childNodes.length;
    var node = someNode.replaceChild(newNode, someNode.childNodes[len - 4]);  //替换倒数第四个节点

4、removeChild()

该方法用于从DOM结构中移出某子节点，该方法只接受一个参数：需要被移出的节点。需要注意的是，调用该方法移出的节点会依然存在于文档之中，只不过已经不存在于文档的层次结构中了。

5、cloneNode()

该方法存在于所有的节点中，接受一个布尔型参数。用于对本节点进行克隆。克隆分为2种：深复制、浅复制。

深复制返回的结果为本节点以及本节点包含的所有子节点树。浅复制返回的结果仅仅为当前节点的一个副本。不论深复制还是浅复制，复制后返回的副本同被removeChild()方法移出的节点一样，存在于文档中，但是在DOM树中没有它的位置。我们可以通过上面的节点操作方法将其加入到节点树中。

    var nodeTree = someNode.cloneNode(true);  //参数为true时表示深复制

    var node = someNode.cloneNode(false);  //参数为false时表示浅复制

6、hasChildNodes()

该方法会去检测节点是否包含子节点，包含时返回true，否则返回false。由于NodeList的动态性，我们在访问childNodes的length属性的时候，会执行一次对其所有元素的查询，从这个意义上说，使用hasChildNodes()方法来确认某节点是否包含子节点是一个更简单的方法。

document与getElement方法

在JavaScript中，document对象表示整个html页面；同时也是window对象的一个属性，因此我们可以通过全局对象来访问它。

有关document对象，最常用的莫过于其通过getElement方法来获取元素引用的方法了。

我们还是以开头描述家谱树的代码为例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>Fruit</title>
  </head>
  <body>
    <h2>Nice Fruit</h2>
    <p title="A list of fruit">Eat them usually.</p>
    <ul id="list1">
      <li class="fruit" name="li1">Apple</li>
      <li class="fruit" name="li2">Watermelon</li>
      <li class="fruit" name="li3">Pear</li>
      <li class="fruit" name="li4">Orange</li>
    </ul>
  </body>
</html>
  • getElemetById
  • getElementsByTagName
  • getElementsByName
  • getElementsByClassName

getElemetById

该方法允许我们通过元素的id来获取该元素的引用。该方法接受一个参数：要获取元素的ID值，若不存在该ID对应的元素，返回null。例如我们要获取以上代码中ul元素的引用，可以使用以下的方法：

var ulList = document.getElementById("list1");

在文档中每一个元素都是一个对象类型的引用，因此对于以上代码我们用typeof来检测的时候会得到object：

alert(typeof ulList);  //object

getElementsByTagName

很多时候我们并不会为文档中每一个元素都定义一个独一无二的ID，为了获得元素的引用，我们还可以使用getElementsByTagName()方法。该方法接收一个参数：要获取元素的标签名。该方法会返回一个包含指定标签名的元素的集合。

如：

var myLi = document.getElementsByTagName("li");

这样我们会获得一个所有li元素的引用。在HTML中，该引用是一个HTMLCollection对象的引用，其与NodeList类似，可以通过方括号[]和item()来访问其中的元素，同时其自身也拥有length属性。

alert(myLi.length);  //4
alert(myLi[1].name);  //li2
alert(mtLi.item(0).name);  //li1

同时，HTMLCollection对象还有一个namedItem()方法，可以使我们通过元素名更加方便地访问其中的元素：

myLi.namedItem("li2")

当我们使用通配符”*”作为参数的时候，我们将获得整个页面所有元素的引用，在HTMLCollection中，它们按照出现的先后顺序排列。例如获取以上页面的所有元素的引用：

var all = document.getElementsByTagName("*");
alert(all.length);  //12
alert(all[0]);  //html
alert(all[1]);  //head
alert(all[2]);  //meta

getElementsByName

该方法会返回带有给定name特性的所有元素，该方法接受一个参数，要获取元素的name。

要获取指定name的元素的用法十分简单：

var fruit1 = document.getElementsByName("li0");

这里，我们另外举一个十分常用的例子——用于取得单选按钮：

<ul>
  <li><input type="radio" value="red" name="color" id="red"><label for="red">Red<lable></li>
  <li><input type="radio" value="white" name="color" id="white"><label for="white">White<lable></li>
  <li><input type="radio" value="black" name="color" id="black"><label for="black">Black<lable></li>
</ui>

<script>
  var radios = document.getElemtnByName("color");
</script>

以上代码获得了所有单选按钮的HTMLCollection对象。需要注意的是，由于该radios中所有元素的name均为color，我们通过namedItem(“color”)方法只会获得其中的第一项。

getElementsByClassName

在HTML5 DOM中新增了getElementsByClassName()方法，该方法接受一个参数，即要获取的元素的类名。该方法会获得包含指定类名的元素的集合。如：

var myFruit = document.getElementsByClassName("fruit");

对于某些没有提供对该方法支持的浏览器，我们也可以通过遍历的方法比较容易地给出跨浏览器解决方案：

function getElementByClass(node, className) {
    if(node.getElementsByClassName) {
        return node.getElementsByClassName(className);
    } else {
        var rets = new Array();
        var eles = node.getElementByTagName("*");
        for(var i = 0; i < eles.length; i ++) {
            if(eles[i].calssName.indexOf(className) != -1) { rets[rets.length] = eles[i]; }
        }
        return rets;
    }
}
时间： 2024-08-23 15:15:21

JavaScript DOM(一)的相关文章

Javascript Dom编程艺术（第2版）读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

《JavaScript+DOM变成艺术》的摘要（二）

//DOM: //对象是一种独立的数据集合,与某个特定对象相关联的变量被称为这个对象的属性,通过某个特定对象可以为之调用的函数被称为这个对象的方法 // //4个非常实用的DOM方法: //检索特定元素节点的方法: //document.getElementById:与document相关联的函数,在脚本代码里,函数后面必须跟有一组圆括号 //document.getElementsByTagName:返回的是一个数组 //,setAttribute,getAttribute alert(doc

JavaScript DOM编程艺术第一章：JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap

前端学习系列之JavaScript DOM

JavaScript DOM简介 介绍 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM编程: DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准 HTML DOM节点树 通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问.所有 HTML 元素(节点)均可被修改,也可以创建或删除节点 理解几个概念,html标签没有父辈,没有兄弟,所以html标签为根标签.head标签是htm

Javascript DOM 编程艺术读书笔记16/04/01

愚人节快乐 开始用webstorm了,随着学习深入,代码越来越长,因为不借助ide还真是挺难的 今天发现了一个严重的误区,text和textNode是完全不同的两个概念,之前没有特别注意,写代码很容易跳过createTextNode直接用parentNode.appendChild(text) 单独拎出来晒一晒,以后引以为戒 Javascript DOM 编程艺术读书笔记16/04/01

JavaScript DOM编程艺术学习笔记（一）

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad

JavaScript DOM实战：创建和克隆元素

DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的JavaScript DOM方法实战-修改文档树中已经用过它们.当时的目的是把新创建的元素添加到文档树里,使它成为某个元素的最后一个子节点. 1. //创建一个li新元素 2. var newChild=document.createElement('li'); 3. //创建一个a 新元素 4. v

JavaScript DOM对象和JQuery对象相互转换

1.分析源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

《JavaScript+DOM变成艺术》的摘要（一）

//保持良好的编程习惯:在同一脚本中,保持引号的一致性,都用单引 var mood = "don\"t worry"; //alert(mood); //数组:var arr=Array(), //以下这种形式为关联数组:为数组明确的给出下标方式,而不是直接为整数数字 var arr = Array(); arr['name'] = 'zouting'; arr['age'] = '24'; arr['address'] = 'hunan'; //alert(arr['age

《javascript dom编程艺术》笔记（二）——美术馆示例

这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是书中的最后版本,好像是第二版吧.后面还有动态创建结点的一版本,我已经在别的地方实践过了,就不再做了. 只贴出两个函数. //显示图片方法 function showPicture (whichpic) { //综合绑定的事件考虑,条件执行失败,希望浏览器可以让用户打开图片,因此在onclick处re