<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM1</title>
<style type="text/css">
.first{
background: red;
}
</style>
</head>
<body>
<div class="first"><!--我是一個(gè)注釋-->
我是一段文字
<span>我是一個(gè)標(biāo)簽</span></div>
</body>
<script type="text/javascript">
//節(jié)點(diǎn)樹
//節(jié)點(diǎn)樹就是我們所看到的用標(biāo)簽組成的一級(jí)一級(jí)的結(jié)構(gòu),可以稱之為節(jié)點(diǎn)樹锁右,
// 每個(gè)標(biāo)簽都可以稱之為一個(gè)節(jié)點(diǎn)
//節(jié)點(diǎn)不單單指標(biāo)簽,節(jié)點(diǎn)包括文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)、標(biāo)簽節(jié)點(diǎn) 每種節(jié)點(diǎn)的類型都不一樣校哎。
//(換行也算做是一個(gè)文本節(jié)點(diǎn))
var div=document.querySelector(".first");
var body = document.querySelector("body");
console.log(div);
// childNodes所有的子節(jié)點(diǎn)悟狱。
console.log(div.childNodes);
//children 所有標(biāo)簽類型的子節(jié)點(diǎn)
console.log(div.children);
//t代表的是div的第一個(gè)標(biāo)簽節(jié)點(diǎn),span
var t = div.children[0];
t.innerHTML="child人";
//使用className可以覆蓋節(jié)點(diǎn)原來的類名揍拆,可以使用+=空格,類名 來添加類
div.className +=" asd";
//這種刪除類名的方式很有問題
div.className=div.className.replace("asd","");
var a=document.createElement('a');
a.innerHTML="去哪里";
a.href="#";
// div.appendChild(a);
// div.insertBefore(a,div.childNodes[0]);
// cloneNode復(fù)制標(biāo)簽茶凳,那個(gè)元素調(diào)用這個(gè)函數(shù)嫂拴,就復(fù)制哪個(gè)標(biāo)簽
// ,true代表深復(fù)制,會(huì)賦值子節(jié)點(diǎn)樹,false代表淺復(fù)制,只復(fù)制節(jié)點(diǎn)本身
// var cDiv = div.cloneNode(true);
// body.appendChild(cDiv);
//節(jié)點(diǎn)的屬性。
// div.index = 10;
// console.log(div.index);
// div.ccc=100;
// console.log(div.ccc);
//
// div.setAttribute('ddd',234);
// console.log(div.getAttribute('ddd'));
console.log(div.style.background);
// 獲取計(jì)算后樣式,正常的元素.style只能獲取到行間里面的樣式,想要獲取CSS里面的樣式
// 需要用到以下方法
//IE
// console.log(div.currentStyle.background)
//非IE
// console.log(getComputedStyle(div,null).background);
//瀏覽器兼容
function getstyle (key,element) {
if(element.currentStyle){
return element.currentStyle[key];
}else{
return getComputedStyle(element)[key];
}
}
console.log(getstyle("background",div));
</script>
</html>
DOM
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門寒跳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來聘萨,“玉大人,你說我怎么就攤上這事童太∶追” “怎么了胸完?”我有些...
- 文/不壞的土叔 我叫張陵,是天一觀的道長翘贮。 經(jīng)常有香客問我赊窥,道長,這世上最難降的妖魔是什么狸页? 我笑而不...
- 正文 為了忘掉前任锨能,我火速辦了婚禮,結(jié)果婚禮上芍耘,老公的妹妹穿的比我還像新娘址遇。我一直安慰自己,他們只是感情好齿穗,可當(dāng)我...
- 文/花漫 我一把揭開白布傲隶。 她就那樣靜靜地躺著饺律,像睡著了一般窃页。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上复濒,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼唇礁!你這毒婦竟也來了勾栗?” 一聲冷哼從身側(cè)響起,我...
- 序言:老撾萬榮一對(duì)情侶失蹤盏筐,失蹤者是張志新(化名)和其女友劉穎围俘,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體琢融,經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡界牡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了漾抬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宿亡。...
- 正文 年R本政府宣布坤按,位于F島的核電站毯欣,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏臭脓。R本人自食惡果不足惜酗钞,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望来累。 院中可真熱鬧砚作,春花似錦、人聲如沸嘹锁。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽领猾。三九已至米同,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間摔竿,已是汗流浹背面粮。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長得像袁翁,于是被迫代替她去往敵國和親柴底。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- HTML 學(xué)習(xí)筆記 May 15冗恨,2017 dom編程開山篇答憔、dom編程實(shí)例(烏龜抓雞)、bom介紹.dom對(duì)象層...
- 原文鏈接:http://reactkungfu.com/2015/10/the-difference-betwee...
- DOM 變化 如何確認(rèn)瀏覽器是否支持 DOM 2 和 DOM 3 新增的模塊:var supportsDOM2Co...
- 在之前的幾篇文章里掀抹,我們討論了MINA的一些原理虐拓。晚上在想著怎么結(jié)合Vux + Virtual Dom實(shí)現(xiàn)一個(gè)名為...