常用的方法有

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. oc kvc的模式：匹配搜索模式（模式匹配）、装包解包

    按照一定规则使用匹配模式在目标空间进行搜索,然后执行相应操作: 运行时系统将kvc的运行机制解释为模式匹配,将值的兼容性问题解释为装包解包问题 一.模式匹配 The default implement ...

  2. 键值对的算子讲解 PairRDDFunctions

    1:groupByKey def groupByKey(): RDD[(K, Iterable[V])] 根据key进行聚集,value组成一个列表,没有进行聚集,所以在有shuffle操作时候避免使 ...

  3. 1095 Anigram单词

      基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 一个单词a如果通过交换单词中字母的顺序可以得到另外的单词b,那么定义b是a的Anigram,例如单词 ...

  4. ORA-245: In RAC environment from 11.2 onwards Backup Or Snapshot controlfile needs to be in shared location (Doc ID 1472171.1)

    巡检时遇到错误如下: alert日志: Wed Dec 19 01:00:29 2018Errors in file /oracle/base/diag/rdbms/usap/usap1/trace/ ...

  5. linux外接显示屏,关掉本身的笔记本电脑

    https://blog.csdn.net/a2020883119/article/details/79561035 先用xrandr命令查看: eDP-1 connected eDP-1是连接着的 ...

  6. 3386 二分图 洛谷luogu [模版]

    题目背景 二分图 感谢@一扶苏一 提供的hack数据 题目描述 给定一个二分图,结点个数分别为n,m,边数为e,求二分图最大匹配数 输入输出格式 输入格式: 第一行,n,m,e 第二至e+1行,每行两 ...

  7. <操作系统>进程和线程

    进程 定义: 一个正在执行的程序: 一个正在计算机上执行的程序实例; 能分配给处理器并由处理器执行的实体: 一个由一组执行指令,一个当前状态和一组相关的系统资源表征的活动单元. 进程的基本元素:程序代 ...

  8. heap堆算法的使用分析

    新生代  --复制算法 老年代 --标记压缩清除算法 分代 分区思想 垃圾回收的任务是识别和回收垃圾对象进行内存清理,为了让垃圾回收器可以高效的执行,大部分情况下,会要求系统进入一个停顿的状态. 停顿 ...

  9. SQL Server-聚焦深入理解死锁以及避免死锁建议（转载）

    前言 终于进入死锁系列,前面也提到过我一直对隔离级别和死锁以及如何避免死锁等问题模棱两可,所以才鼓起了重新学习SQL Server系列的勇气,本节我们来讲讲SQL Server中的死锁,看到许多文章都 ...

  10. 解决微软surface pro在某些情况下wifi转输速度过慢的问题 - z

    我是新款i7 surface.昨天到的货,狗东. 在公司使用的时候网络很正常,但回到家里之后就特别卡.5G频段也特别卡,基本处于无法观看视频的地步.台式电脑(我台式用的无线网卡)和手机都没问题. 于是 ...