获取文本节点:
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. codeforces 895B XK Segments 二分 思维

    codeforces 895B XK Segments 题目大意: 寻找符合要求的\((i,j)\)对,有:\[a_i \le a_j \] 同时存在\(k\),且\(k\)能够被\(x\)整除,\( ...

  2. PAT 1003. Emergency (25) dij+增加点权数组和最短路径个数数组

    1003. Emergency (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue As an emerg ...

  3. 批量抓取cisco设备配置脚本编写(expect/sed/awk/shell)

    应同事需求自行编写了第一个脚本,中间遇到一些坑. 需求,要求抓取设备"show ip interface brief"信息和"show interface des&quo ...

  4. 下拉菜单被挡住了，DIV置于最底层的方法

    网站常会用到一些 下拉菜单,,幻灯片,,,飘浮广告等. 但经常会发现.幻灯片会挡住下拉菜单或者飘浮广告等.解决办法有下 第一,可将幻灯片所在DIV 置于最底层.添加CSS如下 style=" ...

  5. 小白的Python之路 day2 字符串操作 , 字典操作

    1. 字符串操作 特性:不可修改 name.capitalize() 首字母大写 name.casefold() 大写全部变小写 name.center(50,"-") 输出 '- ...

  6. Sublime Text 3 常用快捷键

    一. 选择类       Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.     Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并 ...

  7. db2 update 异常

    报错: -错误的sql语句:update Persons SET FirstName = 'Fred' WHERE id_P = 1com.ibm.db2.jcc.am.SqlException: O ...

  8. ORACLE-015：ora-25153 暂时表空间为空，ora01652 无法通过128

    写了一个复杂的select语句,突然oracle就报了:ora-25153 暂时表空间为空,这个错误,于是网上查了下.发现了例如以下解决方法:创建一个新的暂时表空间. 首先要有system权限.登录进 ...

  9. springmvc中@PathVariable传Double精度丢失

    页面请求 http://localhost:8080/test/3.201 后端接受数据 /** * 测试 * * @param number */ @RequestMapping(value = & ...

  10. 日期函数ADD_MONTHS，MONTHS_BETWEEN，LAST_DAY，NEXT_DAY