<!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>