DOM的选择器
这几天学习了DOM的选择器,现在来进行一下总结分类。
1.DOM里的元素节点选择器
元素节点选择器包括id,class,name,tagname,高级,关系。
1.1 id选择器
id:返回的是单个对象
相关标签代码
<body>
<div id="box">1</div>
<div id="box">2</div>
<div id="box">3</div>
<div class="msg">
<div class="sbox">
<h2>二级标题</h2>
<h2>二级标题</h2>
</div>
<h2>二级标题</h2>
<h2>第二个二级标题</h2>
</div>
<div class="cont">4</div>
<div class="cont">5</div>
<div class="cont">6</div>
<span>7</span>
<span><em>hello</em></span>
<span>9</span>
<input type="text" name="user">
<input type="text" name="user">
<input type="text" name="pass">
</body>
id选择器代码
var box = document.getElementById("box");
console.log(box)
控制台显示效果
1.2 class选择器
class:返回的是数组对象,如果要使用其中的元素,通过索引解析
class选择器代码
var acont = document.getElementsByClassName("cont")
console.log(acont)
console.log(acont[0])
console.log(acont[0].innerHTML)
console.log(acont.innerHTML)
控制台显示效果
1.3 tagname选择器
tagname:返回的是数组对象,如果要使用其中的元素,通过索引解析
tagname选择器代码
var aspan = document.getElementsByTagName("span")
console.log(aspan)
console.log(aspan[1])
console.log(aspan[1].innerHTML)
console.log(aspan.innerHTML)
控制台显示效果
1.4 name选择器
name:返回的是数组对象,如果要使用其中的元素,通过索引解析
name选择器代码
var auser = document.getElementsByName("user")
console.log(auser)
控制台效果
1.5高级选择器:ES5新增的
1.5.1.querySelector:返回的是单个对象
querySelector选择器代码
var ele = document.querySelector("#box")
console.log( ele)
var ele = document.querySelector(".cont")
console.log( ele)
var ele = document.querySelector("span")
console.log( ele)
var ele = document.querySelector(".msg h2")
console.log( ele)
var ele = document.querySelector(".msg>h2")
console.log( ele)
控制台显示效果
1.5.2.querySelectorAll:返回的是数组对象,如果要使用其中的元素,通过索引解析
querySelectorAll选择器代码
var ele = document.querySelectorAll("#box")
console.log(ele[1])
var ele = document.querySelectorAll(".cont")
console.log(ele[1])
var ele = document.querySelectorAll("span")
console.log(ele[1])
var ele = document.querySelectorAll(".msg h2")
console.log(ele[1])
var ele = document.querySelectorAll(".msg>h2")
console.log(ele[1])
控制台效果
1.6关系选择器
1.6.1 父选子
var omsg = document.querySelector(".msg");
console.log(omsg.children);
console.log(omsg.children[0].innerHTML)
控制台效果
1.6.2子选父
var osbox = document.querySelector(".sbox");
console.log(osbox.parentNode);
1.6.3选第一个子
var omsg = document.querySelector(".msg");
console.log(omsg.firstChild)
1.6.4选最后一个子
var omsg = document.querySelector(".msg");
console.log(omsg.lastElementChild)
1.6.5 上一个兄弟
var omsg = document.querySelector(".msg");
console.log(omsg.previousElementSibling)
1.6.6 下一个兄弟
var omsg = document.querySelector(".msg");
console.log(omsg.nextElementSibling)
2其他节点选择器
<body>
<span>qwe</span>
<div class="box">
<span>1</span>
<p>2</p>
hello
<!-- 这是注释 -->
<em>3</em>
</div>
<span>zxc</span>
</body>
2.1 父选子
var obox = document.querySelector(".box")
console.log(obox.childNodes)
2.2 选上一个兄弟
var obox = document.querySelector(".box")
console.log(obox.previousSibling)
console.log(obox.previousSibling.nodeName)
2.3 选下一个兄弟
var obox = document.querySelector(".box")
console.log(obox.nextSibling)
2.4 选第一个子和最后一个子
var obox = document.querySelector(".box")
console.log(obox.firstChild)
var obox = document.querySelector(".box")
console.log(obox.lastChild)
DOM的选择器的更多相关文章
- JavaScript实现DOM对象选择器
目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...
- Dom直接选择器
Dom直接选择器 <!DOCTYPE html> <!--Dom间接选择器--> <html lang="en"> <head> & ...
- DOM 的选择器 API
在刚开始的时候,我们只能用 getElementById,getElementsByClassName,getElementsByTagName 这几个 DOM 方法查找 DOM 树中的元素.后来,在 ...
- DOM querySelector选择器
原生的强大DOM选择器querySelector 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并 ...
- js dom操作选择器,dom操作复习
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery(DOM和选择器)
O(∩_∩)O~~~,今天简单整理了一下最近所学的Jquery知识.下面就总结一下. 首先,对于Jquery我们需要简单了解下: 1.Jquery是开放源代码的JS库, 2.Jquery操作是函数式编 ...
- 前端 Dom 直接选择器
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- JavaScript框架设计(三) push兼容性和选择器上下文
JavaScript框架设计(三) push兼容性和选择器上下文 博主很久没有更博了. 在上一篇 JavaScript框架设计(二) 中实现了最基本的选择器,getId,getTag和getClass ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
随机推荐
- 《VR入门系列教程》之12---转换矩阵
转换矩阵 模型网格的三维空间位置都是由它们的顶点坐标决定的,如果每次想要移动一下模型位置都要依次改变每个网格的顶点坐标,这将一件非常头疼的事,要是遇上需要显示动画效果那就更糟了.为了解决这个问 ...
- C语言编程入门之--第二章编译环境搭建
第二章 编译环境搭建 导读:C语言程序如何工作,首先需要编译链接成可执行文件,然后就可以运行在不同的环境中,这个“环境”的意思就是比如说,电脑,手机,路由器,蓝牙音箱等等智能设备中,其中编译器启到了关 ...
- 【Intellij】导入 jar 包
选中工具栏上"File"--->"Project Structure"--->选择“Libraries”--->点击“+”--->选择自 ...
- 【iOS】设备系统版本
判断 iOS 系统的版本号,示例代码如下: NSLog(@"version--%d", [[[UIDevice currentDevice] systemVersion] floa ...
- Codis与RedisCluster的原理详解
背景介绍 我们先来看一下为什么要做集群,如果我们要部署一个单节点Redis,很明显会遇到单点故障的问题. 首先能想到解决单点故障的方法,就是做主从,但是当有海量存储需求时,单一的主从结构就会出问题,说 ...
- Redhat 离线安装 Docker (Community from binaries)
需求 在离线环境安装Docker (Community版),因为Enterprise版要花钱.当然资金充裕的客户可参考https://docs.docker.com/install/linux/doc ...
- luogu1220_关路灯 区间dp
传送门 区间dp f[i][j][state] : [i, j]区间 state=0 当前选i state = 1 当前选j 注意枚举的顺序 转移的设计时 在同时刻不在[i,j]区间里的数也要考虑 不 ...
- Samba:基于公网 IP 的服务访问
写在前面的话 由于使用过程中,发现如果 Samba 只用于内网访问,同事在外面甚至其它不是一个网段的同事就无法访问了.这显然不符合我们最终的需求,最后没法,只能把访问部署到云服务器上面去,此时问题来了 ...
- 0x33 同余
目录 定义 同余类与剩余系 费马小定理 欧拉定理 证明: 欧拉定理的推论 证明: 应用: 定义 若整数 $a$ 和整数 $b$ 除以正整数 $m$ 的余数相等,则称 $a,b$ 模 $m$ 同余,记为 ...
- docker-compose 综合训练
Docker-compose综合训练 一. 实验目的: 熟悉Docker-compose的基本工作原理: 熟悉Docker-compose安装 熟悉Docker compose命令基础 熟悉Docke ...