第41節 Document文檔節點-Javascript

內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。

Document 接口描述了任何類型的文檔的通用屬性與方法，根據不同的文檔類型（例如HTML、XML）提供了不同的API，比如，使用 "text/html" 作為內容類型的HTML文檔，實現了 HTMLDocument，而XML文檔則實現了XMLDocument，HTMLDocument和XMLDocument接口都是繼承自Document接口；

Javascript通過Document類型表示文檔；在瀏覽器中，document對象是Document的一個實例，更具體一點，是HTMLDocument的一個實例，其表示整個HTML頁面；并且document對象也是window對象的一個屬性，可以將其作為全局對象來訪問；因此document對象，既屬于BOM又屬于DOM的對象；

Document節點的特征：

nodeType的值為9
nodeName的值為#document
nodeValue的值為null
parentNode的值為null

其子節點可能是一個DocumentType（最多一個）、Element（最多一個，即html）、ProcessingInstruction或Comment；

console.log(document);  // 在FF控制臺可以看出是屬于HTMLDocument類型
console.log(document.nodeType); // 0
console.log(document.nodeName); // #document
console.log(document.nodeValue);  // null
console.log(document.parentNode);  // null
console.log(document.childNodes.length);  // 2

文檔的子節點：

DOM標準規定Document節點的子節點可以是DocumentType、Element、ProcessingInstruction或Comment；

<!-- 這是一個comment -->
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
<script>
console.log(document.childNodes); // 使用FF查看 NodeList(3)
</script>
</body>
</html>

documentElement屬性：

返回文檔直接子節點，始終指向HTML頁面中的<html>元素，也就是文檔的根元素，并且它一定是文檔的根元素；

// 注意：在HTML中的第二行有可能是注釋
console.log(document.childNodes[2]);  // <html>
console.log(document.documentElement);  // <html>
console.log(document.lastChild);  // <html>

借助這個只讀屬性，能方便地獲取到任意文檔的根元素；

body屬性：

作為HTMLDocument的實例，document對象還有一個body屬性，直接指向<body>；

console.log(document.body);

對于一個擁有<frameset>元素的文檔來說，返回的是最外層的<frameset>元素；

另外，該屬性是可寫的，且為該屬性賦的值必須是一個<body>元素；

// 如果HTML結構為body id="oldBody"，則:
console.log(document.body.id);  // oldBody
var newBody = document.createElement("body");
newBody.id = "newBody";
document.body = newBody;
console.log(document.body.id);  // newBody

head屬性：

指向<head>元素，這個Document對象擴展的一個屬性，類型為HTMLHeadElement；

如果有多個<head>元素，則返回第一個；

document.head 是個只讀屬性，為該屬性賦值只會靜默失敗，如果在嚴格模式中，則會拋出TypeError異常；

需要注意的是，如果文檔源代碼中未顯式的包含<head>和<body>元素，瀏覽器將隱式的創建它們；

doctype屬性：

該屬性是DocumentType 類型，表示了一個包含文檔類型的節點對象，指向<!DOCTYPE>標簽；

文檔當中最多只有一個DocumentType元素；

console.log(document.doctype);  // <!DOCTYPE html>
console.log(document.doctype.nextSibling); // <html>
console.log(document.childNodes[0]); // <!DOCTYPE html>

如果存在文檔聲明，則將其作為document的第一個子節點，解析DOCUMENTTYPE_NODE類型，如果沒有聲明，則為null；

注：DocumentType對象不能動態創建，它是只讀的；

查找元素（選取文檔元素）：

在DOM中，取得特定的某個或某組元素，并執行一些操作，這是最重要的應用了；

為了獲取文檔中的這些元素Element對象，DOM定義了許多方式，如：用指定的id屬性、name屬性、標簽名、CSS類或CSS選擇器；

取得元素的操作可以使用document對象的幾個方法來完成；Document類型為此提供了兩個方法；

getElementById()方法：

該方法接收一個參數，即要獲取的元素的ID；如果找到就返回這個元素，類型是HTMLElement，如果不存在，則返回null；該參數ID是區分大小寫的；

如果頁面中多個元素的ID值相同，只返回文檔中第一次出現的元素；

