JavaScript Dom編程藝術 6-

第六章:查詢元素

掌握的實用方法:

  1. elment.getAttribute(“屬性名稱”)—能夠獲取到元素的屬性值

  2. element.setAttribute(“屬性名稱”,”設置的值”)—為元素的特定屬性設置特定的值

  3. element/document.getElementsByTagName(“元素名稱”)—獲取元素或者文檔中的所有該元素名稱的元素對象,并保存為數(shù)組??梢杂胒or循環(huán)取出。

  4. element.childNodes[下標] —獲取到元素的子節(jié)點對象(不包含元素的屬性節(jié)點)。

  5. element.childNodes[下標].nodeValue—獲取子節(jié)點對象的節(jié)點值(文本值)

  6. 為鏈接添加onclick事件,使html文檔和js分離


varul_a=document.getElementById("ul_a");

vararray_a=ul_a.getElementsByTagName("a");

for(var i=0;i<array_a.length;i++){

    //通過for循環(huán)為每個a鏈接添加onclick事件,并為如果img不存在時留出后路
     array_a[i].onclick=function(){
         //為瀏覽器返回一個調用函數(shù)的Boolean值,true成功(img不存在,跳轉另一個頁面)  false不成功(img存在,不跳轉)
            return changePIC(this);
        }
}

第七章:創(chuàng)建元素

  1. document.createElement(“標簽名”)—創(chuàng)建一個游離于JavaScript世界的標簽元素;

  2. var element=document.createTextNode(“文本字段”)—創(chuàng)建一個游離于JavaScript世界的文本元素;

  3. element.appendChild(element)—將創(chuàng)建的游離文本元素添加到element中;

  4. parentElement.insertBefore(new Element,target Element)—將Element元素插入到targetElement元素之前,eg:

target Element.parentNode.insertBefore(new Element,targetElement);
//target Element.parentNode指的是他們共同的父元素。
  1. 自定義的一個方法:parent.insertAfter(new Element,target Element);
FunctioninsertAfter(new Element,target Element){

//獲取到他們共同的父元素

var parent=target Element.parentNode;

//將父元素最后一個子元素與目標元素進行比較

//如果相等,則直接添加?

If(parent.lastChild==targetElement)parent.appendChild(new Element);

else{

parent.insertBefore(new Element,target Element.nextSibling);

}

}

第八章:查詢提取并創(chuàng)建

  1. for in方法for(var key in array)—key作為數(shù)組下標array為數(shù)組對象

    但盡量不要使用for in循環(huán)

  2. IE瀏覽器不支持abbr(縮略符)

  3. document.getElementsByTagName()獲取元素時--判斷是否具有該元素并就有想要的元素屬性

  4. 獲取某個元素節(jié)點里面的子節(jié)點時--注意換行符利用NodeType判斷1 2 3

  5. 通配符---配合document.getElementByTagName()使用時,括號內會返回所有的子元素

  6. 現(xiàn)有信息檢索并重新顯示出來:

檢索提?。篸ocument.getElementById();

Document.getElementsByTagName();

Element.getAttribute();

重新添加:document.createElement();

Document.createTextNode();

appendChild();

insertBefore();

setAttribute();

第九章:js改變變現(xiàn)層(樣式)

  1. 減號(-)加號(+)操作符—在element.style.font-size中,-被認為是分割符,font-size會被分開識別。

  2. DOM采用Camel記號--想表示font-size或者background-color等等時省略空格符。

  3. 單位值得變化—除Color樣式的例外情況:color值文本段的十六進制會變成RGB

  4. 不提倡直接添加,而是更改className屬性—進行判斷,className值為空則直接賦值:

element.className=className;不為空則:element.className+=className。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 前言 歸根結底,代碼都是思想和概念的體現(xiàn)。沒人能把一種程序設計語言的所有語法和關鍵字都記住,可以查閱參考書來解決。...
    朱細細閱讀 3,136評論 4 14
  • 原文 鏈接 關注公眾號獲取更多資訊 一、基本類型介紹 1.1 Node類型 DOM1級定義了一個Node接口,該接...
    前端進階之旅閱讀 4,062評論 7 34
  • 《小詩》風云榜每周發(fā)布,敬請大家關注。 本周上榜詩作: 1. 《孕育》 作者:王子魚 秋水簡評:離開母體,我們卻一...
    秋水飲馬閱讀 778評論 43 37
  • 坐定古廟處,靜聽古寺鐘聲悠揚,余音穿越了無數(shù)靜心,靜物,靜境! 于是,顆顆凡心離市俗漸行漸遠,似乎與萬事萬物通體,...
    鐘陽書閱讀 615評論 0 4

友情鏈接更多精彩內容