老生常谈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 相关文章推荐
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 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
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
python ElementTree 基本读操作示例
2009/04/09 Python
零基础学Python(一)Python环境安装
2014/08/20 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python django事务transaction源码分析详解
2017/03/17 Python
老生常谈Python基础之字符编码
2017/06/14 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python中is和==的区别详解
2018/11/15 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
pandas的resample重采样的使用
2020/04/24 Python
win10安装python3.6的常见问题
2020/07/01 Python
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
三个Unix的命令面试题
2015/04/12 面试题
三八妇女节寄语
2015/02/27 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python