节点类型的分类

节点类型 说明
元素节点 每一个HTML标签都是一个元素节点,如 <div> 、 <p>、<ul>等 1
属性节点 元素节点(HTML标签)的属性,如 id 、class 、name 等。 2
文本节点 元素节点或属性节点中的文本内容。 3
注释节点 表示文档注释,形式为<!-- comment text -->。 8
文档节点 表示整个文档(DOM 树的根节点,即 document ) 9

nodeType、nodeName、nodeVale判断节点类型,节点名称和节点值

<!--使用javascript判断节点类型-->
<div id="oneDiv">一段文本</div><!--注释文本-->
<script type="text/javascript">
var div = document.getElementById("oneDiv");
console.log(div.nodeType); //输出1,元素节点
var divText = div.firstChild;
console.log(divText.nodeType) //输出3,文本节点
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeType) //输出2,属性节点
var comment = div.nextSibling;
console.log(comment.nodeType) //输出8,注释节点
</script>
<!--使用javascript判断节点名称-->
<div id="oneDiv">一段文本</div><!--注释文本-->
<script type="text/javascript">
var div = document.getElementById("oneDiv");
console.log(div.nodeName); //输出DIV,元素节点为标签大写
var divText = div.firstChild;
console.log(divText.nodeName) //输出#text,文本节点使用nodeName时永远为#text
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeName) //输出id,属性节点为属性名
var comment = div.nextSibling;
console.log(comment.nodeName) //输出#comment,注释节点使用nodeName时永远为#comment
</script>
<!--使用javascript判断节点值-->
<div id="oneDiv">一段文本</div><!--注释文本-->
<script type="text/javascript">
var div = document.getElementById("oneDiv");
console.log(div.nodeValue); //输出null,元素节点对于nodeValue不支持
var divText = div.firstChild;
console.log(divText.nodeValue) //输出一段文本,文本节点输出文本值
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeValue) //输出oneDiv,属性节点输出属性值
var comment = div.nextSibling;
console.log(comment.nodeValue) //输出注释文本,注释节点输出注释内容
</script>

JS 判断节点类型的更多相关文章

  1. js判断undefined类型

    js判断undefined类型 if (reValue== undefined){    alert("undefined");    }  发现判断不出来,最后查了下资料要用ty ...

  2. html5 -js判断undefined类型

    js判断undefined类型 今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined所以自作聪明判断 var reVal ...

  3. js判断浏览器类型 js判断ie6不执行

    js判断浏览器类型 $.browser  对象 $.browser.version 浏览器版本 var binfo = ''; if ($.browser.msie) { binfo = " ...

  4. 通过JS判断联网类型和连接状态

    通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现 ...

  5. js判断undefined类型,undefined,null,NaN的区别

    js判断undefined类型 今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined   所以自作聪明判断       ...

  6. Js 判断浏览器类型整理

    判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...

  7. JS判断浏览器类型,JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

  8. js判断undefined类型,undefined,null, 的区别详细解析

    js判断undefined类型 今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined所以自作聪明判断 var reVal ...

  9. JS判断浏览器类型和详细区分IE各版本浏览器

    今天用到JS判断浏览器类型,于是就系统整理了一下,便于后期使用. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

随机推荐

  1. css总结6:行高和字体大小

    1 CSS line-height 属性 代码: p.small {line-height:70%}p.big {line-height:200%} 运行后:70%与200%宽高 2 CSS font ...

  2. java 异常捕获与异常处理

    try{会产生异常的代码 }catch(出现异常的类型 e){ 异常出现后处理的方法 } 一旦异常出现又没有异常处理,程序就会中断. public static void main(String[] ...

  3. 【Android学习】实现卡片式ListView

    效果: 主要是设置xml文件 两种状态下的item card_background.xml <?xml version="1.0" encoding="utf-8& ...

  4. Entity Framework快速入门--直接修改(简要介绍ObjectContext处理机制)

    在介绍Entity Framework的修改实体到数据库的方法之前呢,我们先简要的介绍一下ObjectContext的处理机制. 1.ObjectContext的处理机制 ObjectContext是 ...

  5. indexOf(String.indexOf 方法)

    字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表示第一个字符,1表示第二个字符依此类推)如果说没有找到则返回 -1 返回 St ...

  6. android开关控件Switch和ToggleButton

    序:今天项目中用到了开关按钮控件,查阅了一些资料特地写了这篇博客记录下. 1.Switch <Switch android:id="@+id/bt" android:layo ...

  7. PrintDocument or PrintPreviewDialog 打印

    /// <summary> /// /// </summary> /// <param name="sender"></param> ...

  8. Transaction And Lock--快照事务隔离级别

    --================================================--准备数据GOCREATE DATABASE DB5GOUSE DB5GOCREATE TABLE ...

  9. 如何将Sql server数据库中的模型图转化到Word中--并能够查看字段的属性信息

    1. 在Sql server数据库中创建数据库的模型图 -- Database Diagrams 2. 控制面板--管理工具--ODBC数据源链接--创建一个Sql server的数据源链接 3. 打 ...

  10. 扩展卢卡斯定理(Exlucas)

    题目链接 戳我 前置知识 中国剩余定理(crt)或扩展中国剩余定理(excrt) 乘法逆元 组合数的基本运用 扩展欧几里得(exgcd) 说实话Lucas真的和这个没有什么太大的关系,但是Lucas还 ...