（开始很生疏，不想看的知识点，后来DOM中用的特别多，才发现很重要。还有几个点，是比较容易忽略的，值得注意！）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS-节点属性</title>
</head>
<body>
<h1>节点属性</h1>
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：<br/>

1. nodeName : 节点的名称<br/>

2. nodeValue ：节点的值<br/>

3. nodeType ：节点的类型<br/>

一、nodeName 属性: 节点的名称，是只读的。<br/>

1. 元素节点的 nodeName 与标签名相同<br/>
2. 属性节点的 nodeName 是属性的名称<br/>
3. 文本节点的 nodeName 永远是 #text<br/>
4. 文档节点的 nodeName 永远是 #document<br/>

二、nodeValue 属性：节点的值<br/>

1. 元素节点的 nodeValue 是 undefined 或 null<br/>
2. 文本节点的 nodeValue 是文本自身<br/>
3. 属性节点的 nodeValue 是属性的值<br/>

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:<br/>

元素类型 节点类型<br/>
！元素 1<br/>
属性 2<br/>
！文本 3&nbsp;空格也是返回3<br/>
注释 8<br/>
文档 9<br/>
<h1>注意空格！！！！</h1>
<hr color="red" />
<h1>实验</h1>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var m = document.getElementsByTagName("li");
for(var i=0;i<m.length;i++){
// document.write(m[i].nodeType);
switch(m[i].nodeType){
case 1:
document.write("1:li节点的类型—【元素】—<br/>");
break;
case 2:
document.write("1:li节点的类型—【属性】—<br/>");
break;
case 3:
document.write("1:li节点的类型—【文本】—<br/>");
break;
case 8:
document.write("1:li节点的类型—【注释】—<br/>");
break;
case 9:
document.write("1:li节点的类型—【文档】—<br/>");
break;
}

document.write("2:li里边的文本内容——"+m[i].nodeValue+"<br/>");
document.write("3：li节点的名称——"+m[i].nodeName+"<br/>");
document.write("<hr/>");
}

</script>
</body>
</html>

JS-节点属性（常用！）的更多相关文章

  1. js 节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  2. js节点属性

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  3. Js节点属性与方法

    属性: Attributes     存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType     返回此节点的数据类型 Definition     以D ...

  4. js 解析XML 在Edge浏览器下面 无法准确读到节点属性值

    js 解析XML 在Edge浏览器下面 无法准确读到节点属性值 Dom.documentElement.childNodes[j].attributes[2]  这个是大众写法 在win10的edge ...

  5. js中对节点属性的操作和对节点的操作

    常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribut ...

  6. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  7. js总结33 :javascript-DOM节点属性

    1 设置节点属性三个方法: 获取:getAttribute(名称) 设置:setAttribute(名称, 值) 删除:removeAttribute(名称) 举个例子: <!DOCTYPE h ...

  8. JS 节点的属性 与 元素

    节点的属性{     nodeType 是节点的类型:     nodeNam 是节点的名字     nodeValue 节点的值 }可以用节点.属性 取得三个属性的值 节点.nodeType 出来的 ...

  9. JS中的常用的代码操作

    本文件介绍常用的js代码的DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Console对象)操作说明. 一.DOM树的 ...

  10. vue项目中使用bpmn-流程图xml文件中节点属性转json结构

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

随机推荐

  1. nios II--实验3——led 100M硬件部分

    led_100M 硬件开发 新建原理图 参照实验二(led) QSys调用模块 参照实验二(led) 原理图添加IP模块 参照实验二(led),在调用PLL的时候需要修改系统和SDRAM的时钟频率为1 ...

  2. MSSQL 问题集锦

    [1]关于SQL Server数据库连接字符串的特殊参数说明 MultipleActiveResultSets和Mars_Connection同义,指定此数据库连接是否复用数据库内已建立的相同用户的连 ...

  3. spring配置属性的两种方式

    spring配置属性有两种方式,第一种方式通过context命名空间中的property-placeholder标签 <context:property-placeholder location ...

  4. iOS -- MJrefresh

    - (void)refresh { MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self r ...

  5. 十天冲刺---Day5

    站立式会议 站立式会议内容总结: 燃尽图 照片 PM确实不应该交给组内编码最强的人来做. 编码的过程还要考虑整个项目的流程压力较大. 需要队友的支持和沟通.

  6. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  7. ASP.NET MVC 5 入门教程 (4) View和ViewBag

    文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-view.html 上一节:ASP.NET MVC 5 入门教 ...

  8. ETL利器Kettle实战应用解析系列一【Kettle使用介绍】

    本系列文章主要索引如下: 一.ETL利器Kettle实战应用解析系列一[Kettle使用介绍] 二.ETL利器Kettle实战应用解析系列二 [应用场景和实战DEMO下载] 三.ETL利器Kettle ...

  9. python 进程间共享数据 (一)

    def worker(num, mystr, arr): num.value *= 2 mystr.value = "ok" for i in range(len(arr)): a ...

  10. unittest测试驱动之HTMLTestRunner.py

    对于自动化来说,测试报告是必须的,在敏捷化的团队中,团队中的成员需要自动化这边提供自动化的测试报告,来判断系统的整体质量以及下一步的测试策略.单元测试库生成测试输出到控制台的窗口上,但是这样的结果看起 ...