获取DOM节点的几种方式
DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新、删除、添加、遍历
在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有:
一、通过元素类型的方法来操作:
- document.getElementById();//id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖id
- document.getElementsByTagName();//标签名
- document.getElementsByClassName();//类名
- document.getElementsByName();//name属性值,一般不用
- document.querySelector();//css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null
- document.querySelectorAll()//css选择符模式,返回与该模式匹配的所有元素,结果为一个类数组
注意:
前缀为document,意思是在document节点下调用这些方法,当然也可以在其他的元素节点下调用,如:
<div id="myDiv"><p>html</p><p>css</p><p>javascript</p> </div> <p>jquery</p><script>var div=document.getElementById("myDiv");var p1=div.getElementsByTagName("p");//在div下调用alert(p1.length);//3 div节点下的p元素只有三个var p2 = document.getElementsByTagName("p");alert(p2.length);//4 document节点下的p元素有四个</script>
- querySelector()和querySelectorAll()方法,最后两个为静态的,不是实时的,保存的是当时的状态,是一个副本,即:在以后的代码中通过方法使所选元素发生了变化,但该值依然不会改变,因此使用有局限性,一般不用,除非就想得到副本
举例如下:
<div id="myDiv"><p>html</p><p>css</p><p>javascript</p></div><p>jquery</p><script>var div=document.getElementById("myDiv");var p1=div.getElementsByTagName("p");alert(p1.length);//3var p2 = document.getElementsByTagName("p");alert(p2.length);//4var p3=document.querySelectorAll("p");alert(p3.length);//4 document.body.appendChild(document.createElement("p"));//创建新元素P,并添加到body中 alert(p1.length);//3 div节点下的p元素依然只有三个 alert(p2.length);//5 在body中添加了一个新的P元素,该方法是“动态的”,因此,长度发生了变化 alert(p3.length);//4 该方法是“静态的”,因此,无论发生什么变化,p3的值依然不会发生改变
二、根据关系树来选择(遍历节点树):
【先简单介绍一下节点:
DOM(文档对象模型)可以将任何HTML、XML文档描绘成一个多层次的节点树。所有的页面都表现为以一个特定节点为根节点的树形结构。html文档中根节点为document节点。
所有节点都有nodeType属性,代表节点的不同类型,通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型:
- Element类型(元素节点):nodeType值为 1
- Text类型(文本节点):nodeType值为 3
- Comment类型(注释节点):nodeType值为 8
- Document类型(document节点):nodeType值为 9;其规定的一些常用的属性有
document.body document.head 分别为HTML中的 <body><head>
document.documentElement为<html>标签
所有的节点都有 hasChildNodes()方法 判断有无子节点 有一个或多个子节点时返回true】
通过一些属性可以来遍历节点树:
- parentNode//获取所选节点的父节点,最顶层的节点为#document
- childNodes //获取所选节点的子节点们
- firstChild //获取所选节点的第一个子节点
- lastChild //获取所选节点的最后一个子节点
- nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
- previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null
<div id="myDiv"><p>html</p><p>css</p><p>javascript</p></div><p>jquery</p><script>var div = document.getElementById("myDiv");alert(div.childNodes.length);//7
在上边的例子中可以看出,div元素节点的所有子节点一共有7个,在后台查看可以得知:div元素节点的所有子节点包括 4个文本节点(在此全为空文本)和三个元素节
<div id="myDiv">第一个 文本节点<p>html</p>第二个 文本节点<p>css</p>第三个 文本节点<p>javascript</p>第四个 文本节点</div>
由于文档中的节点类型较多,遍历子节点的结果很多时候并不能得到我们想要的结果,使用遍历元素节点则很方便
三、基于元素节点树的遍历(遍历元素节点树):
- parentElement //返回当前元素的父元素节点(IE9以下不兼容)
- children // 返回当前元素的元素子节点
- firstElementChild //返回的是第一个元素子节点(IE9以下不兼容)
- lastElementChild //返回的是最后一个元素子节点(IE9以下不兼容)
- nextElementSibling //返回的是后一个兄弟元素节点(IE9以下不兼容)
- previousElementSibling //返回的是前一个兄弟元素节点(IE9以下不兼容)
<div id="myDiv"><p>html</p><p>css</p><p>javascript</p></div><p>jquery</p><script>var div = document.getElementById("myDiv");alert(div.children.length);//3
遍历元素节点虽然方便,但是除了children属性外,其他的属性则IE9以下不兼容
注意一点:这些获取节点的方式,返回值要么是一个特定的节点,要么是一个集合HTMLCollection,这个节点的集合是一个类数组
转载于:https://www.cnblogs.com/lihuijuan/p/8641775.html
获取DOM节点的几种方式相关推荐
- 通过原生js获取dom元素的九种方式
获取dom元素 <body><!-- <div id="box">我是一个DIV</div><p class="item& ...
- vue获取dom元素的几种方式
在任意标签上:ref="xx" 获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs. ...
- 获取根节点的两种方式
1.ServletActionContext.getServletContext().getRealPath("/") -- Strust2的方法 2.this.getClass( ...
- 前端框架——Jquery——基础篇2__获取DOM节点的值
对于获取DOM节点的内容,Jquery提供了四种方法,html,text,val,attr.下面来分别介绍这四种方法和它们的区别.下面以例子来说明 我写的JSP页面内容如下: 1 <div id ...
- ajax获取后台数据的几种方式及如何获取ajax内部的数据供外部使用
文章目录 1 ajax获取后台数据的几种方式 1.1 原生js的ajax方式 1.1.1 get 1.1.2 post 1.2 jQuery封装的ajax方式 1.2.1 $.ajax 1.2.2 $ ...
- Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式
Spark-Streaming获取kafka数据的两种方式-Receiver与Direct的方式,可以从代码中简单理解成Receiver方式是通过zookeeper来连接kafka队列,Direct方 ...
- vue 和 js 获取 dom节点下的某个元素,然后设置样式
vue获取dom节点下的类名,然后修改样式 <div ref="divRef"><div class="a">提到岁月,你们总说它是长河 ...
- springboot实战 获取spring上下文的4种方式
实际开发中我们经常需要通过spring上下文获取一些配置信息,本文阐述springboot应用获取spring上下文的几种方式. 方式一:实现ApplicationContextAware接口 imp ...
- JavaScript 技术篇-js通过xpath获取dom节点,js校验xpath唯一性
document.evaluate() 就是通过 xpath 获取 dom 节点. 返回的结果通过 .iterateNext() 可以获得 dom 对象,每次调用会少一个,当没有时就返回空. 返回匹配 ...
最新文章
- 电脑下边的任务栏不见了_正确的Windows任务栏设置,为你的操作带来便利,一起学习...
- springboot+security整合(1)
- 模板:二维凸包(计算几何)
- 音频放大电路_低音升压功率放大器电子电路的完整设计
- 【codevs1565】【BZOJ2242】计算器,数论练习
- 一种快速构造和获取URL查询参数的方法:URLSearchParams
- Process Explorer
- Pandas系列(七)Pandas数据排序
- R与Python手牵手:数据探索性分析案例展示
- CentOS安装网络驱动
- python调用有道翻译_python调用有道云翻译api
- 数独大师级技巧_数独高级解法技巧,数独高手教你如何玩转数独
- win7系统提示0x80072F8F错误代码的解决方法(刷新你的认知)
- windows server 2008 R2 怎么集成USB3.0驱动
- Spring Spring-data-redis 实现的消息队列
- LeetCode题解(1872):石子游戏VIII(Python)
- 学一点django基础
- pytest合集(5)— Function函数
- MT6737模块编译方法
- Linux网络延迟排查方法