JS-节点属性(常用!)

时间:2022-03-18 05:10:58

(开始很生疏,不想看的知识点,后来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 &colon;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. 项目开发之使用 maven

    本文将详述 maven 在软件项目中的使用.首先讲述 maven 的基本工作原理及环境的搭建.然后讲述开发及配置管理人员如何使用 maven,最后将介绍 maven 与 eclipse 集成使用. m ...

  2. mod&lowbar;rewrite

    一.简介 http://www.07fly.net/a/wangluobiancheng/Phpbiancheng/201501/58393.html   二.实现原理:       只有当用户的WE ...

  3. windows7下修改hosts文件无效解决办法

    通常会为了开发方便.或者屏蔽掉一些恶意网站,我们会在hosts(c:\windows\system32\drivers\etc\hosts)文件中进行相应的域名指向,例:

  4. thinkphp二维数组模板输出方法

    thinkphp二维数组模板输出方法 先写个记录,有空再整理发上来

  5. Sass&amp&semi;Compass学习笔记(一)

    1.sass中可以使用变量 变量名以$符号开头,可包含所有可用作CSS类名的字符,包括下划线和中划线. 可见,中划线也是可以作为命名的字符,这是与很多其他语言的不同之处.变量的使用实例: $compa ...

  6. hdu 3397 Sequence operation&lpar;很有意思的线段树题&rpar;

    Sequence operation Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  7. perl use base 继承

    centos6.5:/root/podinns/lib#cat First.pm package First; use base qw(Second); sub new { my $self = {} ...

  8. java新版中唤醒指定线层对象

    import java.util.concurrent.locks.*; class Do9 { public static void main(String[] args) { Resource r ...

  9. IOS 特定于设备的开发:基于加速计的滚动视图

    倾斜滚轮使用设备的内置加速计来控制在UIScrollView的内容周围移动.当用户调增设备时,材料会相应的下落,他不会把视图定位在屏幕上,而是把内容视图滚动到一个新的偏移位置. 创建这个界面的挑战在于 ...

  10. 关于easyui的tab,layout,datagrid嵌套的问题

    我的项目使用easyui作为前台的展示框架现在页面中是一个layout布局(分上,左,中)在左边是一些菜单,点击后,在中间部分增加一个tab显示内容而增加的tab里面是显示一些列表数据,列表上面是查询 ...