<!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. Xamarin.Forms FlyoutIcon 不显示(not shown)

    升级了VS2019到16.4版本,然后默认创建了一个Xamarin Shell程序 结果运行后是这个样子 难道不应该是这个样子吗? 百了个度一晚上没解决,资料本身就少,再就是提示设置FlyoutIco ...

  2. Windows Terminal Preview v0.7 Release

    Windows Terminal Preview v0.7 Release The following key bindings are included by default within this ...

  3. 《Mysql 一条 SQL 语句是如何执行的？》

    一:概述 - 首先需要认识一下 Mysql 整体的基础架构 -  二:Mysql 的分层 - MySQL 可以分为 Server 层和存储引擎层两部分 - Server 层 - Server 层包括连 ...

  4. EasyUI 对话框弹出文件输入框

    目前用的EasyUI的dialog,要实现弹出文件输入框(或者其他输入框和对话框),我的实现方案是,首先写一个close的div,然后里面就是样式和输入框的一些代码和一个确定按钮,然后页面上一个按钮, ...

  5. Erlang:[笔记一，构建工具rebar之编译]

    Rebar概述 Rebar是一款Erlang构建工具,使用它可以方便的编译,测试erlang程序和打包erlang发行版本.Rebar其实是一个独立的erlang脚本,默认情况下,Rebar会按照Er ...

  6. 理解Python函数和方法

    什么是函数? 函数是抽象出的一组执行特定功能的重复代码,通俗理解,就是对一些重复的工作进行封装和然后直接调用,避免重复造轮子. Python中的函数如何定义? 使用def关键字,结构如下: def 函 ...

  7. 导出excel的功能效果实现

    <el-button @click="exportExcel" > <i style="display: inline-block;"> ...

  8. 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  9. Hibernate之关联关系(一对多)

    今日分享hibernate框架的简单关联关系 一:关联关系简介 1.1 什么是关联关系 关联指的是类之间的引用关系.如果类A与类B关联,那么被引用的类B将被定义为类A的属性. 例如: class B{ ...

  10. 解决使用绝对定位absolute后，margin：0 auto居中方法失效（转）

    https://blog.csdn.net/qq_40678503/article/details/82780680