zoukankan      html  css  js  c++  java
  • JavaScript的DOM编程--05--获取文本节点

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

     1 <html>
     2     <head>
     3         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     4         <title>Untitled Document</title>
     5         
     6         <script type="text/javascript">
     7             
     8             //获取文本节点
     9             window.onload = function(){
    10                 
    11                 //文本节点一定是元素节点的子节点. 
    12                 
    13                 //1. 获取文本节点所在的元素节点
    14                 var bjNode = document.getElementById("bj");
    15                 
    16                 //2. 通过 firstChild 定义为到文本节点
    17                 var bjTextNode = bjNode.firstChild;
    18                 
    19                 //3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值. 
    20                 alert(bjTextNode.nodeValue);
    21                 
    22                 bjTextNode.nodeValue = "尚硅谷";
    23                 
    24                 //alert(bjTextNode);
    25             }
    26             
    27         </script>
    28         
    29     </head>
    30     <body>
    31         <p>你喜欢哪个城市?</p>
    32         <ul id="city">
    33             <li id="bj" name="BeiJing">北京</li>
    34             <li>上海</li>
    35             <li>东京</li>
    36             <li>首尔</li>
    37         </ul>
    38         
    39         <br><br>
    40         <p>你喜欢哪款单机游戏?</p>
    41         <ul id="game">
    42             <li id="rl">红警</li>
    43             <li>实况</li>
    44             <li>极品飞车</li>
    45             <li>魔兽</li>
    46         </ul>
    47         
    48         <br><br>
    49         name: <input type="text" name="username" 
    50             id="name" value="atguigu"/>
    51     </body>
    52 </html>    
  • 相关阅读:
    【uniapp】改善中大型uniapp小程序项目开发体验
    vite试玩:老项目启动从6分钟到秒开
    修剪AST树减少webapck打包尺寸
    librispeech数据集下载
    语音识别性能评估方法
    2021.12.11 物联网考试
    2021.12.15 课程总结+加分项
    2021.12.9 观影大数据分析
    2021.12.8 Docker服务
    2021.12.10 阿里云服务器创建
  • 原文地址:https://www.cnblogs.com/nifengs/p/4833950.html
Copyright © 2011-2022 走看看