节点的属性:
1). nodeName: 代表当前节点的名字. 只读属性.
　　如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
2). nodeType：返回一个整数, 这个数值代表着给定节点的类型.
只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性
①. 元素节点, 返回值是 null.
②. 属性节点: 返回值是这个属性的值
③. 文本节点: 返回值是这个文本节点的内容

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>Untitled Document</title>

         <script type="text/javascript">

             //关于节点的属性: nodeType, nodeName, nodeValue

             //在文档中, 任何一个节点都有这 3 个属性

             //而 id, name, value 是具体节点的属性.

             window.onload = function(){

                 //1. 元素节点的这 3 个属性

                 var bjNode = document.getElementById("bj");

                 alert(bjNode.nodeType); //元素节点: 1

                 alert(bjNode.nodeName); //节点名: li

                 alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null

                 //2. 属性节点

                 var nameAttr = document.getElementById("name")

                                        .getAttributeNode("name");

                 alert(nameAttr.nodeType); //属性节点: 2

                 alert(nameAttr.nodeName); //属性节点的节点名: 属性名

                 alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值

                 //3. 文本节点:

                 var textNode = bjNode.firstChild;

                 alert(textNode.nodeType); //文本节点: 0

                 alert(textNode.nodeName); //节点名: #text

                 alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身. 

                 //nodeType、nodeName 是只读的.

                 //而 nodeValue 是可以被改变的。

                 //以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多.

             }

         </script>

     </head>

     <body>

         <p>你喜欢哪个城市?</p>

         <ul id="city">

             <li id="bj" name="BeiJing">北京</li>

             <li>上海</li>

             <li>东京</li>

             <li>首尔</li>

         </ul>

         <br><br>

         <p>你喜欢哪款单机游戏?</p>

         <ul id="game">

             <li id="rl">红警</li>

             <li>实况</li>

             <li>极品飞车</li>

             <li>魔兽</li>

         </ul>

         <br><br>

         name: <input type="text" name="username"

             id="name" value="atguigu"/>

     </body>

 </html>

JavaScript的DOM编程--07--节点的属性的更多相关文章

  1. javascript之DOM编程设置节点插入节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  3. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  4. JavaScript的DOM编程--03--读写属性节点

    读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue ...

  5. JavaScript的DOM编程--12--innerHTML属性

    innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> < ...

  6. JavaScript的DOM编程--02--获取元素节点

    如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取 ...

  7. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  8. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  9. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

随机推荐

  1. P2024食物链

    题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B 吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种,但是我 ...

  2. 第四届河南省ACM 序号互换 进制转换

    序号互换 时间限制: 1 Sec  内存限制: 128 MB 提交: 41  解决: 19 [提交][状态][讨论版] 题目描述 Dr.Kong设计了一个聪明的机器人卡多,卡多会对电子表格中的单元格坐 ...

  3. Go语言教程5 if switch select

    首先您需要有php或是c的基础. 否则可能看不明白 方法如下 if 表达式{ //需要注意的是  没有括号. 没错. 没有括号 比如  if  1>2 {}else{} } else { } s ...

  4. javascript设计模式——迭代器模式

    前面的话 迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示.迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也 ...

  5. 在学java继承中

    看到一片个人认为的好博客,http://www.cnblogs.com/dolphin0520/p/3803432.html   ;这一节看的比较慢,加油,就是干: 分类不好意思分到Java中,嘿嘿还 ...

  6. 阿里云轻量应用服务器Lamp部署php工程踩过的坑

    第一次写博客,也不知道写什么,但是想坚持写博客来提升自己,不喜勿喷. 切回正题,使用阿里云的轻量应用服务器Lamp其实非常方便,价格也很便宜,一键购买需要的环境都帮你搭配好了,剩下的就是自己修改一下数 ...

  7. OpenXml读取word内容(三）

    内容和表格内容一起读: word内容: 代码: public static void ReadWordByOpenXml(string path) { using (WordprocessingDoc ...

  8. git 操作问题

    clone远程版本号库的时候,报错,提示路径不正确. 之前输入的路径为:ssh://[ip]:[port号]/[数据库名称] 增加username后的路径:ssh://[username]@[ip]: ...

  9. 用JAVA自己画一张二维码

    我们都知道,最近2年移动支付在中国堪称新四大发明之一. 二维码无处不在,特别是最近的支付宝扫码领红包,微信,qq,到处在发,阿里有点攻占腾讯移动支付市场的势头啊~博主忽然就对二维码是怎么画的有了点好奇 ...

  10. ATM程序设计

    package com.arthur.object; import java.util.Scanner; /*** * 简单的ATM存取款程序 1.登陆页面 2.登陆 3.菜单:1,查询,2,存款,3 ...