JavaScript DOM(一)

原创 2016年04月15日 16:16:42

目录:

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

该方法允许我们通过元素的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;
    }
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

什么是DOM?DOM和JavaScript的关系[web开发]

什么是DOM? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们...
  • hqf2009
  • hqf2009
  • 2015年12月18日 16:11
  • 1461

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 305

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(1)

整本书都是关于如何 DOM
  • u013236064
  • u013236064
  • 2014年08月11日 22:38
  • 1232

javascript dom编程艺术阅读笔记

第二章 1.程序设计语言分为:解释型和编译型两大类;java或C++等语言需要一个编译器,将源代码翻译为直接在计算机上执行的二进制可执行文件的程序,属于编译型 javascript语言不需要编译器,只...
  • hexon804
  • hexon804
  • 2016年02月16日 18:10
  • 909

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...
  • Creabine
  • Creabine
  • 2015年12月14日 21:12
  • 3218

《JavaScript DOM编程艺术》学习

JavaScript编程原则和使用习惯  在使用JavaScript之前需思考: 为这个网页增加这种额外的行为是否 确有必要“用户至上” , 这样做会对用户的浏览器产生怎样的影响?浏览器支持Jav...
  • qq_26437925
  • qq_26437925
  • 2016年02月01日 20:10
  • 1067

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 764

案例研究:图片库改进版(js dom编程艺术第六章笔记)

本章完成的主要工作小结: 1.尽量让js代码不再依赖于那些没有保证的假设,为此引入测试项和检查,是js代码能够平稳退化 2.避免使用onkeypress事件处理函数 3.html标记文档与js分离 源...
  • ziyun0923
  • ziyun0923
  • 2016年09月12日 21:28
  • 706

JavaScript在DOM中插入一个新元素

在已有元素前面插入一个新元素 DOM提供了名为insertBefore()这个方法,这个方法将把一个新元素插入到一个现有元素的前面。在调用次方法时,你必须告诉它三件事。 (1)    新元素: 你...
  • tian_123456789
  • tian_123456789
  • 2017年02月28日 11:24
  • 354

JavaScript中对DOM对象进行操作

一、什么是DOM对象  DOM对象是文档对象模型,是基于浏览器编程一套API接口,通过它,我们可以访问HTML文档对象属性、方法、事件,还可以对其进行操作。 二、DOM节点树  在HTML中所有...
  • Hchengbowen
  • Hchengbowen
  • 2017年01月04日 16:43
  • 964
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript DOM(一)
举报原因:
原因补充:

(最多只允许输入30个字)