千鋒教育JavaScript全套視頻教程(10天學(xué)會(huì)Js,前端javascrip

### window.onload
? ? 事件:延遲加載,該事件體內(nèi)的代碼需要整個(gè)頁(yè)面全部加載完后在執(zhí)行
### location --> 地址對(duì)象
### location.href --> 地址對(duì)象的讀寫屬性
### location.replace("跳轉(zhuǎn)地址"); //---也是地址跳轉(zhuǎn)
### location.reload(); ?//--- 刷新
### document.write("內(nèi)容"):將內(nèi)容打印至大白板
? ? 特點(diǎn):
? ? 1.如果一個(gè)字符串可以被解釋為HTML標(biāo)簽,則該字符串會(huì)以HTML標(biāo)簽的形式顯示在大白板
? ? 2.write方法出現(xiàn)在事件體內(nèi),會(huì)覆蓋原頁(yè)面
### document最大作用,獲取對(duì)象
### 獲取單個(gè)dom對(duì)象
### document.getElementById("id")
? ? 返回id對(duì)應(yīng)的元素
### document.querySelector("選擇器")
? ? 返回id,class,以及標(biāo)簽名對(duì)應(yīng)的單個(gè)元素
### 返回?cái)?shù)組
### document.getElementsByTagName("標(biāo)簽名")
? ? 返回標(biāo)簽名對(duì)應(yīng)的數(shù)組
### document.getElementsByClassName("類名")
? ? 返回類名對(duì)應(yīng)的數(shù)組
### document.getElementsByName("name名")
? ? 返回name名對(duì)應(yīng)的數(shù)組
### document.querySelectorAll("選擇器")
? ? 返回標(biāo)簽名和類名對(duì)應(yīng)的數(shù)組
### 注意事項(xiàng):document.querySelectorAll獲取的數(shù)組元素是靜態(tài)的,無(wú)法動(dòng)態(tài)刪除數(shù)組中已有的元素
### DOM節(jié)點(diǎn)的操作
### 父找子:
### firstElementChild
? ? 返回節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
### lastElementChild
? ? 返回節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
### children
? ? 返回父節(jié)點(diǎn)的所有子節(jié)點(diǎn) (元素節(jié)點(diǎn))
### childNodes
? ? 返回父節(jié)點(diǎn)的所有子節(jié)點(diǎn),返回的 (文本節(jié)點(diǎn)) 和 (元素節(jié)點(diǎn))
### 子找父
### parentNode
### 兄弟節(jié)點(diǎn):
### nextElementSibling
? ? 下一個(gè)節(jié)點(diǎn)
### previousElementSibling
? ? 上一個(gè)節(jié)點(diǎn)
### 節(jié)點(diǎn)的增刪
### 增----->
### 增加節(jié)點(diǎn)的第一種方法:掛載至子節(jié)點(diǎn)末尾
? ? 1.document.createElement("標(biāo)簽名") --> 創(chuàng)建一個(gè)標(biāo)簽
? ? 2.父節(jié)點(diǎn).appendChild(子節(jié)點(diǎn)) --> 將子節(jié)點(diǎn)掛載至父節(jié)點(diǎn)
### 增加節(jié)點(diǎn)的第二種方法:字符串拼接
? ? 父節(jié)點(diǎn).innerHTML = `html模板`
### 增加節(jié)點(diǎn)的第三種方法:指定位置插入節(jié)點(diǎn)
? ? 父節(jié)點(diǎn).insertBefore(目標(biāo)節(jié)點(diǎn),參照節(jié)點(diǎn)) --> 將目標(biāo)節(jié)點(diǎn)添加至參照節(jié)點(diǎn)之前
### 刪-----> 刪除節(jié)點(diǎn)只需要在需要?jiǎng)h除的節(jié)點(diǎn)后打點(diǎn)remove即可
? ? 節(jié)點(diǎn).remove();
### 在JS中,掌握的文本有value以及innerHTML
? ? value針對(duì)于表單元素
? ? innerHTML針對(duì)于標(biāo)簽
### innerText
? ? 只獲取文本內(nèi)容
### outerHTML
? ? 包含自身標(biāo)簽的所有內(nèi)容
### innerHTML
? ? 除了自身標(biāo)簽的所有內(nèi)容
### innerHTML的重要用途
? ? 通過(guò)字符串拼接頁(yè)面(依賴于瀏覽器字符串解析)
### DOM屬性操作
### (一) 普通屬性
? ? 1.點(diǎn)運(yùn)算符
? ? 2.getAttribute("屬性名") --> 獲取屬性值
? ? ? setAttribute("屬性名") --> 修改屬性值
? ? 3.添加自定義屬性
? ? ? ? 對(duì)象名.新屬性名 = 屬性值
### (二) style相關(guān)屬性
? ? 1.寫 對(duì)象名.style.屬性名 = 屬性值
? ? 2.讀 getComputedStyle(dom對(duì)象,false)["屬性名"]:屬性值
### (三) offset相關(guān)屬性
### offsetWidth ?--> 自身寬度
### offsetHeight --> 自身高度
### offsetLeft ? --> 距離父元素左側(cè)邊距
### offsetTop ? ?--> 距離父元素頂部邊距
### 注意:讀 --> 全都是以offset開頭的,返回值的結(jié)果都是數(shù)字
### 寫:和style的寫一毛一樣