（开始很生疏，不想看的知识点，后来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. .NET 平台下的插件化开发内核（Rabbit Kernel）

    每个程序猿都有一个框架梦,曾经在2013年8月15日写过一篇"Koala Framework是什么?我为什么要写这个框架?"的文章,在开放框架路上迈出了第一步,之后作者如愿找到了一 ...

  2. .net框架中少有人知的扩展cmod

    最近在利用metadata api抽取.net的原数据信息,发现了不少“坑”,也发现了不少常年用着c#的人都不知道的扩展. 说到.net原数据的可扩展性,第一个让人能想到的就是CustomAttrib ...

  3. 比较Windows Azure 网站（Web Sites）, 云服务（Cloud Services）and 虚机（Virtual Machines）

    Windows Azure提供了几个部署web应用程序的方法,比如Windows Azure网站.云服务和虚拟机.你可能无法确定哪一个最适合您的需要,或者你可能清楚的概念,比如IaaS vs PaaS ...

  4. WEB API 中HTTP的get、post、put,delete 请求方式

    一.WEB API 中HTTP 请求方式的四个主要方法 (GET, PUT, POST, DELETE), 按照下列方式映射为 CURD 操作: 1.POST 用于新建资源,服务端在指定的URI 上创 ...

  5. [BZOJ2429][HAOI2006]聪明的猴子（MST）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2429 分析:要让最大的最小,所以就是最小生成树上的啦,于是问题就变成了有多少个猴子&g ...

  6. linux基础-第十三单元 硬盘分区、格式化及文件系统的管理二

    第十三单元 硬盘分区.格式化及文件系统的管理二 文件系统的挂载与卸载 什么是挂载 mount命令的功能 mount命令的用法举例 umount命令的功能 umount命令的用法举例 利用/etc/fs ...

  7. MySQL删除/更新数据时报1175错误

    今天删除MySQL数据库中的一条记录的时候,一直不能删除,提示错误信息如下: Error Code: 1175. You are using safe update mode and you trie ...

  8. canvas边界与摩擦力

    处理物体超出画布时的三种基本状态,复位,移除,反弹 (1)检测是否越界的核心算法 if( object.x - object.width / 2 > right || object.x + ob ...

  9. Ceph常用维护操作

    查看ceph 集群状态 1.ssh 登陆任一MON主机 2.执行 sudo ceph health detail 命令 启动.停止.重启.查看MON进程 1.登陆到MON的服务器,执行如下命令 sud ...

  10. nginx之location

    1locations简介 location的主要作用就是根据用户请求的uri来执行不同的应用. 2location的语法 location [=|~|~*|^~|@] uri{...........} ...