一個(gè)節(jié)點(diǎn)對象初始就有很多屬性和方法,這些屬性和方法是JavaScript原本就賦予給這個(gè)對象的,我們要做的就是操作這些屬性或者方法,那操作就分讀取和寫
一.JavaScript標(biāo)簽屬性
標(biāo)簽屬性是我們學(xué)過的一些標(biāo)簽屬性 id class name type等等的
1.標(biāo)簽屬性(合法標(biāo)簽屬性)? ?id?class?name...
????1.操作方式通過鏈?zhǔn)?點(diǎn)操作
????????<div id="wrap" class="content"></div>
? ? ? ? <script>
????????????????let oDiv = document.getElementsByTagName("div")[0]
????????????????oDiv.id = "list" //更改元素的ID名
????????</script>
???????2.特殊屬性?class??操作的時(shí)候是?className
? ? ? ? ? ? ? ? ? src屬性不能拿來做判斷
? ? ? ? ? ? ? ? ? ?color不能做判斷
????????????<div id="wrap" class="content"></div>
????????????<img src=""></img>
? ? ? ? ? ? <script>
????????????????????let oDiv = document.getElementsByTagName("div")[0]
????????????????????oDiv.className = "list" //更改元素的class類名
????????????????????let oImg = document.getElementsByTagName("img")[0]
? ? ? ? ????? ? ? ? console.log(oImg.src)//我們添加的是一個(gè)相對路徑,打印的卻是一個(gè)絕對路徑
????????????</script>
????????3.變量被賦值這個(gè)對象節(jié)點(diǎn)之后,這個(gè)節(jié)點(diǎn)對象其他屬性發(fā)生改變,這個(gè)變量還是代表這個(gè)獲取的對象
????????????<div id="wrap" class="content"></div>
????????????<script>
????????????????????let oWrap = document.getElementById("wrap")
????????????????????oWrap.className = "list" //更改元素的class類名
????????????????????oWrap.innerHTML = 123
????????????????????let aContent = document.getElementsByClassName("content")
? ? ? ? ? ? ? ? ? ? aContent.id = "text"
????????????????????aContent.innerHTML = 456
????????????</script>
? ? ? ? 4.變量被賦值這個(gè)對象節(jié)點(diǎn)之后,這個(gè)節(jié)點(diǎn)對象此屬性發(fā)生改變
? ? ? （1）靜態(tài)獲取??getElementById??????querySelector???????querySerletorAll
????????????改變此對象屬性值之后,獲取該對象的變量依然可以使用,不會(huì)因?yàn)楦淖冑x值對象節(jié)點(diǎn)對應(yīng)屬性而無法使用
????????????<div id="wrap" class="content"></div>
????????????<script>
????????????????????let oWrap = document.getElementById("wrap")
????????????????????oWrap.id = "list"
????????????????????oWrap.innerHTML = 123
????????????</script>
? ? ? （2）動(dòng)態(tài)獲取?getElementsByClassName?????getElementsByTagName???????getElementsByName
????????????改變此對象屬性值之后,獲取該對象的變量不可以使用,會(huì)因?yàn)楦淖冑x值對象節(jié)點(diǎn)對應(yīng)屬性而無法使用
? ? ? ? <div id="wrap" class="content"></div>
????????<script>
????????????????let oContent = document.getElementsByClassName("content")[0]
????????????????oWrap.className = "text"
????????????????oWrap.innerHTML = 123//不會(huì)生效
????????</script>
動(dòng)態(tài)獲取解決辦法：
? ? ? ? 轉(zhuǎn)換地址??單獨(dú)處理放在一個(gè)變量中
????????<ul>
????????????<li class="list"></li>
????????????<li class="list"></li>
????????</ul>
? ? ? ? <script>
???????????????let aList = document.getElementsByClassName("list")
????????????????let x = aList[0]
????????????????aList[0].className = "text"
????????????????aList[0].innerHTML = 123
????????????????x.innerHTML = 456
????????</script>
2.標(biāo)簽自定義屬性（不合法屬性）
標(biāo)簽不具有的屬性,程序員人為添加的屬性
<div id="wrap" class="content" marray="no"></div>
<script>
????????let oContent = document.getElementsByClassName("content")[0]
????????oContent.age = "18"
????????console.log(oContent.marray) //undefind
</script>
（1）添加自定義屬性?setAttribute("屬性名","值")
<div id="wrap" class="content"></div>
<script>
????????let oContent = document.getElementsByClassName("content")[0]
????????oContent.setAttribute("age",18)
</script>
（2）得到自定義屬性?getAttribute("屬性名")
<div id="wrap" class="content" marray="no"></div>
<script>
????????let oContent = document.getElementsByClassName("content")[0]
????????console.log(oContent.getAttribute("marray"))
</script>
（3）移除屬性名?removeAttribute("屬性名")
<div id="wrap" class="content" marray="no"></div>
<script>
????????let oContent = document.getElementsByClassName("content")[0]
????????oContent.removeAttribute("marray")
</script>
二型檀、JavaScript對象屬性
對象屬性是我們JavaScript內(nèi)置的一些屬性,像我們的 innerHTML 各種事件等等
1.對象自帶屬性
? ??console.dir()?查看對象自帶的js屬性
<div></div>
<script>
????????let oDiv = document.getLementsByTagName('div')[0]
????????console.dir(oDiv)//查看對象自帶的JS屬性
</script>
2.對象自定義屬性
????內(nèi)置的JS對象上不具有的,我們自己添加的,通過console.dir也是能打印出來的
? ??對象.屬性名 = 值
<div></div>
<script>
????????let oDiv = document.getLementsByTagName('div')[0]
????????oDiv.love = "dajia"
????????console.dir(oDiv)//查看對象自帶的JS屬性
</script>
三.+號的初步認(rèn)識
?+號
????????????????1.數(shù)字相加還是數(shù)字（number）
????????????????2.字符串相加叫拼接
????????????????3.+=???X=X+1
????????????????????????X+=1
????????????????4.變量在已經(jīng)賦值使用時(shí)?不能加引號包裹(字符串)
????????????????5.字符串和變量拼接?引號一定要前后配對?變量前后是加號作為分割點(diǎn)
????????????ES6：
????????????????模板字符串
????????????????????`內(nèi)容${變量}內(nèi)容`
????<style>
????????#wrap{
????????????width:?100px;
????????????height:?100px;
????????????background-color:pink;
????????}
????</style>
????<div?id="wrap"></div>
????<script>
????????let?x?=?'1'
????????let?y?=?2
????????console.log(x+y)
????????let?oWrap?=?document.getElementById("wrap")
????????????oWrap.onclick?=?function()?{
????????????????//oWrap.innerHTML?+=?123
????????????????//oWrap.innerHTML?+=?"<p></p>"
????????????????//oWrap.innerHTML?+=?"<p>"?+?y?+?"</p>"
????????????????//oWrap.innerHTML?+=?"<p?style=?'width:200px;background-color:red;'>"?+?y?+?"</p>"
????????????????oWrap.innerHTML?+=?`<p?style=?"width:200px;background-color:red;">${y}</p>`
????????????}
????</script>
四.css樣式操作
1.改變元素樣式方法外部樣式 內(nèi)部樣式 行內(nèi)樣式
????外部樣式:單純的JS不能操作外部樣式
????內(nèi)部樣式:JS可以操作HTML頁面任何元素,可以操作style標(biāo)簽
????行內(nèi)樣式:JS操作元素樣式最常用方法,標(biāo)簽的自帶屬性style 通過點(diǎn)操作 元素.style.css屬性 = "屬性值"
<div id="wrap">123</div>
<script>
? ????????? let oWrap = document.getElementById("wrap")
?????? ???? oWrap.style.color = "red"http://單個(gè)屬性
????????????oWrap.style.cssText = "font-size:25px;font-weight:bold;"http://多個(gè)屬性
</script>
注意:
????1.分樣式用駝峰寫法
????<script>
????????????oWrap.backgroundColor = "blue"
????</script>
????2.個(gè)別樣式有兼容以及保留字css屬性
????<script>
????????????oWrap.style.cssFloat?=?"right"
????</script>
2.通過添加類名改變樣式
可以在內(nèi)部樣式把css樣式寫好,通過添加類名的方式
???<style>
???????#wrap{
????????????width:?100px;
????????????height:?100px;
????????????background-color:pink;
????????}
????</style>
????<div?id="wrap"></div>
????<script>
? ? ? ? //?oWrap.onclick=function(){
????????// oWrap.className="content"
????????//?}
==
????????oWrap['onclick']=function(){
????????????oWrap.className="content"
????????}?
????</script>
