获取元素

getElementById （元素ID)

<div id="time">2019-9-9</div> 
<script>
var timer = document.getElementById('time')
console.log(timer)
console.log(typeof timer)
console.dir(timer)
</script>

getElementsByTagName (标签名)

<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
var lis = document.getElementsByTagName('li')
console.log(lis)
console.log(lis[0])
for (var i = 0; i < lis.length; i++){
console.log(lis[i])
}


var nav = document.getElementById('nav')
var navLis = nav.getElementsByTagName('li')
console.log(navLis)
</script>

getElementsByCalssName (class类名)

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var boxs=document.getElementsByClassName("box")
console.log(boxs)
</script>

querySelector （选择器 ）

返回：该模式匹配的第一个元素
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var firstBox = document.querySelector('.box')
console.log(firstBox)
var nav = document.querySelector('#nav')
console.log(nav)
var li = document.querySelector('li')
console.log(li)
</script>

querySelectorAll （选择器）

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
var allBox = document.querySelectorAll('.box')
console.log(allBox)
var lis = document.querySelectorAll('li')
console.log(lis)
</script>

获取特殊元素（body、html)

获取body ：document.body
获取html : document.documentElement

获取元素之 节点获取

父级节点

<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
var erweima = document.querySelector('.erweima')
console.log(erweima.parentNode)
</script>

子元素节点

<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
console.log(ul.children)
console.log(ul.firstElementChild)
console.log(ul.lastElementChild)
console.log(ul.children[0])
console.log(ul.children[children.length-1])
</script>

兄弟节点

<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div')
var span=documnet.querySelector("span")
console.log(div.nextElementSibling)
console.log(span.previousElementSibling)
</script>