javascript总结39: 元素获取的常见问题
1 定义id属性的元素,不获取直接使用
由于id名具有唯一性,部分浏览器支持直接使用id名访问元素,但不是标准方式,生产环境下不推荐使用。
2 元素是对象
获取到的元素是DOM对象 ,DOM对象也有数据类型之分
//html
<div id="box"></div> var box = document.getElementById('box');
console.dir(box); //HTMLDivElement --> 这是div元素在DOM中的对象类型
3 获取页面元素的其他方式
1 根据name属性获取元素 (有兼容问题,不同的浏览器实现不同)
语法: document.getElementsByName('name属性的值')
作用: 在整个文档中查找所有name属性值为传入的值的元素,将这些所有符合条件元素的存放到一个伪数组中返回出来,如果没有就返回一个空的伪数组
//html
<div class="main"></div> //js
var mains = document.getElementsByClassName('main');
//返回一个伪数组
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
2 根据类名获取元素 (有兼容问题,ie9+支持)
语法: document.querySelector('选择器');
作用: 在整个文档中查找所有符合选择器值的元素,但是只返回其中的第一个元素,如果没有返回null
注意: 如果想要所有符合选择器值的元素,请使用 querySelectorAll方法
querySelectorAll返回的是一个伪数组,如果没有则返回空的伪数组
//html
<div class="element">div1</div>
<div class="element">div2</div>
<div class="element">div3</div> //js
//在整个文档中,查找类名为element的元素,
var div = document.querySelector('.element');
console.log(div); //返回的是所有符合条件中的第一个 var divs = document.querySelectorAll('.element');
//返回的是一个伪数组, 伪数组中存储了所有符合条件的元素
for (var i = 0; i < divs.length; i++) {
var box = divs[i];
console.log(box);
}
4 DOM中元素可以使用的获取元素的方法
element.getElementsByTagName('标签名') element.getElementsByClassName('类名') element.querySelector('选择器') element.querySelectorAll('选择器') //以上这些方法也可以使用获取到的DOM对象调用
//使用document调用这些方法是在整个页面中查找
//使用获取到的DOM对象调用这些方法,是在当前DOM对象的里面查找 //html
<div>中国</div>
<div id="center">
北京
<div>昌平</div>
<div>海淀</div>
</div> //js
var center = document.getElementById('center');
var divs = center.getElementsTagName('div');
console.log(divs); //返回的伪数组中只有昌平和海淀
javascript总结39: 元素获取的常见问题的更多相关文章
- javascript相邻节点元素获取
<script> window.onload = function () { var myLinkItem = document.getElementById('linkItem'); v ...
- javascript总结34 :DOM之节点元素获取
常用节点元素获取: 1. 获取 html -- > document.documentElement 2. 获取 body -- > document.body 3. 获取指定的元素 -- ...
- 用javascript实现html元素的增删查改[xyytit]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript 读取修改元素 及 伸拉门案例
JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- 获取元素的xpath, 转换xpath为csspath进行jQuery元素获取
获取元素的xpath, 转换xpath为csspath进行jQuery元素获取 博客分类: 编程心得 jQueryCSSHTML var $shadow = new Object(); /** 获取 ...
- JQuery元素获取
前言:这是本类别博文JQuery即用即查开篇. 因为查手册太麻烦,而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么. 写这几篇文章就是为了,工作遇到问题时,一看这几篇文章就可以查到哪个 ...
- JavaScript经典代码【一】【javascript HTML控件获取值】
javascript HTML控件获取值 1.下拉列表框选定值 ddlPageSize.options[ddlPageSize.selectedIndex].value ddlPageSize.opt ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
随机推荐
- Java中UTC时间转换
import java.text.SimpleDateFormat; import java.util.Date; import java util.Calendar; public class Te ...
- HTTP代理访问
http请求 http://192.168.19.106:8090/pim/mcloud/device/exist.action 代理ip及端口 120.197.233.205 80 wire ...
- kali2.0安装及使用笔记(附带vim配置,长期更新)
作者:陈栋权 时间:16/08/19 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明, 且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 如有特别用途,请与我联系邮 ...
- EMMA 覆盖率工具
1. EMMA 介绍 EMMA 是一个开源.面向 Java 程序测试覆盖率收集和报告工具.它通过对编译后的 Java 字节码文件进行插装,在测试执行过程中收集覆盖率信息,并通过支持多种报表格式对覆盖率 ...
- 关于服务器raid的一个记录
今天下午,在装操作系统的时候,特意的测试了下raid1的性能. 1. 开启操作系统 直接正常开启操作系统,操作系统的硬盘做的是raid1,从而数据写俩份,从而在损坏一张盘之后,另外一张盘并不会收到影响 ...
- 一分钟学会 ConstraintLayout 之从属性角度理解布局
ConstraintLayout 在 Android 开发中,我们通常是手写布局,很少会用拖动来写布局,虽然 ConstraintLayout 在 I/O 上以拖动来展现了各种功能,我估计在以后开发中 ...
- leetcode849
public class Solution { public int MaxDistToClosest(int[] seats) { ; var len = seats.Length; ) { ; } ...
- Linux git 关联 github仓库
背景: 由于最近学习Spring cloud docker 一键部署, 需要把github仓库项目, 放在Linux上面启动, (以下位置在/root/目录中执行)步骤, 1:安装 git >y ...
- 深入理解Java线程池
我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因为频繁 ...
- easyui datagrid editor onBeforeEdit事件下使用getEditor和getEditors失效
我在使用onClickRow: function(rowIndex,rowData){ if(editRow!=-1){ ...