dom選擇器。
我們知道document表示文檔骑素，我們就是通過document里面的方法選擇標(biāo)簽炫乓。
1：document.getElementById();
通過選擇Id選擇器，來選擇標(biāo)簽。
<div id="demo">123 </div> <div > 456</div> <script type='text/javascript'> var div=document.getElementById('demo'); </script>
目標(biāo)很明確厢岂，選擇了id='demo'的div
注意：元素在ie8以下的選擇器光督，不區(qū)分id的大小寫，而且也能匹配name屬性的元素（也就是如果有name='demo'）那么也會被匹配塔粒。
2：document.getElementsByTagName()
通過標(biāo)簽名來選擇標(biāo)簽结借。
<div id="demo">123 </div>
<div > 456</div>
<span>
<em></em>
</span>
<script type='text/javascript'>
var div=document.getElementsByTagName('div');
</script>
直接可以把所有的div標(biāo)簽全部選擇出來。這里注意我們返回的是一個類數(shù)組名卒茬，我們可以像數(shù)組一樣調(diào)用每一個div
我們應(yīng)該注意到這樣帶getElements的s的就是把一類都選出來船老，注意返回的是類數(shù)組。
這個很常用圃酵。
3：document.getElementsByName()
通過name屬性來選擇標(biāo)簽柳畔。
<div id="demo">123 </div>
<div name='cyl'> 456</div>
<span>
<em></em>
</span>
<script type='text/javascript'>
var div=document.getElementsByName('cyl');
</script>
這個方法對表單，img,iframe比較好郭赐，其他的你想想薪韩，你給加一個name干嘛了。
4：document.getElementsByClassName()
通過Class選擇器來選擇標(biāo)簽捌锭。
<div class="demo">123 </div>
<div name='cyl'> 456</div>
<span>
<em></em>
</span>
<script type='text/javascript'>
var div=document.getElementsByClassName('demo');
</script>
注意ie8和ie8以下的沒有這個方法俘陷。
以上的幾種方法都是實時性的，也就是標(biāo)簽變了观谦，那么選擇器選擇的標(biāo)簽也會馬上改變拉盾。舉個栗子
<div class="demo">123 </div>
<div id='cyl'> 456</div>
<span>
<em></em>
</span>
<script type='text/javascript'>
var div1=document.getElementsByTagName('div');
var div2=document.getElementById('cyl');
</script>
我們通過標(biāo)簽名選擇到了倆個選擇器，通過id選擇器選擇到了一個選擇器豁状。
我們?nèi)缦虏僮?
我們把div2去掉(remove)捉偏，那么div1里面也沒有了。嘻嘻現(xiàn)在理解實時性了吧泻红。
下面?zhèn)z種沒有實時性的標(biāo)簽夭禽，功能很強大，但是沒有實時性就很尷尬了谊路，就沒有那么厲害了讹躯，不常用。
看如下代碼
<div>
<strong>123</strong>
</div>
<div>
<span>
<strong>456</strong>
</span>
</div>
我們要選擇下面一個strong標(biāo)簽怎么辦凶异？
1：document.querySelector();
可以讓我們像css一樣蜀撑，選擇標(biāo)簽。
就這樣輕易的選擇到了剩彬。
2：document.querySelectorAll()
和上面一樣,但是選擇所有的返回的是類數(shù)組
ie7以下的瀏覽器沒有這兩種方法酷麦。
因為沒有實時性的緣故，應(yīng)用并不好喉恋。
被選擇出來的標(biāo)簽沃饶，里面上有很多方法和屬性母廷，下面來介紹一下。
節(jié)點遍歷樹.
1:childNode
返回的是當(dāng)前標(biāo)簽的父親節(jié)點糊肤。
<body>
<div>
<strong></strong>
<em></em>
<span></span>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('strong');
</script>
看的很清楚了吧琴昆，一層一層的直到document
2:childNodes
孩子節(jié)點們（注意是直系的）
<div>
<strong></strong>
<em></em>
<span></span>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div');
</script>
你們猜一下，div有幾個孩子節(jié)點馆揉。是不是三個耙瞪帷？
這里的節(jié)點注意不只是css的節(jié)點升酣，還有html的節(jié)點舷暮。
節(jié)點類型:文本節(jié)點，屬性節(jié)點噩茄，元素節(jié)點下面，注釋節(jié)點，document,documentFragment
我們注意到:比如<div>和<strong>之間有“空格”這個是文本節(jié)點咯绩聘，在html里面可是分隔符咯沥割。
是不是加了四個文本節(jié)點。
3:firstChild
第一個兒子節(jié)點
<div>
123
<strong></strong>
<em></em>
<span></span>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div');
</script>
div的第一個兒子節(jié)點是撒凿菩？
3：lastChild
最后一個兒子節(jié)點机杜，
4：nextSibling下一個兄弟節(jié)點，perviousSibling上一個兄弟節(jié)點
<div>
<strong></strong>
<em></em>
<span></span>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('strong');
</script>
1：parentElement
直接父母元素節(jié)點
<div>
<strong></strong>
<em></em>
<span></span>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('strong');
</script>
2：children
直接孩子元素節(jié)點
<div>
<strong></strong>
<em></em>
<span></span>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div');
</script>
3:firstElementChild||lastElementChild
返回第一個||最后一個元素節(jié)點
4:nextElementSibling||perviousElementSibling
下一個||上一個兄弟元素節(jié)點
節(jié)點的四屬性
1：nodeName(元素的標(biāo)簽名蓄髓，只可以讀）
<div>
<strong></strong>
<em></em>
<span></span>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div');
</script>
2:nodeValue(只有Text節(jié)點和Comment節(jié)點（注釋節(jié)點）有叉庐，可以寫）
3：nodeType(節(jié)點的類型)
通過返回值來確定節(jié)點類型
元素節(jié)點返回1 屬性節(jié)點返回2 文本節(jié)點返回3 注釋節(jié)點返回8 document返回9
documentFragment返回11
我們封裝一個函數(shù)來把一個節(jié)點樹中的元素節(jié)點都保存下來舒帮。
<div>
<span></span>
<em></em>
<strong></strong>
</div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div');
function returnElements(target) {
var arr=[];
var child=target.childNodes;
var len=child.length;
for (var i=0;i<len;i++) {
if (child[i].nodeType==1) arr.push(child[i]);
}
return arr;
}
console.log(returnElements(div[0]));
</script>
4：attributes(元素節(jié)點屬性的集合）
mo'和id='cyl'
<div class="demo" id="cyl"></div>
<script type='text/javascript'>
var div=document.getElementsByTagName('div');
</script>