var mydiv = document.getElementById("mydiv");
console.log(mydiv);
可以封裝一個通過ID查找多個元素的函數，如：
/**
* 函數接受任意多的字符串參數
* 返回一個對象
* 如果一個id對應的元素未定義，則拋出錯誤
*/
function getElements(/*ids...*/){
    var elements = {};  // 一個空map映射對象
    for(var i=0; i<arguments.length; i++){
        var id = arguments[i];
        var elt = document.getElementById(id);
        if(elt == null)
            throw new Error("No element with id:" + id);
        elements[id] = elt;
    }
    return elements;
}
console.log(getElements("mydiv","mylist"));
console.log(getElements("mydiv","mylist")["mydiv"]);

getElementById方法不會搜索不在文檔中的元素；當創建一個元素，并且分配ID后，必須要使用appendChild、insertBefore等方法把元素插入到文檔中，之后才能使用getElementById()方法獲取到；

var elt = document.createElement("div");
elt.id = "myelt";
document.body.appendChild(elt);  // myelt,添加到文檔對后，才能被獲取到到
var el = document.getElementById("myelt");
console.log(el);  // null

getElementsByName()方法：

返回給定name 屬性的所有元素NodeList集合對象；

var mytexts = document.getElementsByName("mytext");
console.log(mytexts); // dom2.html:17 NodeList(2) [p, div]

該方法定義在HTMLDocument類中，而不在Document類中，所以它只針對HTML文檔可用，也就是只有HTMLDocument類型才有的方法，在XML文檔中不可用；

<fieldset>
    <legend>選擇你最喜歡的城市</legend>
    <ul>
        <li><input type="radio" value="北京" name="city" id="beijing" />
            <label for="beijing">北京</label></li>
        <li><input type="radio" value="南京" name="city" id="nanjing" />
            <label for="nanjing">南京</label></li>
        <li><input type="radio" value="蚌埠" name="city" id="bengbu" />
            <label for="bengbu">蚌埠</label></li>
    </ul>
</fieldset>
<script>
var citys = document.getElementsByName("city");
console.log(citys);
</script>

該方法返回的是NodeList對象，在NodeList中返回的元素按照在文檔中的順序排序的，所以可以使用方括號語法來取得每個元素；

console.log(document.getElementsByName("city")[0]);

但IE與Edge返回的是HTMLCollection；但namedItem()方法是屬于HTMLCollection類型的，所以，非IE調用namedItem()方法會拋出異常；并且在IE中namedItem()只會返回第一項，因為每一項的name特性都是相同的；

console.log(citys.namedItem("city"));

為某些HTML元素設置name屬性，將自動在windows對象中創建對應的屬性，對Document對象也是類似的；比如，為<form>、<img>、<iframe>、<applet>、<embed>或<object>元素設置name屬性，即在Document對象中創建以此name屬性值為名字的屬性；

<form name="myform"></form>
<script>
console.log(document.myform);
</script>

即使如此，建議不要用這種方式來獲取元素，最好還是顯式的使用getElementsByName()方法；

getElementsByTagName()方法：

該方法是通過標簽名來獲取元素，其接收一個參數，即要取得元素的標簽名；返回擁有零個或多個元素的HTMLCollection集合對象，其是動態集合，與NodeList非常類似；；

var spans = document.getElementsByTagName("span");
console.log(spans); // HTMLCollection

其擁有length屬性，可以通過方括號或者item()方法來訪問HTMLCollection對象中的項；還擁有一個namedItem()方法，該方法可以通過元素的name屬性取得集合中的項，但可以簡寫為使用方括號訪問；即如果是數值，則調用item()，如果是字符串索引，就調用namedItem()；

var divs = document.getElementsByTagName("div");
console.log(divs);
console.log(divs[0]);
console.log(divs.item(1));
console.log(divs.namedItem("innerDiv"));
console.log(divs["innerDiv"]);
console.log(images[0].src);
images.item(1).src = "images/3.jpg";

如果傳入“*”，則取得頁面中所有元素；（在JS和CSS中，*就是匹配所有的通配符）；

var nodes = document.getElementsByTagName("*");
console.log(nodes);

會打印出頁面中所有的元素，按照它們出現的順序（沒有層次之分）；

在HTML中，該方法參數不需要區分大小寫，而在XML中，區分大小寫；

Element類也定義了getElementsByTagName()方法，其原理和Document一樣，但是它只選取調用該方法的元素的后代元素；

