节点的属性:
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. Android Studio问题汇总

    1) Android Studio重命名工程名称: 1. 关闭Android Studio 2. 修改project所在路径的文件夹名字为[NewName] 3. 修改根目录下的.iml文件名为[Ne ...

  2. 第六届河南省赛 River Crossing 简单DP

    1488: River Crossing Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 83  Solved: 42 SubmitStatusWeb ...

  3. 三种方法实现PCA算法（Python）

    主成分分析,即Principal Component Analysis(PCA),是多元统计中的重要内容,也广泛应用于机器学习和其它领域.它的主要作用是对高维数据进行降维.PCA把原先的n个特征用数目 ...

  4. node.js之express框架入门篇

    一.express框架简介 express框架是后台的Node框架,在后台的受欢迎的程度,和jQuery一样 英语官网:http://expressjs.com/ 中文官网:http://www.ex ...

  5. Scala入门系列（十一）：模式匹配

    引言 模式匹配是Scala中非常有特色,非常强大的一种功能. 类似于Java中的switch case语法,但是模式匹配的功能要比它强大得多,switch只能对值进行匹配,但是Scala的模式匹配除了 ...

  6. 小tip：生成一组不重复的随机数（去重的方法）

    var arr = []; for(var i=0;i<150;i++){ // num为0-100的随机数 var num = Math.round(Math.random()*100); v ...

  7. ubuntu16.04 Qt5.8 如何使用opecv3.2

    关于opencv3.2的编译有一大堆教程.可自寻查看.在Qt中使用opencv需要在pro文件中添加 相应的头文件和 动态链接库.如下 INCLUDEPATH += . INCLUDEPATH += ...

  8. java学习笔记—集合之Map集合

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 12.0px Times } p.p2 { margin: 0.0p ...

  9. 程序员的自我救赎---3.2：SSO及应用案例

    <前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...

  10. 来腾讯云开发者实验室 学习.NET Core 2.0

    腾讯云开发者实验室为开发者提供了一个零门槛的在线实验平台,开发者实验室提供的能力: 零门槛扫码即可免费领取实验机器,支持使用自有机器参与,实验完成后支持保留实验成果: 在线 WEB IDE 支持 sh ...