JavaScript, DOM查找元素
1.document.getElementById("id");
=> IE8 及较低版本不区分ID的大小写
=> IE7及较低版本中表单元素的name特性和ID都会被该方法返回
2.document.getElementsByTagName("Tag");
=> 为了最大限度的兼容既有的HTML页面,该方法不区分大小写
=> 但在XML和XHTML中区分大小写
3.document.getElementsByName("name");
=> 用于获取带有name属性的表单元素(多用于获取单选按钮(radio)选中的值)
4.document.getElementsByClassName("class");
=> IE8及更低版本不支持该方法
function getByClass(oParent, sClass){
var aEle = oParent.getElementsByTagName('*');
var result = [];
//var re = '/\\b'+sClass+'\\b/i';
///\bbox\b/i /\bbox\b/i
var re = new RegExp('\\b'+sClass+'\\b','i');
for( i=0;i<aEle.length;i++){
//if(aEle[i].className == sClass)
//if(aEle[i].className.search(re))
if(re.test(aEle[i].className))
{
result.push(aEle[i]);
}
}
return result;
}
5.document.querySelector("#id/.class/tag")和document.querySelectorAll()
=> IE7及较低版本不支持
=> 获取的元素为静态nodeList
6.classList属性(obj.classList.add()/obj.classList.remove()/obj.classList.toggle())
=> IE9及较低版本不支持该属性
function removeClass(obj, name) {
var classNames = obj.className.split(/\s/);
var len = classNames.length;
for(var i=0; i<len; i++){
if(name === classNames[i]){
classNames.splice(i, 1);
break;
}
}
obj.className = classNames.join(" ");
}
JavaScript, DOM查找元素的更多相关文章
- JavaScript Dom 查找
JavaScript Dom 查找 一.直接查找 获取单个元素 document.getElementById('i1') 获取多个元素(列表数组) document.getElementsByTag ...
- DOM查找元素
1. 查找元素5种: 1. 按id查找1个元素对象: var elem=document.getElementById("id值"); 何时使用:1. 元素必须有id 2. 精确查 ...
- DOM查找元素的方法总结
按HTML查找:优点:范围可大可小,可设置条件:包括五种方式:1.按id查找:2.按标签名查找:var elems = parent.getElementsByTagName('');3.按name属 ...
- Python 15 html 基础 - CSS &javascript &DOM
本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- JavaScript获取HTML DOM节点元素详解(转)
在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- JavaScript DOM实战:创建和克隆元素
DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的J ...
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
随机推荐
- 第四百节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装python3.5.1
第四百节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装python3.5.1 1.检查系统是否安装了python [root@192 ~]# rpm -qa ...
- QTableView 二次整理
一.设置可视化的组件 参考: http://www.cnblogs.com/ribavnu/p/4810412.html 二.常用基本属性 http://www.cnblogs.com/ribavnu ...
- duilib进阶教程 -- TreeView控件(6)
代码下载:http://download.csdn.net/detail/qq316293804/6483905 上一个教程中,界面已经和迅雷一模一样啦,大小和位置一个像素都不差哟,亏得Alberl调 ...
- [Python] 07 - Statements --> Functions
故事背景 一.阶级关系 1. Programs are composed of modules.2. Modules contain statements.3. Statements contain ...
- [AWS] Deploy react project on EC2
如何在aws部署项目 申请到亚马逊AWS免费账户后,我们可以拥有很多的免费云服务产品项目,其中包括: EC2云服务器. Amazon S3存储. Amazon RDS数据库. Amazon Cloud ...
- TP5分页类
<?php class Page { public $page; //当前页 public $total; //总记录数 public $listRows; //每页显示记录数 private ...
- 8 -- 深入使用Spring -- 5...2 使用@Cacheable执行缓存
8.5.2 使用@Cacheable执行缓存 @Cacheable可用于修饰类或修饰方法,当使用@Cacheable修饰类时,用于告诉Spring在类级别上进行缓存 ------ 程序调用该类的实例的 ...
- Android Studio设置代理,解决检查更新gradle信息的问题
Android Studio是基于JetBrains公司的IDEA开发的,Android Studio里的项目都是由Gradle构建的,Gradle集合了Ant和Maven的优点,又解决了他们的缺点, ...
- 使用原生Java代码生成可执行Jar包
最近想做一个功能,就是把我们编译后的字节码及其资源文件打包成一个可执行的jar包,在装有jre的机器上双击就能运行. 首先是我们需要选择哪些字节码和文件需要打包到文件中,这个我们用JFileChoos ...
- C - Monthly Expense
Farmer John is an astounding accounting wizard and has realized he might run out of money to run the ...