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)簽兔沃，功能很強(qiáng)大，但是沒有實時性就很尷尬了级及，就沒有那么厲害了乒疏，不常用。
看如下代碼
<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>
