書中提供了一個小的案例來講述DOM控制頁面節(jié)點樹的方法,我將這個過程比較詳細的寫了一遍,確實很實用!雖然使用方法比innerHTML繁瑣些比然,但是可以非常精確控制每一個節(jié)點的位置万俗,還可以把這個節(jié)點做成一個全局變量(這個是我看到這里自己總結的,應該是成立的)库倘,以后隨時可以調用!
下面內容包括代碼,我都是在markdown編輯器下手敲的彪笼,目的是為了在這個過程中,能再寫一遍代碼,對這些代碼能加深印象
如果文字敲錯了大家就當沒看見,代碼敲錯了我相信能看出來的不會看我這種小白的blog系忙,看不出來復制過去報錯的洁墙,請留言哈捺弦。
createElement方法
createElement方法是在頁面中創(chuàng)建一個新的元素幽崩,但這個元素是沒有父元素的,它只是游蕩在這個腳本中理郑,不會被頁面顯示出來但實際上是存在的类缤。
格式:
document.createElement(nodeName);
例如在一個空的HTML文件中創(chuàng)建一個元素p:
<script type="text/javascript">
document.createElement("p");
</script>
書中講到,創(chuàng)建了一個元素后把它賦值給一個變量是一個不錯的選擇,這樣方便后續(xù)調用:
<script type="text/javascript">
var para = document.createElement("p");
</script>
appendChild方法
這個方法可以把createElement創(chuàng)建的元素插入頁面中某個指定的元素節(jié)點下氓扛,使其成為這個元素的子節(jié)點枯芬。
格式:parent.appendChild(child);
例子:
<div id="testdiv">
</div>
上面這個HTML是一個空的ID為testdiv的div,我想將上面創(chuàng)建的那個P元素插入這個div中:
<div id="testdiv">
</div>
<script type="text/javascript">
var para = document.createElement("p");
document.getElementById("testdiv").appendChild(para);
</script>
得到的結果是(我在瀏覽器中F12截圖的):
可以看到采郎,這個空的P標簽已經(jīng)成功插入到ID為testdiv的div標簽下千所,成為它的子元素了。但這么寫我覺得有點太長了蒜埋,可以換成下面的寫法:
<div id="testdiv">
</div>
<script type="text/javascript">
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
</script>
個人覺得這種寫法更容易調試代碼淫痰,靈活性更高些!
切記:
parent.appendChild(child);
中的child
是不帶引號的整份,因為我在上面已經(jīng)把這個元素存入了一個變量中待错,我在寫的時候就因為這個問題,撒潑打滾的一個字一個字的對著書本的代碼查了好半天才反應過來烈评。
當然火俄,我是小白才會因為這種基礎的常識問題卡住,大神們請直接忽略讲冠!
createTextNode方法
上面講的使用createElement創(chuàng)建一個空的元素p瓜客,并用appendChild插入了指定的div中,現(xiàn)在就可以使用createTextNode來為這個p元素創(chuàng)建內容,創(chuàng)建的形式也是和createElement一樣忆家,出來的也是一個浮游的文本元素犹菇。
格式:document.createTextNode(text);
例如:
document.createTextNode("This is mt blog!");
//var text = document.createTextNode("This is mt blog!");
//我一般習慣在創(chuàng)建元素的時候馬上賦值給一個變量,方便后面使用
文本內容創(chuàng)建好了之后芽卿,就可以再使用appendChild方法揭芍,插入到p標簽下了:
var text = document.createTextNode("This is mt blog!");
para.appendChild(text);
整個過程完整的代碼如下:
<div id="testdiv">
</div>
<script type="text/javascript">
//創(chuàng)建一個空的p元素并賦值給變量para
var para = document.createElement("p");
//找到指定的id的div
var testdiv = document.getElementById("testdiv");
//將這個para插入到指定的div下
testdiv.appendChild(para);
//創(chuàng)建一個文本元素,值為:This is my blog
var text = document.createTextNode("This is my blog!");
//將這個文本元素插入到p標簽下
para.appendChild(text);
</script>
最終的顯示結果如下:
排版需要卸例,我把瀏覽器放大了称杨,實際上的This is my blog!顯示出來是默認的字號和字體!