js学习总结:DOM节点一(选择器,节点类型)
DOM:document object model 文档对象模型
DOM就是整个HTML文档的关系图谱(代表整个HTML文档),可以理解为下图:
一、查看元素节点
1.document.getElementById('元素id') 获取的类型:元素对象;
兼容性:a.IE6、7,会把表单元素input的name属性当做ID来使用;
b.IE8以下的浏览器,不区分id大小写
注意事项:
a.没有获取到元素返回null
b.后端抽取会改变id名称,实际开发不使用id选择器来操作元素节点
2.document.getElementsByTagName('元素标签名') 获取的类型:元素对象类数组
使用:可以通过限定查找范围来获取元素列表。context.getElementByTagName('元素标签名')
3.context.getElementsByName(‘name属性’) 获取的类型:元素对象类数组
兼容性:IE浏览器下只由表单元素和部分元素有效(表单、表单元素、img、iframe),且老版本浏览器不支持。
4.context.getElementsByCalssName('类名的值') 获取的类型:元素对象类数组
兼容性:IE6~8不支持
5.document.querySelector('css选择器') 获取的类型:元素对象类数组
兼容性:IE6、7没有这个方法
6.document.querySelectorAll('css选择器') 获取的类型:元素对象类数组
兼容性:同上。
注意:不是时时的元素节点,删除添加标签都不被检测
在众多原生DOM选择中,似乎每个都存在缺陷,综合考虑最合适被应用到实际开发中的选择器就是getElementByClassName();但由于IE6~8不兼容,所以需要做一些兼容处理,下面是兼容处理的代码:
1 functiongetElementsByClass(className,context){2 context = context ||document;3 //把传递进来的样式类名的首尾空格先去掉,然后在按照中间的空格把里面的每一项拆分成数组 4 var classNameAry = className.replace(/(^ +| +$)/g,"").split(/ +/g); 5 6 //获取指定上下文中的所有的元素标签,循环这些标签,获取每一个标签的className样式类名的字符串 7 var ary =[];8 var nodeList = context.getElementsByTagName("*");9 for(var i = 0,len=nodeList.length;i<len;i++){10 var curNode =nodeList[i];11 //判断curNode.className是否包含classNameAry里面的样式值 12 13 //14 var isOk = true;//我们假设curNode 15 for(var k = 0;k<classNameAry.length;k++){16 var curName =classNameAry[k];17 var reg = new RegExp("(^| +)"+curName+"( +|$)");18 if(!reg.test(curNode.className)){19 isOk = false;20 break;21 }22 }23 if(isOk){//拿每一个标签分别和所有样式类名比较后,如果结果还是true的话,说明当前元素标签包含了所有的样式,也是我们想要的。 24 ary.push(curNode)25 }26 }
二、节点树
node.parentNode | 返回元素的父节点对象;例如HTML元素的父节点是document | 节点对象 |
element.childNodes | 返回所有子节点对象列表 | 节点对象类数组 |
node.fistChild | 返回第一个子节点对象 | 节点对象 |
node.lastChild | 返回最后一个节点对象 | 节点对象 |
node.nextStibling | 返回后一个兄弟节点对象 | 节点对象 |
node.previousSibling | 返回前一个兄弟节点对象 | 节点对象 |
注意:以上方法都是基于节点查询,会将所有节点类的节点型访问出来,不会区分元素节点。(查询元素节点可以参考下一个知识点“遍历元素节点树”)
三、遍历元素节点树
element.parentElement | 返回当前节点的父节点元素对象(IE9以下不兼容) | 元素节点对象 |
element.children | 返回当前节点的元素子节点对象列表(IE9以下不兼容) | 元素节点对象类数组 |
element.childElementCount | 返回当前节点的元素子节点的个数同等于node.children.length | number |
element.firstElementChild | 返回当前节点的第一个元素子节点对象(IE9以下不兼容) | 元素节点对象 |
element.lastElementChild | 返回当前节点的最后一个元素子节点对象(IE9以下不兼容) | 元素节点对象 |
element.nextElmentSibling | 返回当前节点的前一个元素节点对象(IE9以下不兼容) | 元素节点对象 |
element.previousElementSibling | 返回当前节点的后一个元素节点对象(IE9以下不兼容) | 元素节点对象 |
四、节点类型及节点属性
类型名称 | nodeName | nodeValue | nodeType | attributes |
元素节点 | 大写的标签名(字符串类型) | null | 1 | 元素节点的属性集合 |
属性节点 | .... | .... | 2 | ..... |
文本节点 | "#text" | 标签符号间的文本(带Tab) | 3 | undefined |
注释节点 | "#comment" | 注释文本 | 8 | undefined |
document | "#document" | null | 9 | undefined |
documentFragment | 11 |
注意:
a)documentFragment——文档片段对象
b) 属性节点从文档树形逻辑来说不能与其他节点一起放到这里,被放到这里的原因主要是因为展示nodeType属性。
到这里可能你还不明白属性节点是什么?
从document文本结构来说,属性节点是元素节点的子节点,该节点的内容就是所在元素的所有属性的节点集合。请看示例代码:
1 <div class="div1" id="div1" style="color:blue;text-align:center"> 2 3 </div> 4 <script type="text/javascript"> 5 var div = document.getElementsByTagName("div")[0];6 var atts =div.attributes;7 console.log(atts);8 </srcipt>
在来看看打印的结果
从打印结果来看,元素节点的attributes属性获取了元素所有的属性列表,并以类数组的方式保存。
属性节点上同样存在nodeName、nodeType、nodeValue等属性。
五、封装自己的元素子节点集合
由于element.children子元素节点列表属性的兼容性非常不好(IE9以下都不兼容),所以建议封装一个自己的获取元素子节点集合的方法,下面是封装代码。
functionretElementChild(node){var temp ={length :0,push : Array.prototype.push,splice : Array.prototype.splice},child=node.childNodes,len=child.length;for (var i = 0; i < len; i++) {if (child[i].nodeType === 1) {temp.push(child[i]);}}returntemp; }
转载于:https://www.cnblogs.com/ZheOneAndOnly/p/10141090.html
js学习总结:DOM节点一(选择器,节点类型)相关推荐
- WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
- 前端:JS/25/DOM官方定义,DOM分类,HTML节点树(节点关系,节点类型,),核心DOM中公共的属性和方法(节点访问,查找DOM节点,节点属性,节点的创建,追加和删除)
DOM官方定义 DOM,Document Object Model,文档对象模型,我们可以把网页中的所有"东西"看成是对象": DOM的官方定义:DOM可以使用脚本,动态 ...
- js添加多个子节点_JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: www.jb51.net JS节点插入 function showinsert(){ //添加子节 ...
- JS DOM创建和添加元素节点
JS DOM创建和添加元素节点 文章目录 JS DOM创建和添加元素节点 第一种: createElement() + createTextNode() + appdChild() 第二种: inne ...
- (JS基础)DOM:节点类型
Node 类型 所有节点类型都继承于 Node 类型,因此所有节点类型都共享这相同的基本属性和方法. 基本属性和方法 nodeName :节点名.对于元素类型,则是元素的标签名(均为大写),如&quo ...
- JS DOM父节点子节点(浏览器兼容)
DOM概述 HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点.然后操作的时候修改的是该元素的属性. DOM (文档对象 ...
- js之DOM操作(插入节点insertBefore())
插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点. 语法: insertBefore(newnode,node); 参数: newnode: ...
- js查看当前节点html,JS获取HTML DOM节点元素
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很 ...
- JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
最新文章
- python⾯向对象学员管理系统
- LVS的DR模型的实现
- scrapy爬取京东
- POJ2718【DFS】
- c++ 线性回归_模型之母:简单线性回归的代码实现
- 嵌入式Linux入门5:移植总览
- java dll 调用方法_关于Java调用dll的方法 | 学步园
- LVM基本介绍与常用命令
- 行业动态_天才、忽悠与炮灰
- STM32H750 开启 SAI 模块
- 硬盘被计算机限制如果解锁,硬盘被锁怎么办
- 东芝打印机共享怎么设置_东芝e-studio181打印机怎么设置网络打印机
- 计算机蓝屏代码0x000000ED,XP系统蓝屏提示错误代码0x000000ED怎么办?
- Asp.net +jQuery +ajax 传参问题
- war3鸿蒙大陆攻略,【魔兽rpg地图失落大陆攻略汇总】
- C++——迪杰斯特拉算法弗洛伊德算法(DijkstraFloyd)for Neuedu
- 深入MTK平台bootloader启动之【 Pre-loader -> Lk】分析笔记
- 香帅的北大金融学课笔记20 -- 金融术与道
- 数据规范化与数据离散化
- 集训笔记---扩展欧几里德算法(POJ NO.1061 青蛙的约会 有点烦人小跳蛙gcd)