js-DOM中基础选择器的整理
DOM中基础选择器的整理
注意:DOM中选择器返回是数组类型的都是伪数组,只能拥有数组的索引以及length,数组的其他方法是不可以使用的!
一:DOM中的选择器
1.getElementById(id) //获取指定元素的ID元素
2.getElementsByTagName() //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组
3.getElementsByName() //通过name值获取元素,返回值是数组,通常用来获取有name的input的值
4.getElementsByClassName() //通过class名获取元素,返回值(HTML集合)是数组n
tip:这是四个基础的选择器,后面在其基础上在拓展
二:ES5选择器:就两个,但功能强大(都是对象的方法)
注意:兼容性自行测试
1:document.querySelector(); //可以获取所有类型的选择器,但是只能获取一个,返回的值是单个元素
拓展:querySelector返回dom的子元素中第一个符合selectors选择器字符串的元素,无匹配项则返回null,在获取时, 可以直接在括号内使用css选择器的样式,比如:obox = document.querySelector("#box>h2");
2:document.quertSelectorAll(); //可以获取所有类型的选择器,返回的是伪数组
拓展:和上面一样,不同的是它返回的是匹配的所有元素列表,是一个nodeList集合,而且是non-live的(理解为不会实时更新)
这个获取是比较重要的,需要深入理解一下。
console.log( document.querySelectorAll('#contani div') )
用querySelectorAll去获取后代的后代选择器,返回时多少,类似于('div div div')
注意:关于querySelectorAll另外要注意的一点是:当且仅当querySelectorAll的选择器字符串是‘div div’时(如:dom.querySelectorAll(‘div div’)),它匹配的元素包括了dom,也就是说如果该dom元素和它的子元素构成了div div这种父子结构时,该dom也会被匹配到。
eg:dom.querySelectorAll(div div div);
dom.querySelector(contani).querySelectorAll(div div);
//当构成了div div父子结构,前者的div认为是匹配到了dom元素,此时的dom.querySelector(contani).querySelectorAll(div div);
等同于dom.querySelector(contani).querySelectorAll(div);都是选择contani的后代div元素
补充:non-live(不是实时更新),关于getElementsTagName();与dom.querySelectorAll();
在获取基础选择中选择器,有个getElementsTagName();获取标签(元素)选择器,这个标签选择器获得节点集合(列表)是实时更新得到,
dom.querySelectorAll();不是实时更新的;下面测试一下,当插入了一个新的节点后,获取到的原选择器否会更新;
从上面的测试中可以看出,当追加了新的节点的时候,querySelector();获取的节点集合并没有刷新,而getElementsTagName();获取的html集合是刷新的
有人会问,明明用的是className()测试的,跟tagName()有什么关系呢?因为如果直接用tagName是没有办法直接获取到box里面的div的,这时候委婉的用className来测试一下,可以得出同样的效果,读者也可以自行测试一下。
补充两点:这两个都是dom的属性,不是方法
根据父级,选择子级:
oDiv.children; //返回一个伪数组
根据子级,选择父级:
oSpan.parentNode; //返回一个元素
js-DOM中基础选择器的整理的更多相关文章
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
- jquery.js 库中的 选择器
<html><head><script type="text/javascript" src="jquery.js">< ...
- 3.jquery在js文件中获取选择器对象
一.常用的选择器有一下几种: 1.标签选择器 2.类选择器 3.id选择器 4.并集选择器 5.层级选择器 二.如何获取选择器对象: <!DOCTYPE html> <html la ...
- js DOM Element属性和方法整理
节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. childNodes获取到的是NodeLi ...
- js DOM之基础详解
DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.删除和修改页面的某一部分. HTML DOM 树形结构如下: 1.Node方面 1.1 节点类 ...
- JS DOM中Ajax的使用
一.概念 全称:Asynchronors Javascript XML 异步JS数据交换格式. [Asynchronous]:异步的,即在执⾏ AJAX 请求时不会阻塞后⾯代码的运⾏.[JavaSc ...
- JS DOM中getElement系列和querySelector系列获取节点
节点查找方法 document.getElementById() 前面必须是document document.getElementsByName() 前面必须是document ele.getEl ...
- JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结
JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode 父节点 childNodes ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
随机推荐
- java.util.LinkedHashMap cannot be cast to
Jackson转换泛型List出现错误java.util.LinkedHashMap cannot be cast to com.xxx ObjectMapper mapper = new Objec ...
- mui.storage 将数据持久化到本地
在一个用mui做得app中,要求把历史记录放在本地(感觉...无法言喻的sd),但最终还是做了,以下来记录本次的学习到的内容 mui.plusReady(function() { //这里是一开始定义 ...
- c语言进阶8-数据结构
一. 数据结构的起源: 1. 为什么要学习数据结构 阿基米德说过:“给我一个支点,我就能翘起地球”.那么给我一个程序,我就能用好程序,给我一个结构,我就能把内容填充完成.打个比方,一个 ...
- hmm隐马尔可夫真的那么难吗?
hmm隐马尔可夫真的那么难吗? 首先上代码 这里是github上的关于hmm的:链接 概率计算问题:前向-后向算法 学习问题:Baum-Welch算法(状态未知) 预测问题:Viterbi算法 htt ...
- html+css test1
模拟实验楼提供的一个网页.. [可由 git clone https://github.com/shiyanlou/finaltest 获取相关图片素材] <!DOCTYPE html>& ...
- Atom实用插件
下载atom狠戳本链接 中文简体插件(工具栏,右键菜单,设置菜单) simplified-chinese-menu 代码格式化插件(支持多种语言) atom-beautify 智能补全资源路径插件 a ...
- Android Studio电脑不支持HAXM的解决办法
Intel HAXM is required to run this AVD. Your CPU does not support required features (VT-x or SVM). U ...
- Java编程思想,初学者推荐看看
这是一本介绍Java编程思想,如何从面向过程的编程思想转换为面向对象的编程思想.我个人是比较建议新手看一下的,思想掌握了,学起来自然也就会方便很多的,我还有一些Java基础的数,有需要的可以找我要,都 ...
- web设计_3_可伸缩的导航栏
1. HTML5构建一个选项卡,需要<nav>标签包围一个无序列表,也可以添加role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色. 绝对不要基于图片的导航,对搜索引擎不友好,更新 ...
- three出现状态200的报错
报错代码如下: {status: 200, data: {…}} "sa_SpringUserFindOneView_findPbUserByUserId"header.vue?1 ...