深入理解javascript选择器API——4种元素选择器

×

目录

[1]id属性 [2]标签名 [3]name属性[4]all

前面的话

  说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了。DOM定义了许多方式来选取元素,包括getElementById()、getElementsByTagName()、getElementsByName()和document.all()4种。接下来,将对这4种方法进行详细介绍

getElementById()

  任何HTML元素可以有一个id属性,在文档中该值必须唯一

  [注意]若浏览器中出现多个id名的情况,CSS样式对所有该id名的元素都生效,但js脚本仅对第一个出现该id名的元素生效

  getElementById()该方法接收一个参数:要取得元素的ID,若找到则返回该元素,若不存在则返回null

<div id="myDiv"></div>
<script>
var div1 = document.getElementById(‘myDiv‘);
var div2 = document.getElementById(‘mydiv‘);
console.log(div1);//<div id="myDiv"></div>
console.log(div2);//null
</script>

  关于getElementById()方法,IE7-浏览器有两个bug

  【1】该方法对匹配元素的ID不区分大小写

<div id="myDiv" style="height:20px;"></div>
<script>
var div1 = document.getElementById(‘mydiv‘);
//在标准浏览器下报错,但在IE7-浏览器下,id为‘myDiv‘的元素的背景颜色变为品红色
div1.style.backgroundColor = ‘pink‘;
</script>

  【2】表单元素的name属性也会被当作ID属性识别出来。因此为了避免这种问题,最好不让表单元素的name属性和其他元素的ID属性相同

<button name="test">0</button>
<script>
var myDiv = document.getElementById(‘test‘);
//在标准浏览器下报错,但在IE7-浏览器中会输出0
console.log(myDiv.innerHTML);
</script>

  [注意]如果在HTML文档中元素中存在某id属性,并且如果Window对象没有此名字的属性, Window对象会赋予一个属性,它的名字是id属性的值,而它们的值指向表示文档元素的 HTMLElement对象,因此,元素ID隐式地成为了全局变量,与getElementById(id)方法的效果相同

<div id="test"></div>
<button id="btn">按钮一</button>
<button id="location">按钮二</button>
<script>
var oBtn = document.getElementById(‘btn‘);
var oDiv = document.getElementById(‘test‘);
oBtn.onclick = function(){
    //通过getElementById()方法获取id为test的对象
    oDiv.style.height=‘10px‘;
    //通过id属性获取相同的对象
    test.style.backgroundColor =‘pink‘;
}
//由于location本身就是window对象下的属性,已经被占用,所以无法表示id=location的元素
location.onclick = function(){
    alert(2);
}
</script>

  在IE浏览器中,HTML某些元素如果有name属性,也与id属性相同,隐式地成为全局变量,包括:

<a> <embed> <form> <iframe> <img> <object>

  id是唯一的,但name属性并不是唯一的。具有该名称的隐式全局变量会引用一个类数组对象,包括所有该命名的元素

<a href="#" name="test">a元素1</a>
<a href="#" name="test">a元素2</a>
<div id="test">div元素</div>
<script>
//IE浏览器中,两个a元素和一个div元素字体都变成红色
for(var i = 0; i < test.length; i++){
    test[i].style.color = ‘red‘;
}
</script>

getElementsByTagName()

  getElementsByTagName()方法接收一个参数,即要取得元素的标签名,而返回的是包含0或多个元素的类数组对象NodeList。可以使用方括号语法或item()方法来访问类数组对象中的项,length属性表示对象中元素的数量

<div>元素一</div>
<div>元素二</div>
<script>
var divs = document.getElementsByTagName(‘div‘);
divs[0].style.color = ‘red‘;
divs.item(1).style.backgroundColor = ‘pink‘;
</script>

  [注意]通过getElementsByTagName()方法取得的类数组对象有一个namedItem()方法,可以通过元素的name属性取得集合中的第一个值。safari和IE不支持该方法

<div>元素一</div>
<div name=‘test‘>元素二</div>
<div name=‘test‘>元素三</div>
<script>
var divs = document.getElementsByTagName(‘div‘);
divs.namedItem(‘test‘).style.color = ‘red‘;
</script>

  getElementsByTagName()方法可以用于document对象,也可以用于element元素对象,用于调用该方法的元素的后代元素

<ul id=‘myUl‘>
    <li>1</li>
    <li>2</li>
</ul>
<script>
var oUl = document.getElementById(‘myUl‘);
var lis = oUl.getElementsByTagName(‘li‘);
lis[0].style.color = ‘red‘;
</script>

getElementsByName()

  getElementsByName()方法会返回带有给定name特性的所有元素

<button name=‘test‘>按钮一</button>
<button name=‘test‘>按钮二</button>
<script>
var button = document.getElementsByName(‘test‘);
button[0].style.color = ‘red‘;
</script>

  关于getElementsByName()方法,IE浏览器与其他浏览器相比,有三个不同之处

  【1】IE9-浏览器只支持在表单元素上使用getElementsByName()方法

