讀javascript進階編程10-DOM

讀javascript進階編程10-DOM
元素的childNodes屬性來表示其所有子節點，它是一個NodeList對象，會隨著DOM結構的變化動態變化。 hasChildNodes()：是否有子節點。var headlines=document.getElementById("headline_block");var childs=headlines.childNodes;childs.length;//1childs[0];//取第一個子節點childs.item(0);//取第一個子節點parentNode：指向其DOM樹中的父節點；previousSibling：當前節點前面相鄰的兄弟節點；nextSibling：當前節點後面相鄰的兄弟節點。var li1=childs[0].childNodes[2];li1.previousSibling;li1.nextSibling;二、節點操作 1.appendChild()：向節點的childNodes末尾追加一個節點。如果傳入的節點已經是其子節點，那麼會將該節點移動到末尾。 var headlines=document.getElementById("headline_block");var ul=headlines.childNodes[0];var firstnode=ul.firstChildul.appendChild(firstnode);ImageImage(1) 2.insertBefore(newnode,somenode)：向指定位置來插入子節點。第一個參數是要插入的節點，第二個是作為參照的節點。 var headlines=document.getElementById("headline_block");var ul=headlines.childNodes[0];var firstnode=ul.firstChild;ul.insertBefore(firstnode,ul.childNodes[2]);Image(2) 3.replaceChild(newnode,oldnode)：替換節點。第一個參數是要插入的新節點，第二個參數是要被替換掉的節點。 4.removeChild(somenode)：移除節點指定節點。 var headlines=document.getElementById("headline_block");var ul=headlines.childNodes[0];ul.removeChild(ul.childNodes[0]);Image(3) 常用Node類型 三、Document類型（nodeType=9） 1. 基本屬性 nodeType=9nodeName="#document"document.documentElement：指向頁面中的html元素；document.body：指向body元素。2. 文檔資訊: document.title：擷取或修改頁面title，修改後會反映在瀏覽器標籤頁上，但是不會修改<title>元素。 document.title;//"部落格園 - 開發人員的網上家園"document.title="部落格園-小靜";document.URL:顯示頁面完整的URL。 document.referrer：來源頁面的完整地址。 document.domain：頁面的網域名稱，該屬性是可以設定的。但要注意幾點： 不能將domain設定為當前所在網域名稱中不包含的域；不能將鬆散的域再設定為緊繃的域；跨域通訊：由於跨域安全限制，不用域的頁面之間是無法進行javascript通訊的。通過將兩個頁面的document.domain設定為相同值，就可以互相訪問對方包含的javascript對象了。例如當前在部落格園快閃記憶體首頁： 複製代碼document.URL;//"http://home.cnblogs.com/ing/"document.referrer;//"http://www.cnblogs.com/"document.domain;//"home.cnblogs.com"document.domain="www.baidu.com";//報錯document.domain="cnblogs.com";//可以document.domain="home.cnblogs.com";//報錯document.domain;//"cnblogs.com"複製代碼3. 特殊集合 document.anchors：帶name特性的<a>簽；document.links：帶連結的<a>簽；document.images：頁面中所有<img>元素。四、Element類型（nodeType=1） Element類型提供了對標籤名、子節點、特性的訪問和操作。 1.標籤名 tagName返回的是標籤名大寫格式，比較時要先進行大小寫轉換。 node.tagName.toLowerCase()=="a";2.HTML元素基本特性className：與元素的class特性對應，用於指定元素的css樣式。 3.元素屬性 getAttribute()：擷取元素的某個特性。這裡的特性名與元素實際的特性相同，所以想獲得樣式名就直接使用“class”而不是“clssName”。setAttribute(attr,value)：設定元素特性。第一個參數是特性名稱，第二個參數是特性的值。使用該方法設定的特性名稱會自動轉換為小寫。removeAttribute(attr)：徹底移除元素的某個屬性。五、Text類型(nodeType=3) 1. nodeName="#text" 2. 擷取節點常值內容：nodeValue或者data屬性均可。 3. 操作文本節點內容 appendData(text)：在文本節點末尾追加文本。deleteData(offset,count)：從offset位置開始刪除count個字元。insertData(offset,text)：從offset位置插入文本text。replaceData(offset,count,text)：用text替換從offset位置開始長度為count的文本。substringData(offset,count)：提取從offset位置開始長度為count的文本。splitText(offset)：從指定位置將文本節點分割為兩個文本節點。4. normalize()：正常化文本節點。在包含多個文本節點的元素上調用該方法，會將其文本節點進行合并。 複製代碼var node=document.getElementById("ing_body_578997");//擷取文本節點var textnode=node.childNodes[0];//擷取節點文本值var data=textnode.data;//"最近學js進階編程，又是基礎書，該掉粉了，`(*∩_∩*)′"//追加文本textnode.appendData("Text");//最近學js進階編程，又是基礎書，該掉粉了，`(*∩_∩*)′Text//刪除文本片段textnode.deleteData(8,10);//最近學js進階編粉了，`(*∩_∩*)′Text//插入文本textnode.insertData(8,"部落格園");//最近學js進階編部落格園粉了，`(*∩_∩*)′Text//替換文本textnode.replaceData(5,25,',加油');//最近學js加油//擷取文本片段textnode.substringData(5,1);//,//分割為多個節點textnode.splitText(',');console.log(node.childNodes.length);//2//正常化node.normalize();console.log(node.childNodes.length);//1複製代碼六、DocumentFragment類型(nodeType=11) 可以作為倉庫使用，儲存未來要添加到文檔中的節點。 複製代碼(function(){var ul=document.getElementById("myList");  var frag=document.createDocumentFragment();  var li=null,text=null;  for(var i=4;i<=6;i++){  li=document.createElement("li");  text=document.createTextNode("item"+i);    li.appendChild(text);    frag.appendChild(li);  }  ul.appendChild(frag);})();複製代碼七、DOM操作 1.動態指令碼 ①通過src包含外部指令檔。載入完成後就可以在頁面其他地方調用了。 複製代碼function LoadScriptSrc(src){  var script=document.createElement("script");  script.type="text/javascript";  script.src=src;  document.body.appendChild(script);}LoadScriptSrc("validate.js");checkName();複製代碼②動態添加行內代碼指令碼。代碼範圍為全域，而且執行完後立馬可用。 複製代碼function LoadScript(){var script=document.createElement("script");script.type="text/javascript";try{      script.appendChild(document.createTextNode("function begin(){console.log('hello world.')}"));}catch(ex){       script.text="function begin(){console.log('hello world.')}";} document.body.appendChild(script);}LoadScript();begin(); 複製代碼2.動態樣式 注意樣式要添加到head中。 ①使用Link動態添加來自外部的樣式檔案，執行是非同步。 複製代碼function loadCss(url){var link=document.createElement("link");link.rel="stylesheet";link.href=url;var head=document.getElementsByTagName("head")[0];head.appendChild(link);}loadCss("http://www.damifanli.com/data/css/index_index_914724003.css")複製代碼②使用style動態添加嵌入式CSS樣式代碼。向頁面中添加樣式後立即就能看到效果。 複製代碼function loadCss(css){var style=document.createElement("style");style.type="text/css";try{ style.appendChild(document.createTextNode(css));}catch(ex){ style.styleSheet.cssText=css;}var head=document.getElementsByTagName("head")[0];head.appendChild(style);}loadCss("body{background-color:red}");