文/michaelgbw
dom節(jié)點(diǎn)對(duì)于我們weber都是非常熟悉的。我們的js一系列操作基本是基于這個(gè)來(lái)操作的。那么什么是dom節(jié)點(diǎn)，我們先摘抄出來(lái)一段官方W3C的官方文檔介紹
HTML DOM 是 W3C 標(biāo)準(zhǔn)（是 HTML 文檔對(duì)象模型的英文縮寫，Document Object Model for HTML）。
HTML DOM 定義了用于 HTML 的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問(wèn)和處理 HTML 文檔的標(biāo)準(zhǔn)方法。
也就是說(shuō)html就是個(gè)大的tree，<html></html>就是整個(gè)樹(shù)的根節(jié)點(diǎn)，其他都是其孩子節(jié)點(diǎn)，而且當(dāng)我們新建個(gè)html文檔，什么都不寫時(shí)，我們可以看到瀏覽器會(huì)默認(rèn)接入基本的元素。
而我們的元素還分為塊級(jí)元素和內(nèi)聯(lián)函數(shù)，簡(jiǎn)單的說(shuō)就是塊級(jí)元素(block)特性:總是獨(dú)占一行，表現(xiàn)為另起一行開(kāi)始，而且其后的元素也必須另起一行顯示;內(nèi)聯(lián)元素(inline)特性:和相鄰的內(nèi)聯(lián)元素在同一行。
常見(jiàn)的塊級(jí)元素有 center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul
常見(jiàn)的內(nèi)聯(lián)函數(shù)則有a , acronym , b br , cite , em , font , i , img , input , kbd , label , q , s , samp , select , small , span ,textarea , tt , u , var
還有一些可變函數(shù)，即是根據(jù)上下文來(lái)判斷究竟是塊級(jí)的還是內(nèi)聯(lián)，有,button ,del ,iframe , ins ,map , script等
這里說(shuō)下一個(gè)誤區(qū)，就是在內(nèi)聯(lián)元素中是可以插入塊級(jí)元素的，而內(nèi)聯(lián)元素的大小也是可以通過(guò)這個(gè)來(lái)設(shè)置的,如：
<a>
<div style="width:100px;height:100px;">測(cè)試</div>
</a>
這里的a元素的大小就是通過(guò)其孩子div來(lái)設(shè)置的
好了，說(shuō)了一堆，我們來(lái)具體看看js是怎么操作的dom節(jié)點(diǎn)的吧。
js中一切都會(huì)對(duì)象，而我們的dom也是，在document中，
常用的原生js獲取元素的方法就是大概通過(guò)幾種方式，我們這里和jquery中的方法放在一起比較。
<!doctype html>
<html lang="en">
<head>
<!-- 首先我們先寫個(gè)基本的html結(jié)構(gòu)-->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="show"></div>
<div id='test1'>
<span id="sp1"></span>
<span id="sp2">我是有id的</span>
<div class='t1_div'>
我是有class的
</div>
</div>
<div id='test2'></div>
</body>
</html>
我們這里只列出一些常見(jiàn)的，jquery選擇器太強(qiáng)大，具體可參考這篇文章
| 序號(hào) | 作用 | js | jquery |
|---|---|---|---|
| 1 | 按照元素的id獲取 | document.getElementById('show') | $('#show') |
| 2 | 按照的元素的名稱來(lái)查找，返回的是個(gè)數(shù)組 | document.getElementsByTagName('span') | $('span') |
| 3 | 按照元素的類來(lái)獲取 | document.getElementsByClassName('t1_div') | $('.t1_div') |
| 4 | 返回當(dāng)前元素中有指定標(biāo)記名的子元素的數(shù)組 | document.getElementsByTagName('div')[1].getElementsByTagName('span') | $('div').eq(1).children('span') |
還有具體操作和通過(guò)js來(lái)創(chuàng)建元素的方法，我們就不一一介紹了
接下來(lái)我們來(lái)具體寫點(diǎn)什么，來(lái)具體來(lái)理解下dom（為了簡(jiǎn)單我就用jq啦~）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="show"></div>
<div id='test1' style="background-color:#CAE4E4;">
<span id="sp1"></span>
<span id="sp2">我是有id的</span>
<div class='t1_div'>
我是有class的
</div>
<button id='go'>我要兄弟</button>
</div>
<br>
<div id='test2' style="background-color:#E6BEBE;"></div>
<script src='jquery/jquery-1.11.2.min.js'></script>
<script>
var html="<button class='insert'>我是新來(lái)的</button>";
var div1=$('#test1');
$('#go').click(function(){
div1.append(html);
console.log($('#test1').find('.insert'));
});
$('#test2').html(html);
$('.insert').click(function(e){
alert('i am coming!');
})
console.log($('#test2').find('.insert'));
</script>
</body>
</html>
我們發(fā)現(xiàn)當(dāng)我們點(diǎn)擊“我要兄弟時(shí)，會(huì)出來(lái)一個(gè)按鈕，但怎么點(diǎn)都不alert,當(dāng)我們console.log()的時(shí)候，發(fā)現(xiàn)是能取到元素的。。。
這要從html的dom加載開(kāi)始說(shuō)起了,html的dom在一次http請(qǐng)求直接獲取到全部源碼，當(dāng)瀏覽器發(fā)現(xiàn)源碼中有img。script的時(shí)候再發(fā)送http請(qǐng)求去獲取，然后進(jìn)行js和css等渲染，最后呈現(xiàn)出來(lái)，也就是說(shuō)dom樹(shù)已經(jīng)在js中獲取到了，即$('.insert').click(function(e){
alert('i am coming!');
})
這個(gè)這個(gè)獲取到了所有一開(kāi)始加載了的class=insert的元素
而這時(shí)用戶點(diǎn)擊事件發(fā)生后，發(fā)生了dom樹(shù)的重繪，class=insert的元素還沒(méi)有被監(jiān)聽(tīng)到，自然不能獲取到。而這時(shí)我們可以這樣：
$("body").on("click",".insert",function(e){
alert('i am coming!');
});
//jQ1.7前還可以這樣
$('.insert').live(function(e){
alert('i am coming!');
})
這下大家應(yīng)該對(duì)dom有所了解了，我們接著改寫代碼
//html在<button id='go'>我要兄弟</button>
//加入<button id='bushow'>show</button>
$('.insert').click(function(e){
$(this).remove();
})
$('#bushow').click(function (){
console.log($('.insert').html());
});
remove后發(fā)現(xiàn)是undefined了吧，好的
$('.insert').click(function(e){
$(this).remove();
})
console.log()出來(lái)不是undefined了吧，這說(shuō)明hide等函數(shù)并不是操作dom，只是吧這個(gè)元素display:none，用戶看不到啦，但dom中確實(shí)的的確確存在哦，還有能操作哦.
好的，就分享到這里了~~
