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对象,就可以 ...
随机推荐
- JavaScript高级用法三之浏览器对象
综述 本篇的主要内容来自慕课网,内置对象,主要内容如下 1 window对象 2 JavaScript 计时器 3 计时器setInterval() 4 取消计时器clearInterval() 5 ...
- [echarts] 同指标对比柱状图
需求:对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率 http://echarts.baidu.com/echarts2/doc/example/bar1.html option = ...
- Fedora Server 21下OpenJdk和Oracle Jdk共存
最新文章:Virson's Blog 参考文章:博客园-三维蚂蚁 Linux公社 1.首先需要下载对应平台的Jdk:Oracle 官网 2.使用yum或rpm命令安装Jdk: yum install ...
- centos7 网络配置
vi /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPR ...
- [Laravel] 12 - WEB API : cache implement
前言 Ref: https://www.imooc.com/video/2873 服务端如何为客户端(app)的首页提供数据接口, 本篇用此作为例子演示接口的实现. 单例模式 一.三大原则 单例实现 ...
- web.xml配置DispatcherServlet (***-servlert.xml)
1. org.springframework.web.servlet.DispatcherServlet 所在jar包: <dependency> <groupId>org.s ...
- ScrollView fillViewport
话不多说直接上图
- 【转】MYSQL-CLUSTER-7.5搭建数据库集群
阅读目录 前言 mysql cluster中的几个概念解释 架构图及说明 下载mysql cluster 安装mysql cluster之前 安装配置管理节点 安装配置数据和mysql节点 测试 启动 ...
- libuv示例代码
https://github.com/nikhilm/uvbook/tree/master/code
- 游标SQL Cursor 基本用法
http://www.cnblogs.com/Gavinzhao/archive/2010/07/14/1777644.html 1 table1结构如下 2 id int 3 name va ...