DOM选择器之元素节点选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<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>5</span>
<span><em>hello</em></span>
<span>9</span>
<input type="text" name="user" value="你好">
<input type="text" name="user">
<input type="text" name="pass">
</body>
<script> // 选择器：
// 元素节点选择器：
// id,class,name,tagname,高级,关系 // id:返回的是单个对象
var box = document.getElementById("box");
console.log(box) //<div id="box">1</div>
// class：返回的是数组对象，如果要使用其中的元素，通过索引解析
var acont = document.getElementsByClassName("cont")
console.log(acont)//[div.cont, div.cont, div.cont]
console.log(acont[0])//<div class="cont">4</div> ，返回数组中的单个对象
console.log(acont[0].innerHTML)//4 返回数组中的单个对象中的值
console.log(acont.innerHTML) //undefined
// tagname：返回的是数组对象，如果要使用其中的元素，通过索引解析
var aspan = document.getElementsByTagName("span")
console.log(aspan) // [span, span, span],第二个span中有元素，但是在数组只显示一个span
// name:返回的是数组对象，如果要使用其中的元素，通过索引解析
var auser=document.getElementsByName("user")
console.log(auser) //[input, input]
console.log(auser[0])//<input type="text" name="user">
console.log(auser[0].value)//你好
// 高级:ES5新增的
// querySelector：返回的是单个对象
var a = document.querySelector("#box")
console.log(a) //<div id="box">1</div>
var b=document.querySelector(".msg")
console.log(b)//<div class="msg"><div class="sbox"><h2>二级标题</h2><h2>二级标题</h2></div><h2>二级标题</h2><h2>二级标题</h2></div>
var ele = document.querySelector("span")
console.log(ele)//<span>5</span>
var ele = document.querySelector(".msg h2")
console.log(ele)//<h2>三级标题</h2>
var ele = document.querySelector(".msg>h2")
console.log(ele)//<h2>二级标题</h2>
// querySelectorAll：返回的是数组对象，如果要使用其中的元素，通过索引解析
var ele = document.querySelectorAll("#box") //[div#box, div#box, div#box]
var ele = document.querySelectorAll(".cont")// [div.cont, div.cont, div.cont]
var ele = document.querySelectorAll("span") //[span, span, span]
var ele = document.querySelectorAll(".msg h2")//[h2, h2, h2, h2]
var ele = document.querySelectorAll(".msg>h2")//[h2, h2]
console.log(ele) // 关系：
// 父选子,返回的是数组对象
var omsg = document.querySelector(".msg");
console.log(omsg.children);//[div.sbox, h2, h2]
// 子选父,返回的是单个对象
var osbox = document.querySelector(".sbox");
console.log(osbox.parentNode);//<div class="msg"><div class="sbox"><h2>三级标题</h2><h2>三级标题</h2></div><h2>二级标题</h2><h2>二级标题</h2></div>
// 第一个子,返回的是单个对象
var omsg = document.querySelector(".msg");
console.log(omsg.firstElementChild) //<div class="sbox"><h2>三级标题</h2><h2>三级标题</h2></div>
// 最后一个子,返回的是单个对象
var omsg = document.querySelector(".msg");
console.log(omsg.lastElementChild)//<h2>二级标题</h2>
// 上一个兄弟,返回的是单个对象
var omsg = document.querySelector(".msg");
console.log(omsg.previousElementSibling)//<div id="box">3</div>
1 // 下一个兄弟,返回的是单个对象
var omsg = document.querySelector(".msg");
console.log(omsg.nextElementSibling)//<div class="cont">4</div>
// 其他节点选择器： </script>
</html>
DOM选择器之元素节点选择器的更多相关文章
- DOM选择器之元素选择器
DOM中元素选择器 在DOM中我们可以将元素选择器分为两类:1.元素节点选择器:2.其它节点选择器.通过选择器选择HTML中的元素以对其进行操作,以此实现用JS对页面的操作. 一.元素节点选择器 1. ...
- CSS选择器之伪类选择器（元素）
:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...
- jQuery选择器之内容过滤选择器Demo
测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- CSS选择器之伪类选择器（交互）
:link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...
- jQuery选择器之基本筛选选择器
<h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left&quo ...
- DOM基础+domReady+元素节点类型判断
DOM节点类型 nodeType element 1 Node.ELEMENT_NODE 元素节点 attr 2 Node.ATTRIBUTE_NODE 属性节点 text 3 ...
- jQuery选择器之元素选择器
元素选择器:根据给定(html)标记名称选择所有的元素. 描述: $('element') 搜索指定元素标签名的所有节点,这是一个合集的操作.同样的也有原生方法getElementsByTagName ...
- CSS选择器之伪类选择器（伪元素）
selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...
- jQuery选择器之基本过滤选择器Demo
测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jquery选择器之内容过滤选择器
先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...
随机推荐
- xlwings简单使用
xlwings能够非常方便的读写Excel文件中的数据,并且能够进行单元格格式的修改 xlwings基本操作 打开已有的Excel文档 # 导入xlwings模块 # 打开Excel程序,默认设置:程 ...
- SQL Server 还原数据库
1.备份要还原的数据库 选择要备份的数据库,右键单击,任务--备份. 2.备份完成后,将数据库还原 3.新建一个空的数据库,比如Gsy_TestNew,将备份的数据库还原到这个新的库上 4.右键单击[ ...
- mysql语句优化总结
Sql语句优化和索引 1.Innerjoin和左连接,右连接,子查询 A. inner join内连接也叫等值连接是,left/rightjoin是外连接. SELECT A.id,A.nam ...
- ASP.NET Core 读取配置文件信息
一:读取配置文件 先来看一下appsettings.json文件的内容,如下图: { "ConnectionStrings": { "ServerConnection&q ...
- MongoDB:内嵌文档查询匹配 查询集合中的文档
1.db.getCollection('Notification').find({ Title:{$regex:/班/}, "Message.TargetUrl":{$regex: ...
- 2020.3.9 ~ 2020.3.15 ACM训练周总结
一.本周ACM学习相关内容 学习了dfs和bfs -- 4小时 课上系统的学习了vector等stl函数的使用即注意事项-3小时 二.题数与耗时 师哥安排了12道题,做了五道(不包含比赛题):大概4个 ...
- MySQL使用bin-log将数据恢复到某个时间点
binlog的三种模式 statement:记录每一条修改数据的sql row:保存哪条记录被修改 mixed:兼顾前两者的优点. # 查看binlog有没有开启 SHOW VARIABLES LIK ...
- Windows安装使用Chocolatey 包软件管理(类似 rpm , yum, brew , apt-get 包管理器工具)
Windows也能像Linux或者Mac那样命令行安装管理软件了,,,真的太方便了 下载安装 使用window powershell 用管理员运行 Set-ExecutionPolicy Bypass ...
- remove blank line
[$ cat all.experiments.csv.clean|sed -r '/^\s*$/d' > all.experiments.csv.clean2
- .net core 版本避坑 无法打开项目文件。 无法找到 .NET SDK。请检查确保已安装此项且 global.json 中指定的版本(如有)与所安装的版本相匹配。
打开项目根目录,输入 dotnet --version ,查看本机安装的最高版本的sdk: 如果源文件中存在global.json文件,直接打开修改即可: 不存在则接着在1步骤后输入: dotnet ...