获取文本节点:
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. thinkphp整合系列之极验滑动验证码

    对于建站的筒子们来说:垃圾广告真是让人深恶痛绝:为了清净:搞个难以识别的验证码吧:又被用户各种吐槽:直到后来出现了极验这个滑动的验证码:这真是一个体验好安全高的方案:官网:http://www.gee ...

  2. C# Dictionary根据Key排序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  3. 1.5 sleep()方法

    方法sleep()的作用是在指定的毫秒数内让当前"正在执行的线程"休眠(暂停执行).这个"正在执行的线程"是指this.currentThread()返回的线程 ...

  4. OBS源码解析（2）run_program函数

    static int run_program(fstream &logFile, int argc, char *argv[]){ /*初始化和读取profile相关信息*/ int ret ...

  5. VMware---添加esxi主机的实验

     实验环境:window_server_2012_r2_64 SQLServer2012SP1-FullSlipstream-CHS-x64 虚机配置: 关于windows server2012 和 ...

  6. Windows Azure系列-- 配置Azure Power Shell

    1.下载Azure Power shell https://azure.microsoft.com/en-us/documentation/articles/powershell-install-co ...

  7. 自学Zabbix3.9.1-模板Templates-创建

    自学Zabbix3.9.1-模板Templates-创建 1. 模板介绍 模板是一组可以方便地应用于多个主机的实体. 实体可能是: 项目 触发器 图 应用程序 屏幕(因为Zabbix 2.0) 低层次 ...

  8. 查看和删除chrome浏览器缓存内容

    平时用chrome开发更多,介绍一下如何清除和查看chrome浏览器的缓存内容,其他浏览器大同小异就不细说了 打开设置==>隐私设置和安全性==>内容设置==>cookie ==&g ...

  9. intellij idea 在什么地方打开终端Terminal

    File→Plugins→Terminal 勾选它,点击Apply,点击Restart即可如果是要启动terminal则必须先做完上面动作,才可以点击Tools→Open Terminal... 来达 ...

  10. CentOS 7 学习（一） 配置LAMP和Nginx

    CentOS 7 学习(一) 配置LAMP和Nginx CentOS是RedHat Linux企业版的代码编译版本,属于比较通用的服务器Linux版本,据说Ubuntu Server更通用,呵呵,不过 ...