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对象,就可以 ...
随机推荐
- jQuery图片播放插件prettyPhoto使用介绍
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果 使用方法 Query ...
- TI开发环境下载资源
CCSV7.0 版本下载 http://processors.wiki.ti.com/index.php/Download_CCS IAR7.10 版本下载 https://www.iar.com/ ...
- circRNA 中的ALU 重复元件
circRNA 最初研究的很少,只有很小一部分基因有检测到circRNA, 当时都认为是剪切错误形成的,对于其功能也没人去研究:学者对人类的成纤维细胞进行转录组测序,构建去核糖体文库, 同时采用了RN ...
- react报错this.setState is not a function
当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this. 我这里犯的错误的是虽然我在constructor中绑定了this,但是语法写的不正确. 错误示范: co ...
- python 带正则的search 模块
glob 是python 提供的一个支持正则表达式的查找文件的模块. 实现上采用了os.listdir() 和 fnmatch.fnmatch(). 但是没有真的invoking a subshe ...
- [Stats385] Lecture 01-02, warm up with some questions
Theories of Deep Learning 借该课程,进入战略要地的局部战斗中,采用红色字体表示值得深究的概念,以及想起的一些需要注意的地方. Lecture 01 Lecture01: De ...
- [UI] 04 - Bootstrap: layout & navigation
前言 一.资源 From: http://www.imooc.com/code/2881 Ref: http://www.runoob.com/try/bootstrap/layoutit/[拖拽布局 ...
- Mac下利用Cordova打包 iOS App以及出现的问题
安装 cordova sudo npm install cordova 创建项目 创建一个demo文件夹,里面自动加载基本的文件以及目录 cordova create demo com.test.de ...
- mysql常用语句和函数
mysql语句如果长期不写,就会忘掉,所以要时常复习,温故而知新. 1.select length("中国人"),select char_length("中国人" ...
- Easy Way to Get All Dependent Library Names 快速获得所有依赖库名称
在编译一些大型SDK的时候,比如Qt,OpenCV, PCL, VTK, ITK等等,在VS中,我们需要将编译生成的.lib文件加入Linker->Input中,但是往往生成的.lib文件有很多 ...