zoukankan      html  css  js  c++  java
  • childNodes属性 和 nodeType属性

     

     

    childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组:
    element.childNodes


    如果需要把某个文档的body元素的全体子元素检索出来。首先使用getElementsByTagName得到body元素。
    因为每份文档只有一个body元素,所以它将是getElementsByTagName("body")方法所返回的数组中的第一个(也是唯一一个)元素:
    var body_element = document.getElementsByTagName("body")[0];


    现在变量body_element已经指向了那个文档的body元素。接下来可以用如下所示语法获取body元素的全体子元素:
    body_element.childNodes
    这显然比下面这样写简明多了:
    document.getElementsByTagName("body")[0].childNodes
    现在已经知道如何获取body元素的全体子元素了,接下来看看这些信息的用途。
    首先可以精确的查处body元素一共有多少个子元素。因为childNodes属性返回的是一个数组,所以用数组的length属性就可以知道它所包含的元素的个数:
    body_element.childNodes.length;
    定义一个函数把上述代码放到函数里:
    function countBodyChildren()
    {
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.childNodes.length);
    }
    这个函数将弹出一个alert对话框,显示body元素的子元素的总个数。
    我想让这个函数在页面加载时执行,需要使用onload事件处理函数。
    window.onload = countBodyChildren;
    刷行页面,你会看到一个alert对话框,显示body元素的子元素的总个数。


    事实上,countBodyChildren()函数给出来的数字可能会让你大吃一惊,假设body元素有3个子元素,分别是h1、ul、img元素。但countBodyChildren()函数
    给出的数字却远大于此,这是因为文档树的节点类型并非只有元素节点一种。


    childNodes属性返回的数组包含所有类型的节点,而不仅仅是元素节点。事实上,文档里几乎每一样东西都是一个节点,甚至包括空格和换行符都会被解释
    为节点,而它们也全都包含在childNodes属性所返回的数组当中。

    还好每一个节点都有nodeType属性。这个属性可以让我们知道自己正在与哪一种节点打交道。
    用下面的语法获取节点的nodeType属性:
    node.nodeType
    nodeType的值是一个数字而不是像"element"或"attribute"那样的英文字符串。
    可以把countBodyChildren()函数中alert语句替换为下面这条语句,这样我们就可以知道body_element元素的nodeType属性了:
    alert(body_element.nodeType);
    重新刷新页面将看到显示数字"1"。换句话说,元素节点的nodeType的属性值是1。
    nodeType属性总共有12种可取值,其中仅有3种具有实用价值。

    元素节点的nodeType属性值是1。
    属性节点的nodeType属性值是2。
    文本节点的nodeType属性值是3。

    这就意味着,可以让函数只对特定类型的节点进行处理。

  • 相关阅读:
    hdu 5387 Clock (模拟)
    CodeForces 300B Coach (并查集)
    hdu 3342 Legal or Not(拓扑排序)
    hdu 3853 LOOPS(概率DP)
    hdu 3076 ssworld VS DDD(概率dp)
    csu 1120 病毒(LICS 最长公共上升子序列)
    csu 1110 RMQ with Shifts (线段树单点更新)
    poj 1458 Common Subsequence(最大公共子序列)
    poj 2456 Aggressive cows (二分)
    HDU 1869 六度分离(floyd)
  • 原文地址:https://www.cnblogs.com/10ve/p/10624713.html
Copyright © 2011-2022 走看看