节点的属性:
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. phpstorm快捷键记录

    快捷键记录 Ctrl + N 按类名查找Ctrl + Shift + N 按文件名查找,快速查找文件Ctrl + Shift+Alt+N 根据函数名查找Ctrl + F 当前文件查找Ctrl + Sh ...

  2. stm32串口接收中断协议解析

    借鉴了文章:<stm32串口中断接收方式详细比较> 文章地址:http://blog.csdn.net/kevinhg/article/details/40186169 串口的配置这里不做 ...

  3. 通过Nutch扩展点开发插件(添加自定义索引字段到solr)

    爬虫系统:通过Nutch扩展点开发插件(添加自定义索引字段到solr) 准备工作 爬虫环境 -- nutch2.3.1 + solr4.10.3 + hbase0.98 开发环境 -- Eclipse ...

  4. JAVA9模块化详解（一）——模块化的定义

    JAVA9模块化详解 前言 java9已经出来有一段时间了,今天向大家介绍一下java9的一个重要特性--模块化.模块化系统的主要目的如下: 更可靠的配置,通过制定明确的类的依赖关系代替以前那种易错的 ...

  5. Java-----关于线程池的使用

    关于线程的相关概念不在此阐述,请百度或谷歌之 对于学习线程来说,我认为从代码开始学习比较好,前提是有一定的技术的积累,否则请关闭不用再看了~ 线程池四种实现方式. ①可缓存线程池,如果线程池长度超过处 ...

  6. 》》3D轮播

    * { margin: 0; padding: 0; } .slide { position: absolute; top: calc(50% - 150px); left: calc(50% - 3 ...

  7. SQL运行时间

    打开SQL运行时间统计  set timing on; 查询是否有运行时间较长的SQL存在  select a.sid, b.sql_text   from v$session a, v$sqlare ...

  8. vim各种编码设置问题

    vim各种编码设置问题 vim中主要有四个编码相关的设置,详细是~/.vimrc中: 下面是我的设置: set fileencodings=gb18030,utf-8,gb2312,gbk: set ...

  9. java_抽象类

    抽象类1,语法定义抽象类前使用abstract关键字修饰,则该类为抽象类2.应用场景(1)在某些情况下,某个父类只是知道其子类应该包含怎样的方法,但无法准确知道这些子类如何实现这些方法. (2)从多个 ...

  10. Springboot的默认定时任务——Scheduled注解

    本博客参考博文地址. 1.pom依赖: 引入springboot starter包即可 <dependencies> <dependency> <groupId>o ...