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对象,就可以 ...
随机推荐
- react列表数据显示
react的列表数据一般是用map循环显示的. 使用map注意:map的回调函数为箭头函数时,后面如果加大括号(箭头函数常规编写),必须要有return才可以,如果箭头函数后面没有大括号(箭头函数简写 ...
- NUC972 linux 烧录
节介绍如何刻录uboot.kernel和文件系统到NAND Flash, 并且设定NUC970系列芯片从NAND Flash中开机.本节操作需要windows环境下进行.(初次连接电脑需要安装驱动) ...
- ng4.0 使用[innerHTML]动态插入的富文本如何设置样式
方法一:在css中设置样式 for CSS added to the component :host ::ng-deep mySelector { background-color: blue; } ...
- 【netcore基础】MVC API全局异常捕捉中间件ExceptionHandlerMiddleWare
项目中想通过统一的接口格式返回异常信息,而不是404 500等HTTP协议层的异常响应 例如 { , , "message":"用户名或密码不正确", &quo ...
- 转载->CPU的内部架构和工作原理
CPU的内部架构和工作原理 本片博客转自:http://www.cnblogs.com/onepixel/p/8724526.html 感谢博主分享! 内部架构 CPU 的根本任务就是执行指令,对计 ...
- IntelliJ IDEA连接TFS local workspace无法正常签入
前几天为了便于在本地修改,将TFS workspace的类型从Server修改为Local.基于Visual Studio的开发正常没有问题,用IntelliJ IDEA时却提示以下错误: Error ...
- 使用sts(SpringToolSuite4)无法将项目部署到tomcat容器
一般情况下maven项目不能添加到tomcat容器中 ,需要在项目上进行设置 但是sts没有安装此插件,可以改用eclipse进行开发.
- nginx+tomcat 下POST响应参数过大无法显示完整及文件下载服务遇到过大文件无法下载解决办法
在nginx里location里面设置 proxy_buffering off; 或者 proxy_buffering on; proxy_buffers 4 4k; proxy_busy_buffe ...
- centos linux7的一些操作
进入centos7的一些界面后,按ctrl+alt+F2,则可进入全shell界面,不过要登录root的密码: 从全shell转为gnome 界面窗口,按alt+F1: *************** ...
- Flask web开发之路一
之前学过一段时间的flask,感觉还是挺好用的,自己的专利挖掘项目也想这个web框架来搭建,于是重新开始基础学习 环境:win10,python3.6,pycharm2017,虚拟环境virtuale ...