文件夹：

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");

这里，我们另外举一个十分经常使用的样例——用于取得单选button：

<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>

以上代码获得了全部单选button的HTMLCollection对象。须要注意的是，因为该radios中全部元素的name均为color。我们通过namedItem(“color”)方法仅仅会获得当中的第一项。

getElementsByClassName

在HTML5 DOM中新增了getElementsByClassName()方法，该方法接受一个參数，即要获取的元素的类名。

该方法会获得包括指定类名的元素的集合。

如：

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

对于某些没有提供对该方法支持的浏览器。我们也能够通过遍历的方法比較easy地给出跨浏览器解决方式：

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;

    }

}

JavaScript DOM(一)的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  3. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  4. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  5. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  6. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  7. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  8. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  9. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

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

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

随机推荐

  1. 抓包函数-pcap_next

     抓包函数        pcap_next_ex, pcap_next 抓包 #include <pcap/pcap.h> int pcap_next_ex(pcap_t *p, s ...

  2. python的range()函数使用方法

    python的range()函数使用非常方便.它能返回一系列连续添加的整数,它的工作方式类似于分片.能够生成一个列表对象. range函数大多数时常出如今for循环中.在for循环中可做为索引使用.事 ...

  3. 构建基于Javascript的移动CMS——生成博客(二).路由

    在有了上部分的基础之后.我们就能够生成一个博客的内容--BlogPosts Detail.这样就完毕了我们这个移动CMS的差点儿基本的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情 ...

  4. Android自己定义View之组合控件 ---- LED数字时钟

    先上图 LEDView效果如图所看到的. 之前看到一篇博客使用两个TextView实现了该效果.于是我想用自己定义控件的方式实现一个LEDView.使用时就可以直接使用该控件. 採用组合控件的方式,将 ...

  5. netty可靠性

    Netty的可靠性 首先,我们要从Netty的主要用途来分析它的可靠性,Netty目前的主流用法有三种: 1) 构建RPC调用的基础通信组件,提供跨节点的远程服务调用能力: 2) NIO通信框架,用于 ...

  6. Java-MyBatis：MyBatis 3 入门

    ylbtech-Java-MyBatis:MyBatis 3 入门 1.返回顶部 1. 入门 安装 要使用 MyBatis, 只需将 mybatis-x.x.x.jar 文件置于 classpath ...

  7. 求包含每个有序数组(共k个)至少一个元素的最小区间

    title: 求包含每个有序数组(共k个)至少一个元素的最小区间 toc: false date: 2018-09-22 21:03:22 categories: OJ tags: 归并 给定k个有序 ...

  8. ROS集成开发环境RoboWare Studio安装教程

    前言:很多人说vim是最快的,所以我选择用roboware. ROS 自带的编辑器vim增加插件,效果如下: RoboWare Studio,效果如下: 下面开始安装. 一.安装 去官网 http:/ ...

  9. es6总结（二）

    1.es6三种声明方式: a.var 全局声明 b.let  局部变量声明 c.const     常量声明 2.变量的解构赋值 a.数组的解构赋值 等号左边与右边形式统一  let [a,[b,c] ...

  10. WCF（四）windows服务寄宿

    WCF常用的寄宿方式除了IIS寄宿外,还有一种方式是寄宿到windows服务中,跟随系统启动而启动. 1.在项目中选择“添加”--“新建windows服务” 2.打开系统生成的设计界面的代码,引用“u ...