常用的方法有

document.getElementById("id");

document.getElementsByTagName('tagName');

document.getElementsByName('inputName');

document.getElementByClassName('className');

　其中只有通过id才能保证获得是一个元素。其他的方法获得的都是一个集合（collection），可以使用数组的访问方式访问。

下面是简单的实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .span_class_1{background: red}

        .span_class_2{background: orange}

    </style>

</head>

<body>

    <div id="div_id">this is tag div</div>

    <p>this is tag p1</p><br>

    <p>this is tag p2</p><br>

    <p>this is tag p3</p><br>

    <span class="span_class_1">this is tag span1</span><br>

    <span class="span_class_1">this is tag span2</span><br>

    <input type="text" name="username"><br>

    <input type="text" name="age"><br>

</body>

    <script>

        var div=document.getElementById("div_id");

        console.log(div.innerHTML);

        var p=document.getElementsByTagName("p");

        console.log(p[0].innerHTML);

        console.log(p[2].innerHTML);

        var span=document.getElementsByClassName("span_class_1");

        console.log(span[1].innerHTML);

        var input=document.getElementsByName("username");

        console.log(input[0].innerHTML);

    </script>

</html>

JavaScript获取DOM节点的更多相关文章

  1. ionic2 获取dom节点

    ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...

  2. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  3. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  4. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  5. Omi框架学习之旅 - 获取DOM节点 及原理说明

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...

  6. React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  7. JavaScript HTML DOM 节点

    要向HTML DOM添加新元素,必须首先创建元素(元素节点),然后将其附加到现有元素. <!DOCTYPE html> <html> <meta charset=&quo ...

  8. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  9. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

随机推荐

  1. PHP开发api接口安全验证方法一

    前台想要调用接口,需要使用几个参数生成签名.时间戳:当前时间随机数:随机生成的随机数 签名:特定方法生成的sign签名 算法规则在前后台交互中,算法规则是非常重要的,前后台都要通过算法规则计算出签名, ...

  2. github（1）安装及使用图文详解

    教程https://blog.csdn.net/qq_32166627/article/details/54427622 下载地址:https://desktop.github.com/

  3. Python脱产8期 Day03 2019/4/15

    一 变量的命名规范 1.只能由 字母, 数字,  _, 组成. 2. 不能以数字开头 3.避免与系统关键字重名:重名不会报错,但系统的功能就被自定义的功能屏蔽掉了(严重不建议这样来做) 4.以_开头的 ...

  4. [TPYBoard - Micropython之会python就能做硬件 开篇]会python就能做硬件！

    转载请注明:@小五义http://www.cnblogs.com/xiaowuyiQQ群:64770604 会python就能做硬件! 在写这套教程之前,首先感觉山东萝卜电子科技有限公司(turnip ...

  5. 分布式RPC框架性能大比拼 dubbo、motan、rpcx、gRPC、thrift的性能比较

    Dubbo 是阿里巴巴公司开源的一个Java高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成.不过,略有遗憾的是,据说在淘宝内部,dub ...

  6. Linux运维故障排查思路

    linux系统故障 网络问题 linux系统无响应 linux系统无法启动 linux系统故障处理思路 1.重视报错信息,一般情况下此提示基本定位了问题的所在 2.查阅日志文件,系统日志和应用日志 3 ...

  7. 学习CSS布局 - 盒模型

    盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度 ...

  8. Mac安装LNMP环境，升级php7

    Mac安装nginx+mysql+php 安装nginx比较麻烦,要安装pcre       ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre ...

  9. 使用Windows API进行串口编程

    使用Windows API进行串口编程   串口通信一般分为四大步:打开串口->配置串口->读写串口->关闭串口,还可以在串口上监听读写等事件.1.打开和关闭串口Windows中串口 ...

  10. security相关链接整理

    token令牌 ssl协议 https协议 对称加密与非对称加密 认识ASP.NET Windows身份认证