var mydiv = document.getElementById("mydiv");
// 也可以通過getElementsByTagName來獲取
// var mydiv = document.getElementsByTagName("div")[0];
var spans = mydiv.getElementsByTagName("span");
console.log(spans);

文檔信息：

作為HTMLDocument的一個實例，document對象還有一些標準的Document對象所沒有的屬性；這些屬性提供了document對象所表現的網頁的一些信息；

從BOM角度來看document對象是window對象的屬性，由一系列集合構成，這些集合可以訪問文檔的各個部分，并提供頁面自身的信息，可以認為document即為加載的html文檔；

document.title：包含著<title>元素中的文本，通過它，可以獲取或修改當前頁面的標題；

var originalTitle = document.title;
console.log(originalTitle);
document.title = "zeronetwork title";
// 標題跑馬燈效果
var str="北京零點網絡科技有限公司-";
document.title = str;
function titleMove(){
    str = str.substring(1,str.length) + str.substring(0,1);
    document.title = str;
}
setInterval("titleMove()",1000);

lastModified：返回文檔被最后修改的日期和時間；

cookie：允許Javascript讀寫的HTTP cookie的特殊屬性；

location：與window對象的location屬性引用同一個Location對象；

URL：包含頁面完整的URL；一般情況下，該屬性的值與location.href 屬性相同；但不包含Location對象的動態變化，即在 URL 重定向發生的時候，這個URL屬性保存了文檔的實際URL，不會發生變化，而 location.href會發生變化；location.href 是可寫的，document.URL是只讀的；

console.log(document.URL);
console.log(location.href);
document.URL = "demo.html";  // 無效
console.log(document.URL);
// location.href = "demo1.html";  // 跳轉

referrer：來源頁面的URL（鏈接到當前頁面的那個頁面），如果沒有來源，referrer為空字符串；該屬性是只讀的；

console.log(document.referrer);

這個屬性在分析網站SEO數據時特別有用；

var referrer = document.referrer;
var origin = location.origin;
console.log(referrer);
console.log(origin);
if(referrer){
    if(referrer.indexOf(origin) == 0){
        document.write("站內瀏覽");
    }else{
        document.write("從外鏈：" + referrer + "進入");
    }
}else{
    document.write("直接打開");
}

查找搜索關鍵詞：

var ref = document.referrer;
console.log(ref);
if(ref.indexOf("http://127.0.0.1:5500/search.html?") == 0){
    var args = ref.substring(ref.indexOf("?") + 1).split("&");
    for(var i=0; i<args.length; i++){
        if(args[i].substring(0,2) == "q="){
            document.write("<h2>搜索的是：</h2>");
            keys = args[i].substring(2).split("+");
            for(var k in keys){
                document.write(decodeURIComponent(keys[k]) + "<br>");
            }
            break;
        }
    }
}

domain屬性：獲取或設置當前文檔的域名；

該屬性允許當Web頁面之間交互時，相同域名下互相信任的Web服務器之間協作放寬同源策略安全限制，其是可讀的，但有安全限制，即不能為domain賦任意值；

不能將該屬性設置為URL中不包含的域；

// FF提示“The operation is insecure.”，Chrome提示不是127.0.0.1的子域名
// document.domain = "www.zeronetwork.cn";  // 異常
console.log(document.domain);

document對象的集合：

除了屬性和方法，document對象還有一些特殊的集合；這些集合都是HTMLCollection對象，為訪問文檔的常用部分提供了快捷方式，包括：

document.anchors：包含文檔中所有帶name特性的<a>元素；這個屬性已經從Web標準中刪除了，但瀏覽器還支持，所以盡量不要再使用；

<!-- link.html頁面 -->
<h1>零點程序員</h1>
<h2><a name="one">Web前端開發</a></h2>
<div style="height: 1000px;background-color: purple;">DIV</div>
<h2><a name="two">后端開發</a></h2>
<div style="height: 1000px;background-color: green;">DIV</div>
<h2><a name="three">蘋果開發</a></h2>
<div style="height: 1000px;background-color: blue;">DIV</div>
<!-- 主頁面 -->
<p>
    <input type="button" value="Web前端開發" onclick="jump('one')" />
    <input type="button" value="后端開發" onclick="jump('two')" />
    <input type="button" value="蘋果開發" onclick="jump('three')" />
