读写属性节点:

1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值

2)通过元素节点的 getAttributeNode 方法来获取属性节点,
然后在通过 nodeValue 来读写属性值

 1 <html>

     <head>

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

         <title>Untitled Document</title>

         <script type="text/javascript">

             //读写属性节点: 通过元素节点 . 的方式来获取属性值和设置属性值.

             window.onload = function(){

                 //属性节点即为某一指定的元素节点的属性.

                 //1. 先获取指定的那个元素节点

                 var nameNode = document.getElementById("name");

                 //2. 再读取指定属性的值

                 alert(nameNode.value);

                 //3. 设置指定的属性的值.

                 nameNode.value = "尚硅谷";

                 //var nameAttr = nameNode.getAttributeNode("value");

                 //alert(nameAttr);

                 //alert("--" + nameAttr.nodeValue);

                 //nameAttr.nodeValue = "atguigu";

             }

         </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编程--03--读写属性节点的更多相关文章

  1. JavaScript的DOM编程--04--获取元素节点的子节点

    获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...

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

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

  3. HTML、css、javascript、DOM编程

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

  4. javascript之DOM编程通过html元素的标签属性找节点

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

  5. JavaScript的DOM编程--07--节点的属性

    节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整 ...

  6. JavaScript的DOM编程--05--获取文本节点

    获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name=" ...

  7. JavaScript的DOM编程--10--删除节点

    1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...

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

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

  9. javascript操作DOM的方法与属性

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...

随机推荐

  1. 这是一篇关于：以时间表的形式来介绍Java如何演变至今，以及Java版本的一些特性的分享

    这是一篇关于:以时间表的形式来介绍Java如何演变至今,以及Java版本的一些特性的分享: Java版本,功能和历史 原文[英]:https://javapapers.com/core-java/ja ...

  2. PHP扩展开发 第一课 为什么要写扩展及hello world

    PHP扩展开发其实很简单.那为什么要扩展开发呢. 这里咱们以实际的案例进行对比. 第一步,进入 php源码包   http://www.php20.com/forum.php?m ... =159&a ...

  3. php 写程序求三个数的最大值

    最简单的调用PHP自带的max函数即可:echo max(1,2,3,4,5);如果要自定义函数的话:function test($a,$b,$c){ return $a > $b ?($a & ...

  4. TL-WR703Nv1.7刷写openwrt固件

    TP-LINK TL-WR703N是一个小型的路由器,可以有线转WiFi,3G转WiFi,很多人拿它刷openwrt系统,然后可以在上面各种搞事. V1.7以前 通常刷openwrt的做法是, 下载一 ...

  5. 网页设计——5.table布局

    今天做一个大的页面,主要是对table布局的理解: 代码: <table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" ...

  6. require.js模块化写法

    模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 下述两种写法等价 exports 对象是当前模块的导出对象,用于导出模块公有方法和属性. ...

  7. EF(EntityFramework)与mysql使用，乱码问题

    1.中文乱码问题 利用ef更新数据到mysql数据库中,中文就会变成乱码"???",就算把mysql的数据库的编码设置为"utf8"也会变成乱码,从网上查询了下 ...

  8. 使用django UWSGI 出现 Bad Request (400)

    使用 Nginx + Django+UWSGI 部署机器时,一直出现 Debugging Apache/Django/WSGI Bad Bad Request (400) 错误 最后发现问题是 Dja ...

  9. 酷狗歌曲缓存kgtemp转mp3工具

    一直用网易音乐听歌,不过网易的歌曲版权确实是少了一些,在酷狗上可以找到,但收费歌曲只能试听不能下载. 寻找方案 从设置里可以看出,酷狗会设置缓存目录,试听的歌曲存放到这个缓存里. 打开缓存目录: 可以 ...

  10. Codeforces Round #257 (Div. 2) A. Jzzhu and Children（简单题）

    题目链接:http://codeforces.com/problemset/problem/450/A ------------------------------------------------ ...