读写属性节点:

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. 三十天学不会TCP,UDP/IP编程--MAC地址和数据链路层

    这篇文章主要是来做(da)推(guang)介(gao)的!由于这两年接触到了比较多的这方面的知识,不想忘了,我决定把他们记录下来,所以决定在GitBook用半年时间上面写下来,这是目前写的一节,后面会 ...

  2. [Bootstrap 源码]——bootstrap源码之初始化

    bootstrap源码之初始化 我们先来分析normalize.less编译后的源码,我们知道normalize.css是一个专门将不同浏览器的默认css特性设置为统一效果的css库,它和reset. ...

  3. 分布式系统中的必备良药 —— RPC

    阅读目录 前言 成熟的解决方案 剖析 性能测试 结语 一.前言 在上一篇分布式系统系列中<分布式系统中的必备良药 —— 服务治理>中阐述了服务治理的一些概念,那么与服务治理配套的必然会涉及 ...

  4. ListView与Adapter笔记:ZrcListView

    怕自己说的不清不楚,先来一个郭神的文章镇楼:http://blog.csdn.net/guolin_blog/article/details/44996879 github:https://githu ...

  5. java 可变參数

    我们在某些特定的需求环境下,可能要对某一个方法中的參数进行一些操作,并且这些方法中的參数是不规定的,那么问题来了,我们该怎么办呢? java事实上就为我们考虑了这样的情况,那就是使用可变參数 可变參数 ...

  6. break and continue

    public class HelloWorld { public static void main(String[] args) { int sum = 0; for (int i = 1; i &l ...

  7. Vue深度学习(4)-方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="app"> <button v-on:click = "greet" ...

  8. intelliJ IDEA自动优化导入包设置

    Settings→Editor→General→Auto Import 选中Optimize imports on the fly和Add unambiguous imports on the fly ...

  9. github上搜索资源

    1.进入官网 点击Explore 2.点击Trending 3.资源都在这上面,可以根据语言分类 4.搜索链接 https://github.com/trending

  10. Python笔记·第十一章—— 函数 (二) 装饰器

    一 为何要用装饰器 有的时候写完一段代码,过段时间需要对它进行升级.添加一些新功能,但是如果要直接修改原来的代码会影响其他人的调用,所以就需要一个不修改源代码且不修改原函数的调用方式的东西又能为原函数 ...