常用的方法有

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. swift 该死的派发机制--待完成

    swift 该死的派发机制 final static oc类型 多态类型 静态类型 动态函数  静态函数 nsobject: 1.缺省不再使用oc的动态派发机制: 2.可以使用nsobject暴露出来 ...

  2. [NOIP2018]旅行

    嘟嘟嘟 鉴于一些知道的人所知道的,不知道的人所不知道的原因,我来发NOIPday2T1的题解了. \(O(n ^ 2)\)的做法自然很暴力,枚举断边断环为链就行了. 所以我是来讲\(O(nlogn)\ ...

  3. Plotagraph软件五分钟光速速成傻瓜教程

    http://bbs.dji.com/thread-144203-1-1.html 让照片变成动态的

  4. 蒟蒻qxt的sd'日常

    emm... 今天刷了一道水题 居然 死循环了 真的是水题啊 顿时自闭 (救救孩子吧) 结果 bug是 我把for循环中的i的值改变了 使得i的值一直都不会达到他的边界值 于是就死循环了 所以 要用到 ...

  5. 大牛blog

    分布式: 分布式基础学习[一] —— 分布式文件系统 分布式基础学习[二] —— 分布式计算系统(Map/Reduce) Java分布式应用技术架构介绍

  6. MongoDB的地理位置查询，以及和mysql的使用对比

    MongoDB的一个特色就是具有丰富的查询接口,比如地理位置查询. 在地理位置查询上,MongoDB有着比传统关系型数据库的优势,下面举个例子. 当前移动互联网应用,按用户离目标门店距离排序上的场景很 ...

  7. HDMI传输原理：TMDS

    参考资料:http://blog.sina.com.cn/s/blog_679686370100vgg1.html: http://www.eeworld.com.cn/mndz/2011/0818/ ...

  8. CentOS7.2调整Mysql数据库最大连接数

    mysql数据库最大连接数=max_connections+11:root连接,用于管理员连接数据库进行维护操作查看最大连接数:show variables like 'max_connections ...

  9. BootStrap学习(5)_多媒体对象&列表组

    一.多媒体对象 这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. .media: ...

  10. 有关素数判断的一些算法（总结&&对比）

    素性测试是数论题中比较常用的一个技巧.它可以很基础,也可以很高级(哲学).这次主要要介绍一下有关素数判断的奇技淫巧 素数的判断主要分为两种:范围筛选型&&单个判断型 我们先从范围筛选型 ...