设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 513|回复: 0
打印 上一主题 下一主题

Html Dom 的nodetype解析 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-7-13 03:23:50 |只看该作者 |倒序浏览
    nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。
    • 元素节点的 nodeName 是标签名称
    • 属性节点的 nodeName 是属性名称
    • 文本节点的 nodeName 永远是 #text
    • 文档节点的 nodeName 永远是 #document

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

    nodeValue对于文本节点,nodeValue 属性包含文本。
    对于属性节点,nodeValue 属性包含属性值。
    nodeValue 属性对于文档节点和元素节点是不可用的。
    nodeTypenodeType 属性可返回节点的类型。
    最重要的节点类型是:
    元素类型节点类型
    元素element1
    属性attr2
    文本text3
    注释comments8
    文档document9

    HTML文件:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
    />
    <title>DOM标准</title>
    <script type="text/javascript" src="test.js"></js>
    </head>
    <body>
    <h1 id="h1">An HTML Document</h1>
    <p id="p1">This is a <i>W3C HTML DOM</i> document.</p>
    <p><input id="btnDemo1" type="button" value="取H1 Element节点值"></p>
    <p><input id="btnDemo2" type="button" value="取H1 Element节点文本"></p>
    <p><input id="btnDemo3" type="button" value="取Document Element节点文本"></p>
    <p><input type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="btnShowAttr" id="btnShowAttr" value="按钮节点演示"
    /></p>
    </body>
    </html>

    JS:
    function showElement(){
    var element=document.getElementById("h1");//h1是一个
    <h1>标签
    alert('nodetype:'+element.nodeType);//nodeType=1
    alert('nodeName:'+element.nodeName);
    alert('nodeValue:'+element.nodeValue); //null
    alert('element:'+element);   
    }

    function showText(){
    var element=document.getElementById("h1");
    var text=element.childNodes[0];
    alert('nodeType:'+text.nodeType);   //nodeType=3
    alert('nodeValue:'+text.nodeValue);   //文本节点的nodeValue是其文本内容
    text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。
    alert('nodeName:'+text.nodeName);
    alert(text.data);    //data同样是其内容,这个属性下同样可以增删改。
    }

    function showDocument(){
    alert('nodeType:'+document.nodeType);   //9
    alert('nodeName:'+document.nodeName);
    alert(document);
    }

    function showAttr(){
    var btnShowAttr=document.getElementById("btnShowAttr"); //演示按钮,有很多属性
    var attrs=btnShowAttr.attributes;
    for(var i=0;i
    <attrs.length ;i++){
       var attr
    =attrs;
      
    alert('nodeType:'+attr.nodeType); //attribute 的nodeType=2
      
    alert('attr:'+attr);
       alert('attr.name:'+attr.name+'
    ='+attr.value);
      
    }

    }

    function demo(){
    var btnDemo1
    =document.getElementById("btnDemo1");
    btnDemo1.onclick=showElement;  //按钮1取节点nodetype值
    var btnDemo2
    =document.getElementById("btnDemo2");
    btnDemo2.onclick=showText;
    var btnDemo3=document.getElementById("btnDemo3");
    btnDemo3.onclick=showDocument;
    var btnShowAttr=document.getElementById("btnShowAttr");
    btnShowAttr.onclick=showAttr;

    }
    window.onload
    =demo;

    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-5 04:32 , Processed in 0.111660 second(s), 27 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部