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

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

  • 相关阅读:
    servlet-servletConfig
    servlet-servletContext网站计数器
    servlet-cookie
    Android 无cp命令 mv引起cross-device link
    android使用mount挂载/system/app为读写权限,删除或替换系统应用
    android使用百度地图、定位SDK实现地图和定位功能!(最新、可用+吐槽)
    解决android sdk manager无法下载SDK 的问题
    Android APK反编译详解(附图)
    Android如何防止apk程序被反编译
    不用外部JAR包,自己实现JSP文件上传!
  • 原文地址:https://www.cnblogs.com/10ve/p/10624713.html
Copyright © 2020-2023  润新知