码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript DOM(一)

时间：2018-02-13 10:32:20      阅读：224      评论：0      收藏：0      [点我收藏+]

标签：tracking   包括   length   rac   ada   很多   查询   关系   range   

文件夹：

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(一)

标签：tracking   包括   length   rac   ada   很多   查询   关系   range   

原文地址：https://www.cnblogs.com/llguanli/p/8445980.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！