首先我們先不討論css 先看下如何獲取dom節(jié)點(diǎn)
- 獲取子節(jié)點(diǎn)
Element.childElementCount獲取子元素的個(gè)數(shù)誓军。child兒子疲扎，Element元素椒丧，Count數(shù)量
<div class="box">
1
<p>2</p>
<p>3</p>
<p>4</p>
<p class="four">5</p>
</div>
<script>
var oP = document.querySelector('.box')
console.log( oP )/*
<div class="box">
1
<p>2</p>
<p>3</p>
<p>4</p>
<p class="four">5</p>
</div>
*/
//元素是一個(gè)對(duì)象壶熏，對(duì)象上有一個(gè)屬性叫做childElementCount，保存了當(dāng)前元素有幾個(gè)子元素
console.log( oP.childElementCount )//4
console.log( oP.childNodes )//NodeList(9) [text, p, text, p, text, p, text, p.four, text]
</script>
打印的結(jié)果是4精盅，這里我們發(fā)現(xiàn)叹俏，沒(méi)有被包裹在任何標(biāo)簽里的1并沒(méi)有被算在里邊她肯，因?yàn)樗?code>childElementCount(獲取子元素?cái)?shù)量)，而孤零零的這個(gè)1并不是子元素康嘉。
那怎么能獲取到這個(gè) 1 呢 接下來(lái)我們個(gè)方法 叫做Element.childNodes獲取子節(jié)點(diǎn)
那么有小伙伴會(huì)問(wèn)啦何為節(jié)點(diǎn)亭珍？
元素里的標(biāo)簽阻荒，文本包括換行的空格都是節(jié)點(diǎn)
//代碼承接上一部分
console.log( oP.childNodes )/*
NodeList(9) [text, p, text, p, text, p, text, p.four, text]
length: 9
0: text 點(diǎn)開(kāi)這個(gè)會(huì)發(fā)現(xiàn)是1
1: p
2: text 空
3: p
4: text 空
5: p
6: text 空
7: p.four
8: text 空
*/
上邊的例子中侨赡，第一個(gè)text是1羊壹，然后我們發(fā)現(xiàn)每個(gè)p標(biāo)簽之間都多了一個(gè)text(文本節(jié)點(diǎn))油猫，把text(文本節(jié)點(diǎn))點(diǎn)開(kāi)發(fā)現(xiàn)是空的什么都沒(méi)有柠偶，這個(gè)空text來(lái)源于p標(biāo)簽之間的換行毡证。
<div class="box">1<p>2</p><p>3</p><p>4</p><p class="four">5</p></div>
如果我們這樣寫(xiě)的話 那些空就會(huì)消失
接下來(lái)我們看 如何精確的獲取子元素
Element.children 某個(gè)元素的所有子元素列表
console.log( oP.children )//HTMLCollection(4) [p, p, p, p.four]
這樣就可以精確的獲取子元素啦
-
Element.firstChild元素的第一個(gè)子節(jié)點(diǎn)(注意哈情竹，這里是節(jié)點(diǎn))：
console.log( oP.firstChild )//"1"
-
Element.firstElementChild元素的第一個(gè)子元素(注意哈秦效，這里是元素)：
console.log( oP.firstElementChild )//<p>2</p>
-
Element.lastChild元素的第一個(gè)子節(jié)點(diǎn)(注意哈，這里是節(jié)點(diǎn))：
console.log( oP.lastChild )//text 點(diǎn)開(kāi)是個(gè)空的挑秉，因?yàn)樽詈笠粋€(gè)p標(biāo)簽和div的結(jié)束標(biāo)簽之間有換行
-
Element.lastElementChild元素的第一個(gè)子元素：
console.log(oP.lastElementChild)//<p class="four">5</p>
-
Element.removeChild(node)刪除子節(jié)點(diǎn)(注意是子節(jié)點(diǎn)犀概，不是元素)，會(huì)把被刪除的節(jié)點(diǎn)返回出來(lái)产喉，因此我們可以用變量接受也可以直接打釉颉：
//除了上邊這種方法以外塞俱，我們還可以：
console.log( oP.removeChild(oP.childNodes[0]) )//"1",頁(yè)面中的1也被刪除了
? 假如我想刪除一個(gè)元素怎么辦：
//依舊是先獲取再刪除障涯，加入說(shuō)我們現(xiàn)在想刪除<p class="four">5</p>
var node = document.querySelector('.box > .four')
console.log( oP.removeChild(node) )//<p class="four">5</p>,刪除了這個(gè)p標(biāo)簽像樊，同時(shí)把他返回給了我們
? 上邊講的方法對(duì)我們的6個(gè)選擇器都有效生棍。
? 那么上邊主要是對(duì)子元素進(jìn)行的一些操作涂滴，除此之外我們還可以獲取到父元素柔纵。
-
Element.parentNode：獲取父節(jié)點(diǎn):
var four = document.querySelector('four')
console.log( four.parentNode )//可以獲取到four的父元素及父元素里的所有內(nèi)容提供，因?yàn)楦腹?jié)點(diǎn)只有一個(gè)所以返回給我們的不是列表郭计，而直接是這個(gè)元素
-
Element.previousSibling元素的上一個(gè)節(jié)點(diǎn)(節(jié)點(diǎn)Ｕ焉臁梧乘！)，previous上一個(gè)庐杨，sibling兄弟：
<body>
<div>1</div>
<div class="box">2</div>
<div>3</div>
<div>4</div>
</body>
<script>
var box = document.querySelector('.box')
console.log( box.previousSibling )//text 點(diǎn)開(kāi)以后是一個(gè)空字符串选调，這個(gè)空字符串來(lái)源于元素間的換行
</script>
-
Element.previousElementSibling元素的上一個(gè)兄弟元素，previous上一個(gè)灵份，sibling兄弟：
console.log( box.previousElementSibling )//<div>1</div>
? 假設(shè)這個(gè)元素已經(jīng)是第一個(gè)了仁堪，那么：
var first = document.querySelector('div')
console.log( first )//<div>1</div>
console.log( first.previousElementSibling )//null
-
Element.nextSibling獲取元素的下一個(gè)節(jié)點(diǎn)(節(jié)點(diǎn)！各吨！)枝笨，next下一個(gè)，sibling兄弟：
console.log( box.nextSibling )//#text 點(diǎn)開(kāi)以后是一個(gè)空字符串揭蜒，這個(gè)空字符串來(lái)源于元素間的換行
-
Element.nextElementSibling獲取元素的下一個(gè)兄弟元素：
console.log( box.nextElementSibling )//<div>3</div>
-
Element.hasChildNodes()父元素是否有子節(jié)點(diǎn)，有返回true，沒(méi)有返回false萨脑，傳參無(wú)效：
<body>
<div class="one"></div>
<div class="two">
</div>
<div class="three">1</div>
<div class="four">
<p></p>
</div>
</body>
<script>
var one = document.querySelector('.one')
console.log( one.hasChildNodes() )//false
var two = document.querySelector('.two')
console.log( two.hasChildNodes() )//true鹊杖，換行是空白節(jié)點(diǎn)
var three = document.querySelector('.three')
console.log( three.hasChildNodes() )//true ,1是three下的節(jié)點(diǎn)
var four = document.querySelector('.three')
console.log( four.hasChildNodes() )//true
</script>
-
Element.append()添加子節(jié)點(diǎn)(可以是文本節(jié)也可以是元素)登下，append追加：
<body>
<div class="one">hello</div>
<div class="two"></div>
</body>
<script>
var one = document.querySelector('.one'),
two = document.querySelector('.two')
console.log( one )//<div class="one">hello</div>
console.log( two )//<div class="tow"></div>
two.append(one)//把class為one的div添加到class為two的div中筐钟，也就是說(shuō)給.two添加一個(gè)子元素壹将，這個(gè)子元素添加在最后
console.log( one )//<div class="one">hello</div> one并沒(méi)有消失，好好的存在頁(yè)面中
console.log( two )/*
<div class="two">
<div class="one">hello</div>
</div>
two中多了一個(gè)子元素，這個(gè)子元素是one
*/
//既然是節(jié)點(diǎn)，那么我添加一個(gè)字符串試試
two.append('someone')//報(bào)錯(cuò)，因?yàn)?someone'是一個(gè)字符串，不是一個(gè)文本節(jié)點(diǎn)，那么如何添加一個(gè)文本節(jié)點(diǎn)呢？請(qǐng)繼續(xù)往下看
</script>
-
document.createElement()創(chuàng)建一個(gè)元素密幔，create創(chuàng)造：
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')//<div class="box"></div>
var oP = document.createElement('p')//創(chuàng)建了一個(gè)p標(biāo)簽
oP.innerText = 'helloworld'//設(shè)置p標(biāo)簽里的文本
box.append(oP)//追加一個(gè)子元素
console.log(box)//<div class="box"><p>helloworld</p></div>偎箫，div中多了一個(gè)子元素p標(biāo)簽，在頁(yè)面中也能看到
//想生成什么標(biāo)簽就生成什么標(biāo)簽
</script>
-
document.createTextNode()創(chuàng)造文本節(jié)點(diǎn)：
<body>
<div class="hello">hello</div>
</body>
<script>
var hello = document.querySelector('.hello')
hello.append('world')//報(bào)錯(cuò)
var world = document.createTextNode('world')
hello.append(world)//不報(bào)錯(cuò)副硅，div標(biāo)簽里多了一個(gè)文本節(jié)點(diǎn)world培己，現(xiàn)在div里的內(nèi)容是helloworld
</script>
? 上邊的操作中我們可以創(chuàng)造一個(gè)元素茸炒，或者創(chuàng)造一個(gè)文本節(jié)點(diǎn)，然后添加到某個(gè)元素里囊陡，但是我們的網(wǎng)頁(yè)第一次在加載時(shí)是這樣的:js不算嘹害，把頁(yè)面中要顯示的內(nèi)容都讀完以后髓需，文檔就關(guān)閉了，然后我們用js去改變html的時(shí)候纳击，文檔就會(huì)重新打開(kāi)堡赔，所以我們要盡可能一次性的把js創(chuàng)造的元素一起添加進(jìn)某個(gè)地方。因此我們需要：
-
document.createDocumentFragment()創(chuàng)建文檔碎片F(xiàn)ragment(碎片)：
<body>
<div class="hello">hello</div>
</body>
<script>
//現(xiàn)在我們要?jiǎng)討B(tài)生成一個(gè)img標(biāo)簽耀盗，一個(gè)p標(biāo)簽史简，append（追加）到hello里
var hello = document.querySelector('hello'),
fragment = document.createDocumentFragment()
var img = document.createElement('img')//創(chuàng)建一個(gè)img標(biāo)簽
img.setAttribute = ('src', 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4254164563,3923686114&fm=26&gp=0.jpg')//設(shè)置src屬性
var p = document.createElement('p')//創(chuàng)建一個(gè)img標(biāo)簽
p.innerText = '吳彥祖'
fragment.append( img, p )
hello.append( fragment )//此時(shí)震庭，hello這個(gè)元素多了兩個(gè)子元素p和img拨拓，而且在頁(yè)面中也顯示了出來(lái)
</script>
? 在文檔中寫(xiě)入：
document.write('')，傳一個(gè)字符串作為參數(shù)，如果不是字符串則會(huì)被轉(zhuǎn)化為字符串脂新。如果字符串里包含了標(biāo)簽，會(huì)被轉(zhuǎn)化。會(huì)在body標(biāo)簽的最后寫(xiě)入。
<body>
<p>1</p>
<p>2</p>
</body>
<script>
//性能賊垃圾亥贸，最好不要用
document.write('<p>')
document.write('123')
document.write('456')
document.write('</p>')
document.write('<span>789</span>')
</script>
? 最后的顯示結(jié)果為：
<body>
<p>1</p>
<p>2</p>
<script>
//性能賊垃圾男韧，最好不要用
document.write('<p>')
document.write('123')
document.write('456')
document.write('</p>')
document.write('<span>789</span>')
</script>
<p>123456</p>
<span>789</span>
</body>
? 上邊的都是和html有關(guān)的知識(shí)鹃操，接下來(lái)我們看看css：
我們無(wú)法修改在style標(biāo)簽或者css文件里寫(xiě)入的css晶渠，我們添加的css屬性最后都會(huì)以行內(nèi)樣式顯示出來(lái)缚陷，這是一個(gè)巧妙的設(shè)計(jì)嚷节，因?yàn)樾袃?nèi)樣式不存在優(yōu)先級(jí)問(wèn)題。
-
window.getCompotedStyle(Element)返回元素計(jì)算后的樣式(也就是最終在頁(yè)面中顯示的樣式)虎锚，這是一個(gè)只讀屬性硫痰，也就意味著我們無(wú)法去改變里邊的值，只能拿到窜护。
<style>
.hello{
width: 100px;
height: 100px;
background-color: orange;
margin: 50px auto;
}
</style>
<body>
<div class="hello"></div>
</body>
<script>
var hello = document.querySelector('.hello')
console.log(hello)//<div class="hello"></div>
console.log(window.getComputedStyle(hello))//看到一個(gè)很大很大的對(duì)象
//如果我想獲取元素的寬度屬性效斑，直接加.width獲得
console.log( window.getComputedStyle(hello).width )//'100px'
//或者我可以直接聲明一個(gè)變量，保存下來(lái)
var width = window.getComputedStyle(hello).width
console.log( width )//'100px'
</script>
- 我們可以通過(guò)
Element.style.property柱徙，Element某個(gè)具體的元素缓屠，style樣式奇昙，property屬性名來(lái)給元素設(shè)置css樣式，不過(guò)最后css樣式會(huì)顯示在標(biāo)簽的style屬性里敌完。
hello.style.width = '300px'//此時(shí)我們看到元素的寬度變?yōu)?00px储耐，并且可以在控制臺(tái)里看到樣式被寫(xiě)在了元素的style標(biāo)簽里。
? 如果是已橫崗鏈接的屬性蠢挡，則要改成駝峰寫(xiě)法：
background-color css寫(xiě)法
backgroundColor js寫(xiě)法
hello.style.backgroundColor = 'purple'//顏色變成了紫色
hello.style.backgroungImage = 'url()'//設(shè)置背景圖片弧岳，注意！()不用添加引號(hào)
? 所有的屬性都可以通過(guò)這種形式設(shè)定业踏，但是有一個(gè)屬性比較特別禽炬，不能直接設(shè)置：
hello.style.float = 'left'//在ie瀏覽器下無(wú)效
//要寫(xiě)成
hello.style.cssFloat = 'left'//nice！生效
