基礎(chǔ)語法(對(duì)象)

1.什么是對(duì)象 - 和python中的對(duì)象一樣，擁有屬性和方法
2.創(chuàng)建對(duì)象
a.創(chuàng)建對(duì)象字面量
對(duì)象的字面量:{屬性名1:屬性值1，屬性名2:屬性值2}
注意：當(dāng)屬性是普通值，我們叫這個(gè)屬性為對(duì)象屬性，當(dāng)屬性值是函數(shù)這個(gè)屬性就是對(duì)象方法
例如：p1 = {name: '周海龍',age: 18, eat:function(food){
console.log(name + '在吃' + food)
}}
b.通過構(gòu)造方法來創(chuàng)建對(duì)象
聲明構(gòu)造方法(類似python聲明類) - 聲明一個(gè)函數(shù)，使用函數(shù)名來作為類名
在函數(shù)中通過this關(guān)鍵字來添加對(duì)象屬性和對(duì)象方法

• 構(gòu)造方法的函數(shù)名，首字母大寫
  this類似python中的self
  通過構(gòu)造方法創(chuàng)建對(duì)象
• 對(duì)象=new 構(gòu)造方法()

function  Person(name = '張三',age = 10, sex = '男'){
        this.name = name
        this.age = age
        this.sex =sex
        添加對(duì)象方法
        this.eat = function(food){
                console.log(this.name + '再吃' + food)
}
         返回對(duì)象
         return  this
}

//sort方法排序后，原數(shù)組會(huì)改變，也會(huì)產(chǎn)生新的數(shù)組
    console.log(student.sort(function(a,b){
        return a.score - b.score
    }))

DOM獲取節(jié)點(diǎn)

1.什么是DOM(文檔對(duì)象模型)
DOM是document-object-model
DOM模型就是一個(gè)樹結(jié)構(gòu)，里面是由各種節(jié)點(diǎn)組成
2.document對(duì)象 - js寫好的一個(gè)對(duì)象，代表的是網(wǎng)頁內(nèi)容結(jié)構(gòu)
通過document對(duì)象可以拿到網(wǎng)頁中所有內(nèi)容對(duì)應(yīng)的節(jié)點(diǎn)
3.獲取節(jié)點(diǎn)(在js中獲取網(wǎng)頁中的標(biāo)簽)

節(jié)點(diǎn)操作

1.直接獲取節(jié)點(diǎn)
a.通過標(biāo)簽的id值來獲取指定的標(biāo)簽
document.getElementById(id值) - 返回節(jié)點(diǎn)對(duì)象
如果html中同樣的id對(duì)應(yīng)的標(biāo)簽有多個(gè)，只會(huì)取一個(gè)，所以一般在使用id的時(shí)候，id要唯一
b.通過標(biāo)簽名來取指定的標(biāo)簽
document.getElementsTagName(標(biāo)簽名) - 返回的是一個(gè)數(shù)組對(duì)象，數(shù)組中是節(jié)點(diǎn)

var aNode = document.getElementsByTagName('a')
     for(x in aNode){
        //拿到aNode對(duì)象中的所有屬性，這兒除了a標(biāo)簽以外還有l(wèi)ength，item
        //等其他非標(biāo)簽
        aNode1 = aNode[x]
        //只對(duì)標(biāo)簽進(jìn)行操作
        if(typeof(aNode1) == 'object'){
            console.log(aNode,'是標(biāo)簽')
        }
     }

c.通過類名來獲取指定的標(biāo)簽
document.getElementsByName(類名) - 獲取所有class屬性值是指定的值的標(biāo)簽，返回一個(gè)數(shù)組對(duì)象

間接獲取節(jié)點(diǎn)

1.獲取父節(jié)點(diǎn)
子節(jié)點(diǎn).parentElement - 獲取子節(jié)點(diǎn)對(duì)應(yīng)的父節(jié)點(diǎn)
2.獲取子節(jié)點(diǎn)
a.獲取所有的子節(jié)點(diǎn)
父節(jié)點(diǎn).children - 返回一個(gè)數(shù)組對(duì)象
父節(jié)點(diǎn).childNodes - 獲取父節(jié)點(diǎn)下所有的內(nèi)容(包括子節(jié)點(diǎn)和文本)
b.獲取第一個(gè)子節(jié)點(diǎn)
父節(jié)點(diǎn).firstElementChild
c獲取最后一個(gè)節(jié)點(diǎn)
父節(jié)點(diǎn).lastElementChild

DOM創(chuàng)建添加和刪除節(jié)點(diǎn)

獲取標(biāo)簽內(nèi)容
標(biāo)簽節(jié)點(diǎn).innerHTML
標(biāo)簽節(jié)點(diǎn).innertext
修改標(biāo)簽內(nèi)容
標(biāo)簽節(jié)點(diǎn).innerHTML = '修改的內(nèi)容'
獲取標(biāo)簽樣式的文字顏色
標(biāo)簽節(jié)點(diǎn).style.color

創(chuàng)建節(jié)點(diǎn)

document.createElement(標(biāo)簽名) - 創(chuàng)建指定標(biāo)簽節(jié)點(diǎn)（創(chuàng)建后不會(huì)自動(dòng)添加到瀏覽器上）
a.節(jié)點(diǎn)屬性
創(chuàng)建節(jié)點(diǎn)就是標(biāo)簽對(duì)象，可以通過document去網(wǎng)頁中獲取到，也可以自己創(chuàng)建，標(biāo)簽對(duì)象中有相關(guān)屬性，可以通過標(biāo)簽節(jié)點(diǎn)獲取或者修改這些屬性
例如：a標(biāo)簽節(jié)點(diǎn)有：href屬性，id屬性，className屬性，style屬性等等
img標(biāo)簽節(jié)點(diǎn)有：src屬性，id屬性，style屬性，alt屬性，title屬性
b innerHTML和innertext屬性
innerHTML - 雙標(biāo)簽的標(biāo)簽內(nèi)容(包含其他標(biāo)簽)
innertext - 雙標(biāo)簽的標(biāo)簽內(nèi)容(側(cè)重只有內(nèi)容)
2.添加節(jié)點(diǎn)
a.在指定的標(biāo)簽中的最后添加一個(gè)節(jié)點(diǎn)
父節(jié)點(diǎn).appendChild(需要添加的節(jié)點(diǎn))

var div1Node = document.getElementById('div1')
        function btn(){
            var divNode = document.createElement('div')
            divNode.innerText = '我是box1'
            div1Node.appendChild(divNode)   
        }

b.在指定的節(jié)點(diǎn)前插入一個(gè)節(jié)點(diǎn)
父節(jié)點(diǎn).insertBefore(新節(jié)點(diǎn),指定節(jié)點(diǎn)) ---在父節(jié)點(diǎn)中的指定節(jié)點(diǎn)前插入新節(jié)點(diǎn)
3.刪除節(jié)點(diǎn)
父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn)) - 刪除父節(jié)點(diǎn)中指定的子節(jié)點(diǎn)
標(biāo)簽節(jié)點(diǎn).innerHTML = null - 清空標(biāo)簽(刪除所有的子標(biāo)簽)
//隱藏該節(jié)點(diǎn)
div1Node.style.display = 'none'
節(jié)點(diǎn).remove() - 將節(jié)點(diǎn)從瀏覽器中刪除