</p>
<script>
var win = window.open("link.html","newWin","width=250,height=150");
function jump(name) {
    console.log(name);
    if(win.document.anchors[name]){
        win.location.hash = name;
        win.focus();
    }else{
        alert("錨不存在")
    }
}
</script>

document.links：包含文檔中所有帶href特性的<a>元素或<area>元素；

var mydiv = document.getElementById("mydiv");
var links = document.links;
for(var i=0,len=links.length; i<len; i++){
    var aNode = document.createElement("a");
    aNode.href = links[i].href;
    var href = document.createTextNode(links[i].innerText);
    aNode.appendChild(href);
    mydiv.appendChild(aNode);
}

打開外鏈進行提醒：

var links = document.links;
for(var i=0,len=links.length; i<len; i++){
    var link = links[i];
    link.addEventListener("click",function(e){
        e.preventDefault();
        if(e.target.host !== location.host)
            jump(e.target.innerText, e.target.href);
        else
            location.href = e.target.href;
            
    },false);
}
function jump(title,href){
    var div = document.createElement("div");
    div.id = "jumpDiv";
    document.body.appendChild(div);
    var str = document.createTextNode("你要訪問的：" + href + "不屬于本網站，你要繼續訪問嗎？");
    div.appendChild(str);
    var aGo = document.createElement("a");
    aGo.href = href;
    aGo.target = "_blank";
    aGo.appendChild(document.createTextNode("繼續"));
    div.appendChild(aGo);
    var aBack = document.createElement("a");
    aBack.href = "Javascript:void(0);";
    aBack.appendChild(document.createTextNode("關閉"));
    aBack.onclick = closeJumpDiv;
    div.appendChild(aBack);
}
function closeJumpDiv(){
    var jumpDiv = document.getElementById("jumpDiv");
    if(jumpDiv)
        jumpDiv.parentNode.removeChild(jumpDiv);
}

document.applets：包含文檔中所有的<applet>元素；

document.forms：包含文檔中所有的<form>元素，與document.getElementsByTagName(“form”)得到的結果是相同的；

<form name="myform">
    <!-- id也可為以-->
    <input type="text" id="username" />
</form>
<form name="yourform"></form>
<script>
console.log(document.forms); // HtmlCollection
console.log(document.forms.myform);
console.log(document.forms[0]);
console.log(document.forms["myform"]);
console.log(document.forms.myform.username);
</script>

document.embeds：包含文檔中所有的<embeds>元素；

document.plugins：包含文檔中所有的插件；注意和navigator.plugins的區別；

console.log(document.plugins);  // HTMLCollection
console.log(navigator.plugins);  // pluginArray

document.images：包含文檔中所有的<img>元素實時集合，集合中的每個元素代表了一個image元素的HTMLImageElement，與document.getElementsByTagName(“img”)得到的結果是相同的；

document.scripts：返回一個HTMLCollection對象，包含了當前文檔中所有<script>元素的集合；

document.all：只讀屬性，返回一個HTMLAllCollection，包含了頁面上的所有元素；已從Web標準中刪除，但是瀏覽器都支持，但建議不要使用；與document.getElementsByTagName(“*”)得到的結果基本相同的；

console.log(document.all);  // HTMLAllCollection
console.log(document.getElementsByTagName("*"));  // HTMLCollection
console.log(document.all[9]);
document.all[9].innerHTML = "零點程序員";
// id或name為"mydiv"的元素,但是有區別的,為name的元素只是插入text
document.all["mydiv"].innerHTML = "<h2>零點程序員</h2>";

以上這些集合始終都可以通過HTMLDocument對象訪問到，而且，它們都是動態的；但現在已經被 document.getElementsByTagName()所取代，部分已經廢棄不應該再使用，但是仍然常常被使用，因為他們使用起來很方便；

文檔寫入：

document對象，可以將文本字符串寫入文檔流中；

write()與writeln()方法：

這兩個都接受一個字符串參數，即要寫入到輸出流中的文本；write()會原樣寫入，writeln()則會在字符串的末尾添加一個換行符（\n）；

這兩個方法會將其字符串參數連接起來，然后將結果字符串插入到文檔中調用它們的腳本元素的位置；

document.write("<h1>" + document.title + "</h1>");
document.write("<strong>" + (new Date()).toString() + "</strong>");

