码迷,mamicode.com
首页 > Web开发 > 详细

JS获取节点

时间:2019-04-27 21:33:44      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:demo   循环   html   取出   集合   input   通过   else   对象   

JS 的 document 内置对象
  把 html 中每个标签看成一个节点, 通过 js 将这些节点获取出来
  使用 JS 的 document 内置对象(对象有自己的属性和方法),
  内置对象就是已经创建好的对象, 我们只需要直接使用即可

方法:
  document.getElementById("id属性")
    根据元素的 id 值获取对象, 返回值是一个对象
  innerHTML
    获取节点对象下 的所有 html 代码.
  document.getElementsByTagName("标签名");
    根据标签吗获取对象, 返回一个集合(数组)
  isNaN(字符串)
    判断一个字符串是否是纯数字, 不是纯数字返回true, 反之返回 false

Demo: 根据 id 值获取元素节点对象
html:

1 <body>
2         <div id = "div1">
3             <p>
4                 很快就放假了!
5             </p>
6         </div>
7 </body>
8 </html>
9 <script src="index.js"></script>

js:

var node = document.getElementById("div1");
console.log(node.innerHTML);

 

Demo: 根据标签名获取元素节点
html:

<body>
    用户名: <input type="text" name="username" value="张三">
     密 码 : <input type="password" name="pwd" value="1234">
     电 话 : <input type="text" name="iphone" value="110">
</body>
</html>
<script src="index.js"></script>

js:

 1 var inputs = document.getElementsByTagName("input");
 2 console.log("用户名: " + inputs[0].value);
 3 console.log(" 密 码: " + inputs[1].value);
 4 var iphone = inputs[2].value;
 5 //判断一个字符串是否是纯数字
 6 if (isNaN(iphone)){ //不是纯数字返回true, 是纯数字返回false
 7     alert("电话不是纯数字")
 8 }else{
 9     alert("电话是纯数字")
10 }

Demo: 根据 class 获取元素节点
html:

<body>
        <p class="wuyi">
            <h1>1.五一快乐</h1>
        </p>
        <p class="wuyi">
            <h1>2.五一快乐</h1>
        </p>
        <p class="wuyi">
            <h1>3.五一快乐</h1>
        </p>
        <p class="wuyi">
            <h1>4.五一快乐</h1>
        </p>
</body>
</html>
<script src="index.js"></script>

js:

var ps=document.getElementsByClassName(‘wuyi‘);
//遍历循环 ps
for(var i=0;i<ps.length;i++){
    console.log(ps[i]);
}

Demo: 在文本框输入两个数, 然后计算出值之后输出
html:

<body>
    A的值: <input type="text" name="numA">
    B的值: <input type="text" name="numB">
    A的值: <input type="text" name="numC">
    <button type="button" onclick="addSum()">开始计算</button>
</body>
</html>
<script src="index.js"></script>

js:

 1 function addSum(){
 2     //获取文本框中的值
 3     var inputs=document.getElementsByTagName(‘input‘);
 4     var numA=inputs[0].value;
 5     var numB=inputs[1].value;
 6     //将字符串换成数字
 7     var sum=parseInt(numA)+parseInt(numB);
 8     //将计算的值填写到第三个input中
 9     inputs[2].value=sum;
10 }

 

JS获取节点

标签:demo   循环   html   取出   集合   input   通过   else   对象   

原文地址:https://www.cnblogs.com/yslf/p/10780260.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!