zoukankan      html  css  js  c++  java
  • nodeType、nodeName和nodeValue

    首先了解一下DOM中有三大节点,分别是 元素节点,文本节点,属性节点

    元素节点:构成了DOM的基础。文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)

    文本节点:包含在元素节点中。

    属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述,比如id,name之类的。

    以下面的demo为例:

    <script>
    window.onload = function(){
        var element = document.getElementById("span");
        var text = element.firstChild;
        var property=document.getElementById("span").getAttributeNode("id");
    }
    </script>
    
    <body>
      <div>
         <span id="span">文本节点</span>
      </div>
    </body> 

     

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

    元素节点的 nodeName 是标签名称(返回的名称是大写的)

    属性节点的 nodeName 是属性名称(返回的名称是大写的)

    文本节点的 nodeName 永远是 #text

    文档节点的 nodeName 永远是 #document

    注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

    alert("这是元素节点的返回值:"+ element.nodeName);//返回的标签名SPAN,注意是大写的
    alert("这是文本节点的返回值:"+ text.nodeName);//返回的#text
    alert("这是属性节点的返回值:"+ property.nodeName);//返回的是属性名,这里是id

    (二)nodeValue

    对于文本节点,nodeValue 属性包含文本。

    对于属性节点,nodeValue 属性包含属性值。

    nodeValue 属性对于文档节点和元素节点是不可用的。

    alert("这是元素节点的返回值:"+ element.nodeValue);//本身就没有意义,这里是试验下的,返回的是null
    alert("这是文本节点的返回值:"+ text.nodeValue);//返回的是文本值  文本节点
    alert("这是属性节点的返回值:"+ property.nodeValue);//返回的是属性值,这里是id的属性值span

     

    (三)nodeType

    nodeType 属性可返回节点的类型。

    我们常用的3中类型:
    nodeType == 1  : 元素节点
    nodeType == 2  : 属性节点
    nodeType == 3  : 文本节点

    注释 comments   8

    文档 document   9

      alert("这是元素节点的返回值:"+ element.nodeType);//元素节点返回1
      alert("这是文本节点的返回值:"+ text.nodeType);//文本节点返回3
      alert("这是属性节点的返回值:"+ property.nodeType);//属性节点返回2

    ___________________________

    原文:http://www.tuicool.com/articles/zANnye

     

  • 相关阅读:
    树莓派安装realvnc_server
    python中#!含义
    树莓派无显示屏连接wifi
    转载_fread函数详解
    树莓派3b+更改静态IP
    linux命令语法格式
    python-Arduino串口传输数据到电脑并保存至excel表格
    mysql的sql_mode合理设置
    Mysql 配置参数性能调优
    Kubernetes 部署 gitlab
  • 原文地址:https://www.cnblogs.com/telnetzhang/p/5931483.html
Copyright © 2011-2022 走看看