不光輸出內容，還會解析為DOM元素；

參數可以是多種形式，如：

// 部分替換為writeln()方法
var username = "wangwei";
document.write("我的名字：" + username + "<br/>");
document.write("sum:" + (5 + 4));
document.write("<ul>");
document.write("<li>HTML</li>","<li>CSS</li>","<li>Javasc </li>");
document.write("</ul>")
var arr = ["<p>zeronetwork</p>","<p>wangwei</p>","<p>web</p>"];
document.write(arr.join(""));
function func(){
    return "func";
}
document.write(func + "<br>");
document.write(function(){
    return "Happy";
}());

只有在解析文檔時才能使用write()方法輸出HTML到當前文本，如果把write()方法放到一個函數內或者在文檔加載結束后再調用document.write()，那么輸出的內容將會重寫整個頁面；如：

window.onload = function(){
    document.write("零點程序員");
}

這里有個問題，理論上來說，重寫了整個頁面后，原頁面中的所有變量和值都應該被清除，但事實卻不是這樣的，IE是這樣的行為，但其他瀏覽器會保留原內容中的變量和值；

var num = 10;
function fun(){
    document.write("fun");
}
var mydiv = document.getElementById("mydiv");
window.onload = function(){
    document.write("重寫了整個頁面");
    console.log(num);
    fun();
    document.body.appendChild(mydiv);
}
正因為它們不兼容，所以不要在新文檔流中調用原內容中的變量和值；

open()與close()方法：

可以使用write()方法在其他的窗口或框架頁中來創建整個全新文檔，但一般會配合close和open方法一起使用；

open()和close()分別用于打開和關閉網頁的輸出流；如果是在頁面加載期間使用write()或writeln()方法，則不需要用到這兩個方法，因為文檔此時是打開狀態；向一個已經加載完成的文檔寫入數據時，會自動調用 document.open，并且會擦除該文檔的所有內容，因為已經加載完成的文檔，它的文檔流已經關閉，就是已經自動調用了document.close()；

可以多次調用write()來逐步建立新文檔的內容；傳遞給write的內容可能緩存起來，所以一旦完成了數據寫入，建議調用 document.close()來結束該寫序列，以告訴HTML解析器，文檔已經達到了文件的末尾，寫入的數據會被解析到文檔結構模型（DOM）里，此時應該結束解析并顯示新文檔；

btn.onclick = function(){
    document.open();  // 可以省略
document.write("重寫了整個頁面");
    document.close();
}

此時，如果在close()方法后，再調用write()方法就會重寫整個新窗口的內容，如：

// 在onclick事件處理函數中繼續添加
document.write("文檔又被重寫了");

注意：無法關閉系統創建的文檔流，如果，我們在全局環境中直接執行close()方法，會發現沒有效果，原因就是無法關閉系統創建的文檔流，我們只能關閉自己打開的文檔流；

在新窗口也是同樣的道理；

var oNewWin=window.open("about:blank","newwindow","width=400,width=200");
oNewWin.document.open();
oNewWin.document.write("<h1>新窗</h1>");
oNewWin.document.write("<div>這是一個新窗口</div>");
oNewWin.document.close();

在使用write()方法時，最好一次性寫入；

<input type="button" id="btn" value="寫入">
<script>
var newWin = null;
function makeNewWin(){
    newWin = window.open("about:blank","newWin","width=400,height=300");
}
var btn = document.getElementById("btn");
btn.onclick = function(){
    // 如果newWin不存在或已關閉，再次打開
    if(!newWin || newWin.closed)
        makeNewWin();
    newWin.focus();
    var title = "零點程序員";
    var newStr = "<!DOCTYPE html>";
    newStr += "<html><head>";
    newStr += "<title>" + title + "</title></head>";
    newStr += "<body>";
    newStr += "<h1>零點程序員</h1>";
    newStr += "<div>這是內容</div>";
    // 把body拆分成</b和ody>，否則會拋出異常
    newStr += "</b" + "ody></html>"; 
    newWin.document.write(newStr);
    newWin.document.close();
}
</script>

document.open()另類的用法：

2個參數的open()方法，語法為document.open(type, replace)，如：

document.open("text/html","replace");

type指定了所需寫入的數據的MIME類型，默認值為”text/html”，replace（如有設置，值為一個字符串“replace”）指定了新文檔從父文檔繼承歷史條目；

