获取文本节点:
1). 步骤: 元素节点 --> 获取元素节点的子节点
2). 若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

 <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 bjNode = document.getElementById("bj");

                 //2. 通过 firstChild 定义为到文本节点

                 var bjTextNode = bjNode.firstChild;

                 //3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值.

                 alert(bjTextNode.nodeValue);

                 bjTextNode.nodeValue = "尚硅谷";

                 //alert(bjTextNode);

             }

         </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编程--05--获取文本节点的更多相关文章

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

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

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

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

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

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

  4. HTML、css、javascript、DOM编程

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

  5. JavaScript的DOM编程--08--复习

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 获取元素节点的子节点 & 获取文本节点

    1. 获取元素节点的子节点(**只有元素节点才有子节点):              ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点          ...

  7. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

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

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

  9. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

随机推荐

  1. 网页设计——2. html入门

    开始正式的课程讲解了,首先来看看课程体系: Java EE(java 企业应用程序版本) java2 有三个版本:J2 SE(标准版),J2 EE(企业版).J2 ME(微缩版). 我们要掌握J2EE ...

  2. PDFBox 打印带背景的文件速度慢

    打印慢的原因 java的RasterPrinterJob会执行很多次printPage方法 他应该是按块填充的, 如果页面元素非常复杂, 那么printPage方法可能会执行十几次. 而如果你用了如下 ...

  3. Redis的五种数据类型及方法

    字符串string: 字符串类型是Redis中最为基础的数据存储类型,是一个由字节组成的序列,他在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据货Json对象描 ...

  4. Python爬虫(十九)_动态HTML介绍

    JavaScript JavaScript是网络上最常用也是支持者对多的客户端脚本语言.它可以收集用户的跟踪数据,不需要重载页面直接提交表单,在页面嵌入多媒体文件,甚至运行网页游戏. 我们可以在网页源 ...

  5. Java笔记 (持续更新ing)

    目录:  1 .  GC是什么,为什么要有GC? 1. GC是什么,为什么要有GC? GC是垃圾回收的意思,内存处理是编程人员容易出现问题的地方,忘记或者错误的内存回收会导致程序或系统的不稳定甚至崩溃 ...

  6. Android中使用ContentProvider进行跨进程方法调用

    原文同一时候发表在我的博客 点我进入还能看到很多其它 需求背景 近期接到这样一个需求,须要和别的 App 进行联动交互,比方下载器 App 和桌面 App 进行联动.桌面的 App 能直接显示下载器 ...

  7. Tkinter界面编程（一）----函数分析

    Tkinter模块是python比较常用的GUI界面设计模块,首先对相关的函数进行分析. 一 .创建根窗口相关的函数说明 import tkinter as tk top = tk.Tk() # 创建 ...

  8. android studio 使用adb命令传递文件到android设备

    一:文件传输 在android开发中,有时候需要将文件从pc端传递至android,或者将软件运行的日志,从android设备传递到pc进行分析,我们可以使用windows的cmd窗口,或者andro ...

  9. Java 常量池存放的是什么

    public class Test{ Integer i1 = 127 ; // 常量池本来就有,直接饮用常量池. String s1 = new String("aaaa"); ...

  10. 【Jenkins】Jenkins权威指南英文版：jenkins-the-definitive-guide.pdf

    原文链接:http://www.bogotobogo.com/DevOps/Jenkins/images/Intro_install/jenkins-the-definitive-guide.pdf