JavaScipt选取文档元素的方法(推荐)


Posted in Javascript onAugust 05, 2016

摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选)

选取文档元素的方法:

1、通过ID选取元素(getElementById)

1)使用方法:document.getElementById("domId")
        其中,domId为要选取元素的id属性值

2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素。

2、通过名称name选取元素(getElementsByName)

1)使用方法:document.getElementsByName("domName")
        其中,domName为要选取元素的name属性值

2)说明:

a. 返回值是一个nodeList集合(区别于Array)

b. 和ID属性不一样,name属性只在少数DOM元素中有效(form表单、表单元素、iframe、img)。这是因为name属性是为了方便提交表单数据而打造的。            

c. 为form、img、iframe、applet、embed、object元素设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象

3)兼容性:IE中ID属性值匹配的元素也会一起返回

3、通过标签名选取元素(getElementsByTagName)

1)使用方法:document.getElementsByTagName("tagName")

其中,element是有效的DOM元素(包括document)
                 tagName是DOM元素的标签名

如:var aInput = document.getElementsByTagName("input");

 var aName = aInput[0];

 var pwd = aInput[1];

  var cfm = aInput[2];

2)说明:a. 返回值是一个nodeList集合(区别于Array)

b. 该方法只能选取调用该方法的元素的后代元素。

c. tagName不区分大小写

d. 当tagName为*时,表示选取所有元素(需遵从b.规则)

e. HTMLDocument会定义一些快捷属性来访问标签节点。如:document的images、forms、links属性指向<img>、<form>、<a>标签元素集合,而document.body和document.head总是指向body和head标签(当未显示声明head标签时,浏览器也会创建document.head属性)

4、通过CSS类选取元素(getElementsByClassName)

1)使用方法:element.getElementsByClassName("classNames")

其中,element是有效的DOM元素(包括document)

classNames是CSS类名称的组合(多个类名之间用空格,可以是多个空格隔开),

如element.getElementsByClassName("class2 class1")将选取elements后代元素中同时应用了class1和class2样式的元素(样式名称不区分先后顺序)

2)说明:

a. 返回值是一个nodeList集合(区别于Array)  

b. 该方法只能选取调用该方法的元素的后代元素。

3)兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法

5、通过CSS选择器选取元素

1)使用方法:document.querySelectorAll("selector")

其中,selector为合法的CSS选择器

2)说明:a. 返回值是一个nodeList集合(区别于Array)

3)兼容性:IE8及其以下版本的浏览器只支持CSS2标准的选择器语法

以上这篇JavaScipt选取文档元素的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 #Javascript
jQuery实现定位滚动条位置
Aug 05 #Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 #Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 #Javascript
JavaScript中的this引用(推荐)
Aug 05 #Javascript
JS实现HTML表格排序功能
Aug 05 #Javascript
JavaScript如何实现跨域请求
Aug 05 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Python定时器线程池原理详解
2020/02/26 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
社区矫正工作方案
2014/06/04 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
无工作证明怎么写
2015/06/15 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