使用open()方法，在IE中會產生歷史條目，其他瀏覽器不會產生，因此這種用法只會在IE中有效果；而如果指定了replace參數，IE就不會產生歷史條目，也就是父文檔的記錄被覆蓋了；

這種形式現在已經棄用；

3個參數的open()方法，是Window.open()的一個別名；

var doc = document.open("https://www.zeronetwork.cn/","","width=400;");// 打開新窗口
console.log(doc);  // Window
doc.document.write("<h1>零點程序員</h1>");  // 重寫
doc.document.close();
// doc.close();  // 會關閉窗口

動態加載外部資源：

使用write()和writeln()兩個方法，還可以動態加載外部資源，如Javascript文件等，但要注意，不能直接包含字符串“</script>”，因為會導致代碼不能正確的解析；

document.write("<script type=\"text/javascript\" src=\"file.js\">" + "<\/script>");
// 或者
document.write("<script type=\"text/javascript\" src=\"file.js\">" + "</scr" + "ipt>");

這種方法經常在廣告和統計功能的第三方中使用；

為什么不直接使用<script>標簽，而直接使用動態載入呢？原因有兩個：

一是腳本的URL不能寫死，比如要動態添加一些參數，用戶設備的分辨率啊，當前頁面 URL 啊，防止緩存的時間戳之類的，這些參數只能先用 JS 獲取到，再比如國內常見的網站統計代碼：

<script>
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1279580898'%3E%3C/span%3E%3Cscript src='" + 
cnzz_protocol +  "s9.cnzz.com/stat.php%3Fid%3D1279580898' type='text/javascript'%3E%3C/script%3E"));
</script>

它之所以使用write()方法，而不使用<script>元素，就是為了先用 JS 判斷出該用http還是https 協議；

另外，有可能需要在腳本里加載另外一個腳本文件或嵌入的JS內容有可能會修改頁面內容，而這些操作只需要第三方自己維護，不需要自己的網站去維護；

在實際開發中，write()并不常用，innerHTML屬性和其他DOM技術提供了更好的方法來為文檔增內容；比如，可以利用innerHTML來輸出內容：

var mydiv = document.getElementById("mydiv");
mydiv.innerHTML = "<h1>零點程序員</h1><p>開設了Web前端課程</p>";
// 重寫body內所有內容
document.body.innerHTML = "<h1>零點程序員</h1><p>開設了Web前端課程</p>";
包裝一個對象，類似于write()和close()方法：
// 為設置元素的innerHTML定義簡單的"流式"API
function ElementStream(elt){
    if(typeof elt === "string")
        elt = document.getElementById("elt");
    this.elt = elt;
    this.buffer = "";
}
// 連接所有的參數，添加到緩存中
ElementStream.prototype.write = function(){
    this.buffer += Array.prototype.join.call(arguments, "");
};
// 類似write()，只是多增加了換行符
ElementStream.prototype.writeln = function(){
    this.buffer += Array.prototype.join.call(arguments, "") + "\n";
};
// 從緩存設置元素的內容，然后清空緩存
ElementStream.prototype.close = function(){
    this.elt.innerHTML = this.buffer;
    this.buffer = "";
}
var mydiv = document.getElementById("mydiv");
var elt = new ElementStream(mydiv);
elt.write("<h1>零點程序員</h1>");
elt.writeln("<p>王唯</p>");
elt.close();

Web前端開發之Javascript-零點程序員-王唯

<div class="ceshi">
	<p>1</p><p>2</p><p>3</p>
</div>

<script>
	setInterval(function(){addLine();},2000)
    function addLine() {
        var html =$(".ceshi p:nth-child(1)").html();
         $(".ceshi p:nth-child(1)").remove()
         $('.ceshi p:last-child').after("<p>"+html+"</p>");
    } 
</script>

用到的方法有：.

remove（）刪除

after（）最后的位置追加

尾子節點,有兼容性問題

firstChild、firstElementChild

lastChild 、lastElementChild

firstChild、lastChild會返回文本節點

firstElementChild 、lastElementChild不會返回文本節點

實例:

在線咨詢

上一篇：網頁設計HTML零基礎入門
下一篇：HTML代碼中的空格和空行

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

第41節 Document文檔節點-Javascript

您的項目需求