zoukankan      html  css  js  c++  java
  • Javascript之DOM的三大节点及部分用法

    DOM有三种节点:元素节点、属性节点、文本节点。

    一、用nodeType可以检测节点的类型

    节点类型 nodeType属性值
    元素节点 1
    属性节点 2
    文本节点 3

    这样方便在js中对各个节点进行操作。

    元素节点:html中的标签。

    属性节点:html便签中的属性值。

    文本节点:元素节点之间的文本。

    二、用body的childNodes来测试

    1  <body>/*第一个文本元素
    2    */<div></div>/*第二个文本元素
    3    */<div></div>/*第三个文本元素
    4    */<ul>
    5          <li></li>
    6          <li></li>
    7          <li></li>
    8      </ul>/*第四个文本元素
    9  */</body>

    来看body的childNodes中各个节点的个数。

    先说一下childNodes,这个属性用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组。

    用js测试:

    1 window.onload = function (){
    2     var oBody = document.getElementsByTagName('body')[0];
    3     var aChild = oBody.childNodes;
    4     alert(aChild.length);//7
    5     for(var i = 0; i < aChild.length; i++) {
    6         alert(aChild[i].nodeType);//3 1 3 1 3 1 3
    7         }
    8 };

    由此看来:

    body的子元素有div、div、ul。

    body的文本元素有四个,代码中注释出出来的,我故意将*/换了一行写出来,是想表明在<body>和<div>之间是一个文本节点。

    有人会觉得疑惑,不是说元素节点之间就是文本节点吗?为什么像<div></div>之间的文本节点没有算进去呢?

    对的,那个也算文本节点,但我们计算的是body的子节点,像<div></div>之间的那是<div>的子节点啦,并不是body的子节点。

    三、用nodeValue来得到和设置一个节点的值

    三大节点中,属性节点和文本节点都是可能有值的,但是元素节点是没有值的。

    用node.nodeValue得到node的值,那么有一个问题,nodeValue和innerHTML有什么区别呢?

    nodeValue获取的是节点的值,innerHTML是以字符串形式返回该节点的所有子节点及其值。可以看做是部分与大体的一个区别。

    举个例子:

    1 <body>
    2     <div id="div1">
    3         这是div的第一个子节点,是一个文本节点
    4         <p>div的第二个子节点p,这是p的第一个文本节点</p>
    5     </div>
    6 </body>

    我们用js来测试一下nodeValue和innerHTML的结果

    1 window.onload = function (){
    2     var oDiv = document.getElementById('div1');
    3     var aChild = oDiv.childNodes;
    4             
    5     alert(aChild[0].nodeValue);
    6     alert(oDiv.innerHTML);
    7 };

    测试结果如下:

    第一个alert弹出“这是div的第一个子节点,是一个文本节点”

    第二个alert弹出“这是div的第一个子节点,是一个文本节点 <p>div的第二个子节点p,这是p的第一个文本节点</p>”

    三、用nodeName来获取节点的

    nodeName属性含有某个节点的名称。

    对于元素节点,nodeName=标签名(返回的名称是大写的)。

    对于文本节点,nodeName=#text。

    对于属性节点,nodeName=属性名(返回的名称是大写的)。

    使用方法:elemt.nodeName;

  • 相关阅读:
    C语言相关题目6
    C语言相关题目7
    C语言相关题目8
    C语言相关题目9
    哈夫曼编码
    查看linux系统信息命令
    C++基类和派生类的构造函数/析构函数
    C++的const类成员函数
    c++中的static关键字的作用
    为什么二叉树的叶子结点数等于度为2的结点数+1
  • 原文地址:https://www.cnblogs.com/wind-lanyan/p/5718245.html
Copyright © 2011-2022 走看看