老生常谈jacascript DOM节点获取


Posted in Javascript onApril 17, 2017

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

getElementById()

obj.getElementById(id) 该方法接收一个参数(该元素的id),若找到则返回该元素对象,若不存在则返回null;

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

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

getElementsByTagName()

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

getElementsByName()

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

IE9及以下浏览器只支持在表单元素上使用 getElementsByName() 方法;

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

getElementsByClassName()

HTML5 新增了 getElementsByClassName() 方法;

在 javascript 中 class 是保留字,所以使用 className 属性来保存 HTML 的 class 属性值;

obj.getElementsByClassName(classaName) 方法接收一个参数,是包含一个或多个类名的字符串,返回带有指定类的所有元素的类数组对象 HTMLCollection。传入多个类名时,类名的先后顺序不重要。与 getElementsByTagName() 类似,该方法既可以用于 HTML 文档对象 document,也可以用于 element 元素对象;

IE8及以下浏览器不支持 getElementsByClassName();

在操作 class 类名时,需要通过 className 属性添加、删除和替换类名。因为 className 是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值。要从 className 字符串中删除一个类名,需要把类名拆开,删除不想要的那个,再重新拼成一个新字符串;

classList

HTML5 为所有元素添加了 classList 属性,这个 classList 属性是新集合类型 DOMTokenList 的实例,它有一个表示自己包含多少元素的 length 属性,而要取得每个元素可以使用 item() 方法,也可以使用方括号法;

IE9及以下浏览器不支持 classList 属性;

classList 还有以下4个方法,我们主要用这些方法操作类名,有了 classList 属性,className属性基本没有什么用武之地了:

obj.classList.add(value); 将给定的字符串值添加到列表中,没有返回值,如果值已存在,则不添加;

obj.classList.contains(value); 表示列表中是否存在给定的值,如果存在则返回true,否则返回false;

obj.classList.remove(value); 从列表中删除给定的字符串,没有返回值;

obj.classList.toggle(value); 如果列表中已经存在给定的值,删除它并返回false;如果列表中没有给定的值,添加它并且返回true;

<div class="test abc"></div>
  <script>
   var oTest = document.getElementsByClassName('test')[0];
   var oTestAbc = document.getElementsByClassName('test abc')[0];
   var oAbc = document.getElementsByClassName('abc')[0];
   console.log(oTest === oTestAbc);//true
   console.log(oAbc === oTestAbc);//true
   console.log(oAbc === oTest);//true
   
   console.log(oTest.classList);//["test", "abc", value: "test abc"] 
   console.log(oTest.classList[0]);//"test" 
   console.log(typeof oTest.classList[0]);//"string" 
   console.log(oTest.classList.item(0));//"test" 
   
   //add()将给定的字符串值添加到列表中,没有返回值,如果值已存在,则不添加;
   oTest.classList.add('def');
   console.log(oTest.classList);//["test", "abc", "def", value: "test abc def"] 
   
   //contains()表示列表中是否存在给定的值,如果存在则返回true,否则返回false;
   console.log(oTest.classList.contains('def'));//true
   console.log(oTest.classList.contains('abcde'));//false
   
   //remove()从列表中删除给定的字符串,没有返回值;
   oTest.classList.remove('abc');
   console.log(oTest.classList);//["test", "def", value: "test def"]
   
   //toggle()如果列表中已经存在给定的值,删除它并返回false;如果列表中没有给定的值,添加它并且返回true;
   console.log(oTest.classList.toggle('hello'));//true
   console.log(oTest.classList);//["test", "def", "hello", value: "test def hello"]
   console.log(oTest.classList.toggle('test'));//false
   console.log(oTest.classList);//["def", "hello", value: "def hello"]
  </script>

选择器API

HTML5 拓展了 querySelector()、querySelectorAll() 和 matchesSelector() 这3种方法,通过 CSS选择器 查询DOM文档取得元素的引用的功能变成了原生的API,解析和树查询操作在浏览器内部通过编译后的代码来完成,极大地改善了性能。

obj.querySelector(selector) 方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。该方法既可用于文档 document 类型,也可用于元素element 类型。IE7及以下不支持。

obj.querySelectorAll(selector) 接收一个CSS选择符,返回一个类数组对象,如果没有匹配元素,返回空的类数组对象,而不是null;IE7及以下不支持;

obj.matchesSelector(selector) 方法接收一个CSS选择符参数,如果调用元素与该选择符相匹配,返回true;否则返回false;

obj.matchesSelector(selector) 有兼容性问题,IE9+浏览器支持 msMatchesSelector() 方法,firefox 支持 mozMatchesSelector() 方法,safari 和 chrome 支持webkitMatchesSelector() 方法。

