整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          第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不會返回文本節點

          實例:


          主站蜘蛛池模板: 国产在线第一区二区三区| 欧洲精品免费一区二区三区| 无码人妻精品一区二区蜜桃网站 | 色狠狠一区二区三区香蕉蜜桃| 一区二区高清在线| 中文字幕日韩一区| 一级毛片完整版免费播放一区| 亚洲国产国产综合一区首页| 日韩视频在线观看一区二区| 国产美女一区二区三区| 性无码免费一区二区三区在线| 精品国产亚洲第一区二区三区| 国产亚洲一区二区在线观看| 无码AV动漫精品一区二区免费| 国产高清在线精品一区| 久久se精品一区精品二区| 正在播放国产一区| 在线观看国产一区二区三区| 蜜臀AV一区二区| 亚洲熟妇av一区| 性无码一区二区三区在线观看| 国产福利一区二区在线视频 | 中文字幕色AV一区二区三区| 午夜无码视频一区二区三区| 国产精品自拍一区| 亚洲AV成人精品日韩一区 | 国产成人精品一区在线| 一区二区三区在线播放视频| 国产精品一区二区综合| 天天爽夜夜爽人人爽一区二区 | 中日韩一区二区三区| 大伊香蕉精品一区视频在线| 内射女校花一区二区三区| 香蕉视频一区二区| 精品一区二区三区四区| 国产高清一区二区三区| 国产精品亚洲一区二区三区在线观看| av无码一区二区三区| 精品一区二区三区四区在线播放| 久久一区二区三区精华液使用方法 | 国产在线精品一区二区中文|