DOM基礎(chǔ)

//1,獲取指定標(biāo)簽

//通過id查找對應(yīng)的元素節(jié)點,返回一個具體的元素節(jié)點

var one= document.getElementById("one");

//通過class名查找對應(yīng)的元素節(jié)點,返回一個 包含元素節(jié)點的數(shù)組

var ones= document.getElementsByClassName("son");

//通過標(biāo)簽查找對應(yīng)的元素節(jié)點,返回一個 包含元素節(jié)點的數(shù)組

var divs? = document.getElementsByTagName("div");

//通過選擇器獲取查找元素節(jié)點 返回一個包含元素節(jié)點的數(shù)組

var divall= document.querySelectorAll(".fat .son");

//通過選擇器獲取查找元素節(jié)點 返回一個包含元素節(jié)點,只返回找到的第一個

var divsel= document.querySelector(".fat .son");

//特殊的節(jié)點

//1,document 文檔節(jié)點

console.log(document);

//2,html 節(jié)點

console.log(document.documentElement);

//3,body 節(jié)點

console.log(document.body);

//4,head 節(jié)點

console.log(document.head);

//5,聲明節(jié)點

console.log(document.doctype);

//2,創(chuàng)建新的標(biāo)簽

var imgM= document.createElement("img");

imgM.src= "img/1.jpg";

imgM.width= "300";

//3,添加標(biāo)簽

var conDiv= document.getElementById("container");

//(1)A.appendChild(B) :將B元素添加到A元素內(nèi)部的后邊 A 和 B 是父子關(guān)系

conDiv.appendChild(imgM);

//(2) A.insertBefore(B,C) 將B元素添加到 A元素中 C元素的前邊.A 和 B,C 是父子關(guān)系

var linkm= document.createElement("a");

linkm.innerText= "圖片";

linkm.innerHTML+= "拼在后邊";

var txt=document.createTextNode("最后邊");

linkm.appendChild(txt);

linkm.href= "###";

conDiv.insertBefore(linkm,imgM);

//4,替換標(biāo)簽

var pM= document.createElement("p");

pM.innerHTML= "P";

//A.replaceChild(B,C) 用B元素 替換A元素中的C 元素

conDiv.replaceChild(pM,imgM);

//5,移除標(biāo)簽

//A.removeChild(B):移除A元素中的B元素

conDiv.removeChild(linkm);


//一: 設(shè)置屬性

//第1種設(shè)置方式

// div.id = "oneDiv";

// div.className = "oneDiv";

//第2種設(shè)置方式

div.setAttribute("id","oneDiv");

div.setAttribute("class","oneDiv");

//二: 獲取屬性

//第一種獲取方式

console.log(div.id);

console.log(div.className);

//第二種獲取方式

console.log(div.getAttribute("id"));

console.log(div.getAttribute("class"));

//判斷元素是否擁有某一個屬性

var rel= div.hasAttribute("id");

if(rel){

console.log(div.getAttribute("id"));

}

//其他獲取操作

//(1)子節(jié)點

var childs= div.childNodes;

console.log(childs);

//(2)父節(jié)點

var parent= div.parentNode;

console.log(parent);

//(3)上一個兄弟節(jié)點

var sib= div.previousSibling;

console.log(sib);

//(4)下一個兄弟節(jié)點

var nextSib= div.nextSibling;

console.log(nextSib);

//(5)div 標(biāo)簽的節(jié)點名(大寫形式放回當(dāng)前元素節(jié)點名)

var name= div.nodeName;

console.log(name);

//(6)標(biāo)簽的克隆

//A.cloneNode(deep):克隆A標(biāo)簽,并返回.?

/*deep 是一個布爾值:

* ture 同時克隆A標(biāo)簽中的內(nèi)容及子元素

* false 只克隆當(dāng)前A標(biāo)簽

*?

*/

var val= div.cloneNode(true);

document.body.appendChild(val);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末梁丘,一起剝皮案震驚了整個濱河市析既,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌寇窑,老刑警劉巖戏锹,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異骤公,居然都是意外死亡堕义,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門桂对,熙熙樓的掌柜王于貴愁眉苦臉地迎上來甩卓,“玉大人,你說我怎么就攤上這事蕉斜∮馐粒” “怎么了?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵宅此,是天一觀的道長鹿寻。 經(jīng)常有香客問我,道長诽凌,這世上最難降的妖魔是什么毡熏? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮侣诵,結(jié)果婚禮上痢法,老公的妹妹穿的比我還像新娘。我一直安慰自己杜顺,他們只是感情好财搁,可當(dāng)我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著躬络,像睡著了一般尖奔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上穷当,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天提茁,我揣著相機與錄音,去河邊找鬼馁菜。 笑死茴扁,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的汪疮。 我是一名探鬼主播峭火,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼智嚷!你這毒婦竟也來了卖丸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤盏道,失蹤者是張志新(化名)和其女友劉穎稍浆,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡粹湃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年恐仑,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片为鳄。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡裳仆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出孤钦,到底是詐尸還是另有隱情歧斟,我是刑警寧澤,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布偏形,位于F島的核電站静袖,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏俊扭。R本人自食惡果不足惜队橙,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望萨惑。 院中可真熱鬧捐康,春花似錦、人聲如沸庸蔼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽姐仅。三九已至花枫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間掏膏,已是汗流浹背劳翰。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留壤追,地道東北人磕道。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像行冰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子伶丐,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,086評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品悼做,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式哗魂。簡單...
    舟漁行舟閱讀 7,771評論 2 17
  • DOM基礎(chǔ) 第一章:DOM概述 1.1DOM以及節(jié)點概念 ? 文檔對象模型DOM(Document Object ...
    LinDaiDai_霖呆呆閱讀 231評論 0 0
  • 單例模式 適用場景:可能會在場景中使用到對象肛走,但只有一個實例,加載時并不主動創(chuàng)建录别,需要時才創(chuàng)建 最常見的單例模式朽色,...
    Obeing閱讀 2,073評論 1 10
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5邻吞? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,490評論 1 45
  • 之前通過深入學(xué)習(xí)DOM的相關(guān)知識葫男,看了慕課網(wǎng)DOM探索之基礎(chǔ)詳解篇這個視頻(在最近看第三遍的時候抱冷,準(zhǔn)備記錄一點東西...
    微醺歲月閱讀 4,485評論 2 62