<div id="wrapper">
   <ul class="box">
    <li class="no1">第一行</li>
    <li class="no2">第二行</li>
    <li class="no3">第三行</li>
    <li class="no4">第四行</li>
    <li class="no5">第五行</li>
   </ul>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('#wrapper');
   var oUl = oWrapper.querySelector('ul');
   
   var oLiNo1 = oWrapper.querySelector('.no1');
   //obj.querySelector(selector) 方法接收一个CSS选择符,返回与该模式匹配的第一个元素,
   var oLiFirst = oWrapper.querySelector('li');
   var oFirstLi = oWrapper.querySelector('ul > li');
   console.log(oLiNo1 === oLiFirst);//true
   console.log(oLiNo1 === oFirstLi);//true
   console.log(oLiFirst === oFirstLi);//true
   console.log(oLiNo1.innerHTML , oLiFirst.innerHTML , oFirstLi.innerHTML);//第一行 第一行 第一行
   
   //obj.querySelectorAll(selector) 接收一个CSS选择符,返回一个类数组对象
   var oWrapperAll = document.querySelectorAll('#wrapper');
   console.log(oWrapperAll);//[div#wrapper]
   console.log(oWrapperAll[0] === oWrapper);//true
   
   var oWrapperArray = oWrapperAll[0];
   var oLiFirstAll = oWrapperArray.querySelectorAll('li');
   var oLiFirstArrayNo1 = oWrapperArray.querySelectorAll('li')[0];
   console.log(oLiFirstArrayNo1 === oLiNo1);//true
   console.log(oLiFirstAll[1].innerHTML);//第二行
   
//   console.log(oWrapperArray.matchesSelector('#wrapper'));
   //TypeError: oWrapperArray.matchesSelector is not a function
   
   console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true
   //obj.matchesSelector(selector) 有兼容性问题,
   //IE9+浏览器支持 msMatchesSelector() 方法,
   //firefox 支持 mozMatchesSelector() 方法,
   //safari 和 chrome 支持webkitMatchesSelector() 方法。
  </script>

选择器API使用时,需要注意的是:

querySelectorAll() 方法得到的类数组对象是非动态实时的,所以如果要计算长度等的实事值,最好重新获取;当然以前的 getElementById() 之类的就没这个毛病;

selector 类方法在元素上调用时,指定的选择器仍然在整个文档中进行匹配,然后过滤出结果集,以便它只包含指定元素的后代元素。这看起来是违反常规的,因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素;所以如果出现后代选择器,为了防止该问题,可以在参数中显式地添加当前元素的选择器;

<div id="wrapper">
   <ul class="box">
    <li class="no1">第一行</li>
    <li class="no2">第二行</li>
    <li class="no3">第三行</li>
    <li class="no4">第四行</li>
    <li class="no5">第五行</li>
   </ul>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('#wrapper');
   var oUl = oWrapper.querySelector('ul');
   
   var oLiLast = oUl.querySelector('li:last-of-type');
   var oLiAll = oUl.querySelectorAll('ul > li');
   console.log(oLiLast.innerHTML);//第五行
   console.log(oLiAll.length);//5
   
   var newLi = document.createElement('li');
   newLi.innerHTML = '新加的Li,放到最后面';
   oUl.appendChild(newLi);
   //querySelectorAll() 方法得到的类数组对象是非动态实时的;
   console.log(oLiLast.innerHTML);//第五行
   console.log(oLiAll.length);//5
   console.log(oUl.querySelector('li:last-of-type').innerHTML);//新加的Li,放到最后面
   console.log(oUl.querySelectorAll('ul > li').length);//6
  </script>
  
  
  
  <div class="wrapper">
   <div class="test1"></div>
   <div class="test2"></div>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('.wrapper');
   //selector 类方法在元素上调用时,指定的选择器仍然在整个文档中进行匹配,然后过滤出结果集,以便它只包含指定元素的后代元素。
   //这看起来是违反常规的,因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素
   console.log(oWrapper.querySelectorAll('div div'));//[div.test1, div.test2]
   //这句代码我的理解是获取oWrapper内部子孙元素中,div里嵌套的div,这里没有这种情况,所以应该弹出一个空数组
   
   //如果出现后代选择器,为了防止该问题,可以在参数中显式地添加当前元素的选择器
   console.log(oWrapper.querySelectorAll('.wrapper div div'));//[]
   console.log(oWrapper.querySelectorAll('.wrapper div'));//[div.test1, div.test2]
  </script>

以上这篇老生常谈jacascript DOM节点获取就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vue中轮训器的使用
Jan 27 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 #Javascript
vue实现简单表格组件实例详解
Apr 16 #Javascript
JavaScript实现网页头部进度条刷新
Apr 16 #Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 #Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 #Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 #Javascript
JavaScript简单计算人的年龄示例
Apr 15 #Javascript
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
php文件上传的两种实现方法
2016/04/04 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
python实现发送邮件功能
2017/07/22 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
车贷收入证明范本
2014/01/09 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
社区科普工作方案
2014/06/03 职场文书
企业趣味活动方案
2014/08/21 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python