老生常谈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实现动态CSS换肤技术的脚本
Jun 29 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
老生常谈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
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python实现自动发送报警监控邮件
2018/06/21 Python
学习python的前途 python挣钱
2019/02/27 Python
python查看数据类型的方法
2019/10/12 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
专科文秘应届生求职信
2013/11/18 职场文书
财务负责人任命书
2014/06/06 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
晚会闭幕词
2015/01/28 职场文书
消防安全培训工作总结
2015/10/23 职场文书