<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>DOM查找</title>

    <!--

        document.getElementById("id");通过Id来获取/id="id"的元素

        document.getElementsByTagName("tagName");通过标签名来获取标签tagName的元素

        document.getElementsByName("name");通过Name来获取name="name"的元素

        document.getElementsByClassName("className");通过className来获取class="className"的元素

        切记，getElementById只有获取id的时候element后不需要加s，因为id是唯一的

            除了getElementById，其他几种方式获取到的都是伪数组

     -->

</head>

<body>

    <h1 id="h1">我是标题1</h1>

    <div class="box"></div>

    <ul>

        <li>无序1</li>

        <li>无序2</li>

        <li>无序3</li>

    </ul>

    <ol id="ol1">

        <li>有序1</li>

        <li>有序2</li>

        <li>有序3</li>

    </ol>

    <input type="text" name="inp" value="输入框1">

    <input type="text" value="输入框2">

    <hr />

    <script>

        var a=document.getElementById("h1");//获取id="h1"的元素

        var b=document.getElementsByClassName("box");//获取类名class="box"的元素

        var c=document.getElementsByTagName("li");//获取标签名为li的元素

        var d=document.getElementById("ol1").getElementsByTagName("li");//获取id="ol1"的元素下标签名为li的元素

        var e=document.getElementsByName("inp");//获取name="inp"的元素

        console.log(a);//<h1 id="h1">我是标题1</h1>

        console.log(a+b);//[object HTMLHeadingElement][object HTMLCollection]

        document.write(a);//[object HTMLHeadingElement]

    </script>

</body>

</html>

DOM查找的更多相关文章

  1. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  2. JavaScript Dom 查找

    JavaScript Dom 查找 一.直接查找 获取单个元素 document.getElementById('i1') 获取多个元素(列表数组) document.getElementsByTag ...

  3. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  4. DOM 查找标签

    1.直接查找 document.getElementById // 根据ID获取一个标签 document.getElementsByClassName //根据class属性获取 document. ...

  5. DOM查找元素的方法总结

    按HTML查找:优点:范围可大可小,可设置条件:包括五种方式:1.按id查找:2.按标签名查找:var elems = parent.getElementsByTagName('');3.按name属 ...

  6. DOM查找元素

    1. 查找元素5种: 1. 按id查找1个元素对象: var elem=document.getElementById("id值"); 何时使用:1. 元素必须有id 2. 精确查 ...

  7. JavaScript, DOM查找元素

    1.document.getElementById("id"); => IE8 及较低版本不区分ID的大小写 => IE7及较低版本中表单元素的name特性和ID都会被 ...

  8. 基于jQuery查找dom的多种方式性能问题

    这个问题的产生由于我们前端组每个人的编码习惯的差异,最主要的还是因为代码的维护性问题.在此基础上,我对jQuery源码(1.11.3)查找dom节点相关的内容进行了仔细的查阅,虽然并不能理解的很深入 ...

  9. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

随机推荐

  1. RecursiveSequence(HDU-5950)【矩阵快速幂】

    题目链接: 题意:Si=S(i-1)+2*S(i-2)+i^4,求Sn. 思路:想到了矩阵快速幂,实在没想出来怎么构造矩阵.... 首先构造一个向量vec={a,b,16,8,4,2,1}. 在构造求 ...

  2. Dining(POJ-3281)【最大流】

    题目链接:https://vjudge.net/problem/POJ-3281 题意:厨师做了F种菜各一份,D种饮料各一份,另有N头奶牛,每只奶牛只吃特定的菜和饮料,问该厨师最多能满足多少头奶牛? ...

  3. 《统计学习方法》极简笔记P4：朴素贝叶斯公式推导

    <统计学习方法>极简笔记P4:朴素贝叶斯公式推导 朴素贝叶斯基本方法 通过训练数据集 T={(x_1,y_1),(x_2,y_2),(x_N,y_N)...,(x_1,y_1)} 学习联合 ...

  4. 在一个form表单中实现多个submit不同的action

    在button中用JS的事件绑定onclick实现,如下: <!-- employees是表单的name属性值--> <script type="text/javascri ...

  5. redis5.0集群配置

    介绍 redis自3.0版本以来支持主从模式的集群,可用哨兵监控集群健康状态,但这种方式的集群很不成熟,数据备份需要全量拷贝.在之后的版本才真正支持集群分片. 在redis5.0中去除了以redis- ...

  6. 奇妙的算法【9】YC每个小孩的糖果数，找公约数，最少硬币数

    1,每个小孩的糖果数量是多少 有p个小孩,c个糖果,刚开始第1个小孩发一个糖果,第2个小孩发两个糖果,第p个小孩发p个糖果,如果糖果没有发完,就接着[注意]第1个小孩发p+1个糖果.....第p个小孩 ...

  7. [转载]三十分钟理解：线性插值，双线性插值Bilinear Interpolation算法

    [转载]三十分钟理解:线性插值,双线性插值Bilinear Interpolation算法 来源:https://blog.csdn.net/xbinworld/article/details/656 ...

  8. Unity 自定义"=="操作符 [翻译来源blogs.unity3d,2014/05]

    主要内容来源 https://blogs.unity3d.com/cn/2014/05/16/custom-operator-should-we-keep-it/ 在我们代码里,如果有这样的代码: i ...

  9. [LeetCode] 17. 电话号码的字母组合 ☆☆☆(回溯) ###

    描述 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23"输出:[&q ...

  10. 谁还不知道Java String的那点事

    String是我们平时接触最多的一种数据类型之一,不同语言有自己内部的实现,今日一起看下Java中String的内部实现. 常问问题 面试中常被提及的String问题 String为什么是Final的 ...