一、根据 id 获取元素

  语法格式:

document.getElementById(elementId); 通过标签的 id 属性查找标签 dom 对象, elementId 是标签的 id 属性值 

  Demo:

 var main = document.getElementById('main');
console.log(main); // 获取到的数据类型 HTMLDivElement,对象都是有类型的。

  注意:由于id名具有唯一性,部分浏览器支持直接使用id名访问元素,但不是标准方式,不推荐使用。如果页面上没有对应的 id,此时返回 null。

二、根据标签名获取元素

  语法格式:

doucument.getElementsByTagName(tagName);      通过标签名查找标签 dom 对象。 tagname 是标签名 

  Demo: 

 var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}

   注意

    因为一个文档里面可能有多个同名的标签,获取获取的是一个伪数组(集合),可以对其进行遍历。

    获取到的集合是动态集合,即往页面再次添加元素时,会自动更新集合内元素的个数。

三、根据 name 获取元素

  语法格式:

doucument.getElementsByName(elementName);   通过标签的 name 属性查找标签 dom 对象, elementName 标签的 name 属性值

  Demo:

 var inputs = document.getElementsByName('hobby');      // 获取的是一个伪数组
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}

  注意:此方法存储浏览器的兼容性,IE9+ 以后才支持。

四、根据类名获取元素

  语法格式:

document.getElementsByClassName(className);   通过标签的 class 属性查找 dom 对象

  Demo:

 var mains = document.getElementsByClassName('main');    // 获取的是一个伪数组
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}

五、根据选择器获取元素

  1、querySelector()

    语法格式:

querySelector(选择器名);

    注意:使用该方法只会返回第一个匹配的元素。

  Demo:

 var element = document.querySelectorAll('.a');
console.log(element)

  2、querySelectorAll()

    语法格式:

querySelectorAll(选择器名);

    注意:使用此方法可以返回所有匹配到的元素

   Demo:

 var elements = document.querySelectorAll('.a');
consoloe.log(elements);

  注意:这两个方法都是根据选择器来获取元素,存在浏览器兼容问题,IE8 以后才执行

JavaScript 获取页面元素的更多相关文章

  1. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  2. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  3. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  4. Javascript获取页面元素相对和绝对位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  5. JavaScript获取页面元素方法

  6. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  7. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  8. 用getBoundingClientRect()来获取页面元素的位置

    以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0;do{_x += el.offsetLeft;_y ...

  9. js中获取页面元素节点的几种方式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Java中HTTP网络传输中文编码问题

    Java中HTTP网络传输中文编码问题 1.java中new String(str.getBytes("utf-8"),"iso-8859-1")编码详解 前提 ...

  2. Native Clojure with GraalVM

    转自:https://www.innoq.com/en/blog/native-clojure-and-graalvm/ GraalVM is a fascinating piece of techn ...

  3. 使用webpack.optimize.CommonsChunkPlugin提供公共代码

    在webpack4里使用webpack.optimize.CommonsChunkPlugin时,报错,webpack4删除了常用的 CommonsChunkPlugin ,提示我们用config.o ...

  4. 第9课 C++异常处理机制

    一. 回顾C++异常机制 (一)概述 1. 异常处理是C++的一项语言机制,用于在程序中处理异常事件(也被称为导常对象). 2. 异常事件发生时,使用throw关键字抛出异常表达,抛出点称为异常出现点 ...

  5. SQL告警

    SQL很有必要   MySQL性能 最大数据量 最大并发数 查询耗时0.5秒 实施原则 数据表设计 数据类型 避免空值 text类型 索引优化 索引分类 优化原则 SQL优化 分批处理 不做列运算 避 ...

  6. ReentrantReadWriteLock源码

    @SuppressWarnings("restriction") public class ReentrantReadWriteLock1 implements ReadWrite ...

  7. TreeMap源码分析1

    二叉树他们都需要满足一个基本性质--即树中的任何节点的值大于它的左子节点,且小于它的右子节点.按照这个基本性质使得树的检索效率大大提高.我们知道在生成二叉树的过程是非常容易失衡的,最坏的情况就是一边倒 ...

  8. Rancher 构建 CI/CD 自动化流程 - 动态配置 Jenkins-slave(二)

    一.说明 1.1 说明 前面介绍采用 Jenkinsfile + KubernetesPod.yaml 方式进行部署项目(Rancher 构建 CI/CD 自动化流程 - 动态配置 Jenkins-s ...

  9. [转帖]centos7 使用kubeadm 快速部署 kubernetes 国内源

    centos7 使用kubeadm 快速部署 kubernetes 国内源 https://www.cnblogs.com/qingfeng2010/p/10540832.html 前言 搭建kube ...

  10. FusionInsight大数据开发---Spark应用开发

    Spark应用开发 要求: 了解Spark基本原理 搭建Spark开发环境 开发Spark应用程序 调试运行Spark应用程序 YARN资源调度,可以和Hadoop集群无缝对接 Spark适用场景大多 ...