<div name=‘test‘>元素一</div>
<div name=‘test‘>元素二</div>
<script>
//标准浏览器下,元素一颜色变为红色,但在IE9-浏览器下会报错
var divs = document.getElementsByName(‘test‘);
divs[0].style.color = ‘red‘;
</script>

  【2】IE9-浏览器中使用getElementsByName()方法也会返回id属性匹配的元素。因此,不要将name和id属性设置为相同的值

<button name=‘test‘>按钮一</button>
<button name=‘test‘>按钮二</button>
<button id="test">按钮三</button>
<script>
//标准浏览器下,按钮三不变色,但IE9-浏览器下,按键三也变成红色
var buttons = document.getElementsByName(‘test‘);
for(var i = 0; i < buttons.length; i++){
    buttons[i].style.color = ‘red‘;
}
</script>

  【3】如果对getElementsByName()方法取得的类数组对象使用namedItem()方法,因为每一项的name属性都相同,所以只会返回第一项

  [注意]只有IE8-IE11浏览器支持

<button name=‘test‘>按钮一</button>
<button name=‘test‘>按钮二</button>
<script>
var buttons = document.getElementsByName(‘test‘);
buttons.namedItem(‘test‘).style.color = ‘red‘;
</script>

document.all()

  在DOM标准化之前,IE4就引入了document.all[]集合来表示所有文档中的元素

<div>div</div>
<button>按钮</button>
<script>
console.log(document.all);//[html, head, meta, title, body, div, button, script]
//标准浏览器返回8,而IE8-浏览器返回9,由于它把文档声明<!DOCTYPE html>识别为注释,且把注释识别为元素,所以多1个
console.log(document.all.length);
</script>

  现在document.all方法已经弃用,要取得类似效果,可以使用document.getElementsByTagName(‘*‘)方法,*表示匹配所有元素

<div>div</div>
<button>按钮</button>
<script>
console.log(document.getElementsByTagName(‘*‘));//[html, head, meta, title, body, div, button, script]
//标准浏览器返回8,而IE8-浏览器返回9,由于它把文档声明<!DOCTYPE html>识别为注释,且把注释识别为元素,所以多1个
console.log(document.getElementsByTagName(‘*‘).length);
</script>

最后

  getElementsByName()方法并不常用,再加上已经废弃的document.all()。实际上,常用的获取元素的方法就getElementById()和getElementsByTagName()两种。getElementsByClassName()不也是吗?确实是,但它和querySelector()等方法都是HTML5扩充的新方法,兼容性不是很好,这些新方法将在续篇进行详细介绍

  欢迎交流

时间: 2024-10-14 20:48:06

深入理解javascript选择器API——4种元素选择器的相关文章

19 01 11 javascript 获取某一种元素(所有的标签) 以及字符串处理的方法

获取元素方法二 可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素. 注意 拿出来的是一个数组   所以不能直接进行操作 <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); // aLi

深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的jQuery>一书中,nth-of-type()选择器参照CSS中的nth-of-type选择器,于1.9版本新增,本文将详细介绍该内容 通用形式 :nth-of-type() 个人认为,:nth-of-type()选择器不应该归类于子元素选择器,也不完全等同索引选择器,因为其索引是指特定元素的索引,但

后代选择器和子元素选择器的区别

原文 简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选择器的相关概念 1.1.后代选择器 后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用. h1 em {color:red;} 1.2.子

CSS 组合选择符:后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器

CSS 组合选择符 CSS 组合选择符 在 CSS3 中包含了四种组合方式:CSS组合选择符包括各种简单选择符的组合方式. 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选择器 后代选择器用于选取某元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 divp{background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Child sel

Selenium IDE CSS元素选择器

点击链接加入群[悦分享测试联盟]:https://jq.qq.com/?_wv=1027&k=5FiMKHH Css选择器 通过节点属性查找 .class                 选择 class="intro"的所有元素. #id                     选择 id="firstname"的所有元素. *                         选择所有元素. 通过节点关系查找 element element        

css选择器(1)——元素选择器、类名和id选择器

css的主要优点之一就是它能很容易地向所有同类型的元素应用一组样式.当然它是通过选择器来实现这一点的. 基本规则结构: 语法= 选择器 +声明块 1.元素选择器--直接使用html元素名,指向文档元素 如果想给所有段落都添加缩进的话使用元素选择器是最好的选择 p{ text-indent:2em; } 2.类选择器和id选择器--独立于文档元素来指定样式 a)类选择器: 给部分段落文本加粗,以及列表的某些项,这时可以使用类选择器来应用样式而不需要像使用元素选择器一样考虑具体涉及的元素,只要事先给

web前端入门到实战:相邻兄弟选择器(+)、子选择器(&gt;)、兄弟选择器(~)等用法

前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(>).兄弟选择器(~).first-child.:last-child.:nth-child().:nth-last-child()的用法. 相邻兄弟选择器(+) 相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素.注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符.器. <!

Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的元素代码如下: $("#objid",document.frames('iframename').document) 显示iframe中body元素的内容. $(document.getElementById('iframeId').contentWindow.document.body)

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以