【JS筆記】JavaScript語法《基礎(chǔ)+重點(diǎn)》知識內(nèi)容，快速上手（四）

這篇具有很好參考價值的文章主要介紹了【JS筆記】JavaScript語法《基礎(chǔ)+重點(diǎn)》知識內(nèi)容，快速上手（四）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

BOM / DOM（上）

BOM

BOM（Browser Object Model）：瀏覽器對象模型
其實(shí)就是操作瀏覽器的一些能力
我們可以操作哪些內(nèi)容
- 獲取一些瀏覽器的相關(guān)信息（窗口的大?。?/li>
- 操作瀏覽器進(jìn)行頁面跳轉(zhuǎn)
- 獲取當(dāng)前瀏覽器地址欄的信息
- 操作瀏覽器的滾動條
- 瀏覽器的信息（瀏覽器的版本）
- 讓瀏覽器出現(xiàn)一個彈出框（alert/confirm/prompt）
BOM 的核心就是 window 對象
window 是瀏覽器內(nèi)置的一個對象，里面包含著操作瀏覽器的方法

獲取瀏覽器窗口的尺寸

innerHeight 和 innerWidth

這兩個方法分別是用來獲取瀏覽器窗口的寬度和高度（包含滾動條的）

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowWidth = window.innerWidth
console.log(windowWidth)

瀏覽器的彈出層

alert 是在瀏覽器彈出一個提示框
```
window.alert('我是一個提示框')
```
- 這個彈出層知識一個提示內(nèi)容，只有一個確定按鈕
- 點(diǎn)擊確定按鈕以后，這個提示框就消失了
confirm 是在瀏覽器彈出一個詢問框
```
var boo = window.confirm('我是一個詢問框')
console.log(boo)
```
- 這個彈出層有一個詢問信息和兩個按鈕
- 當(dāng)你點(diǎn)擊確定的時候，就會得到 true
- 當(dāng)你點(diǎn)擊取消的時候，就會得到 false
prompt 是在瀏覽器彈出一個輸入框
```
var str = window.prompt('請輸入內(nèi)容')
console.log(str)
```
- 這個彈出層有一個輸入框和兩個按鈕
- 當(dāng)你點(diǎn)擊取消的時候，得到的是 null
- 當(dāng)你點(diǎn)擊確定的時候得到的就是你輸入的內(nèi)容

瀏覽器的地址信息

在 window 中有一個對象叫做 location
就是專門用來存儲瀏覽器的地址欄內(nèi)的信息的

location.href

location.href 這個屬性存儲的是瀏覽器地址欄內(nèi) url 地址的信息
```
console.log(window.location.href)
```
- 會把中文編程 url 編碼的格式

location.href 這個屬性也可以給他賦值

window.location.href = './index.html'
// 這個就會跳轉(zhuǎn)頁面到后面你給的那個地址

location.reload

location.reload() 這個方法會重新加載一遍頁面，就相當(dāng)于刷新是一個道理
```
window.location.reload()
```
- 注意： 不要寫在全局，不然瀏覽器就會一直處在刷新狀態(tài)

// 跳轉(zhuǎn)頁面 能后退
				// location.assign('http://www.baidu.com')
				// location.
				
				// 跳轉(zhuǎn)頁面 不能后退
				// location.replace('http://www.baidu.com')
				
				
				http://127.0.0.1:8848/zz2007/%E7%AC%AC%E4%BA%8C%E5%91%A8%E8%AF%BE%E4%BB%B6/day09/02-bom.html?id=1&aaa=22&bb=aasd#aaa
			 
			 origin: "http://127.0.0.1:8848"  完整的 服務(wù)器地址
			 protocol: "http:"  協(xié)議
			 host: "127.0.0.1:8848"   主機(jī)
			 hostname: "127.0.0.1" 主機(jī)名
			 port: "8848"  端口號***********
			 
			 path： 路徑  
			 pathname: 路徑名
			 "/zz2007/%E7%AC%AC%E4%BA%8C%E5%91%A8%E8%AF%BE%E4%BB%B6/day09/02-bom.html"
			 
			 
			 搜索 搜索字段**************
			 search: "?id=1&aaa=22&bb=aasd"
			 
			 哈希值
			 hash: "#aaa"

瀏覽器的歷史記錄

window 中有一個對象叫做 history
是專門用來存儲歷史記錄信息的

history.back

history.back 是用來會退歷史記錄的，就是回到前一個頁面，就相當(dāng)于瀏覽器上的 ?? 按鈕

window.history.back()
history.go(-1)
 - 前提是你要有上一條記錄，不然就是一直在這個頁面，也不會回退

  
 #### history.forword

- `history.forword` 是去到下一個歷史記錄里面，也就是去到下一個頁面，就相當(dāng)于瀏覽器上的 ?? 按鈕

  ```javascript
  window.history.forward()
  history.go(1)  
  
  
  刷新當(dāng)前頁面
  history.go(0)

前提是你要之前有過回退操作，不然的話你現(xiàn)在就是最后一個頁面，沒有下一個

瀏覽器的版本信息（了解）

window 中有一個對象叫做 navigator
是專門用來獲取瀏覽器信息的

navigator.userAgent

navigator.userAgent 是獲取的瀏覽器的整體信息

console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36


console.log(navigator.userAgent)
			
			if(navigator.userAgent.toLowerCase().indexOf('windows')!=-1){
				console.log('window  pc')
			}else{
				console.log('移動端')
				if(navigator.userAgent.toLowerCase().indexOf('iphone')!=-1 || navigator.userAgent.toLowerCase().indexOf('ipad')!=-1){
					console.log('ios')
				}else{
					console.log('安卓')
				}
				
			}

navigator.appName

navigator.appName 獲取的是瀏覽器的名稱
```
console.log(window.navigator.appName)
```

navigator.appVersion

navigator.appVersion 獲取的是瀏覽器的版本號
```
console.log(window.navigator.appVersion)
```

navigator.platform

navigator.platform 獲取到的是當(dāng)前計算機(jī)的操作系統(tǒng)
```
console.log(window.navigator.platform)
```

瀏覽器的 onload 事件

這個不在是對象了，而是一個事件

是在頁面所有資源加載完畢后執(zhí)行的

window.onload = function () {
  console.log('頁面已經(jīng)加載完畢')
}

在 html 頁面中把 js 寫在 head 里面

<html>
  <head>
    <meta charset="UTF-8" />
    <script>
    	// 這個代碼執(zhí)行的時候，body 還沒有加載
      // 這個時候我們就獲取不到 body 中的那個 div
      
      // 就需要使用 window.onload 事件
      window.onload = function () {
        // 這個函數(shù)會在頁面加載完畢以后在執(zhí)行
        // 那么這個時候頁面的 DOM 元素都已經(jīng)加載了，我們就可以獲取 div 了
      }
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

在 html 頁面中把 js 寫在 body 最后面

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div></div>
    
    <script>
    	// 這個代碼執(zhí)行的時候，body 已經(jīng)加載完畢了
      // 在這里就可以獲取到 div，寫不寫 window.onload 就無所謂了
      
      window.onload = function () {
        // 這個函數(shù)會在頁面加載完畢以后在執(zhí)行
        // 那么這個時候頁面的 DOM 元素都已經(jīng)加載了，我們就可以獲取 div 了
      }
    </script>
  </body>
</html>

瀏覽器的 onscroll 事件

這個 onscroll 事件是當(dāng)瀏覽器的滾動條滾動的時候觸發(fā)
或者鼠標(biāo)滾輪滾動的時候出發(fā)
```
window.onscroll = function () {
  console.log('瀏覽器滾動了')
}
```
- 注意：前提是頁面的高度要超過瀏覽器的可是窗口才可以

瀏覽器滾動的距離

瀏覽器內(nèi)的內(nèi)容即然可以滾動，那么我們就可以獲取到瀏覽器滾動的距離
思考一個問題？
- 瀏覽器真的滾動了嗎？
- 其實(shí)我們的瀏覽器是沒有滾動的，是一直在那里
- 滾動的是什么？是我們的頁面
- 所以說，其實(shí)瀏覽器沒有動，只不過是頁面向上走了
所以，這個已經(jīng)不能單純的算是瀏覽器的內(nèi)容了，而是我們頁面的內(nèi)容
所以不是在用 window 對象了，而是使用 document 對象

scrollTop

獲取的是頁面向上滾動的距離

一共有兩個獲取方式

document.body.scrollTop
document.documentElement.scrollTop

window.onscroll = function () {
  console.log(document.body.scrollTop)
  console.log(document.documentElement.scrollTop)
   scollTop = document.documentElement.scrollTop || document.body.scrollTop
}

  
  - 兩個都是獲取頁面向上滾動的距離
  - 區(qū)別：
    - IE 瀏覽器
      - 沒有 `DOCTYPE` 聲明的時候，用這兩個都行
      - 有 `DOCTYPE` 聲明的時候，只能用 `document.documentElement.scrollTop`
    - Chrome 和 FireFox
      - 沒有 `DOCTYPE` 聲明的時候，用 `document.body.scrollTop`
      - 有 `DOCTYPE` 聲明的時候，用 `document.documentElement.scrollTop`
    - Safari
      - 兩個都不用，使用一個單獨(dú)的方法 `window.pageYOffset `



#### scrollLeft

- 獲取頁面向左滾動的距離

- 也是兩個方法

  - `document.body.scrollLeft`

  - `document.documentElementLeft`

    ```javascript
    window.onscroll = function () {
      console.log(document.body.scrollLeft)
      console.log(document.documentElement.scrollLeft)
    }

兩個之間的區(qū)別和之前的 scrollTop 一樣

滾動條的距離也可以進(jìn)制設(shè)置

document.body.scrollTop= 0

document.documentElement.scrollTop = 0

定時器

在 js 里面，有兩種定時器，倒計時定時器 和 間隔定時器

倒計時定時器（延時器）

倒計時多少時間以后執(zhí)行函數(shù)
語法： setTimeout(要執(zhí)行的函數(shù)，多長時間以后執(zhí)行)
會在你設(shè)定的時間以后，執(zhí)行函數(shù)
```
var timerId = setTimeout(function () {
  console.log('我執(zhí)行了')
}, 1000)
console.log(timerId) // 1
```
- 時間是按照毫秒進(jìn)行計算的，1000 毫秒就是 1秒鐘
- 所以會在頁面打開 1 秒鐘以后執(zhí)行函數(shù)
- 只執(zhí)行一次，就不在執(zhí)行了
- 返回值是，當(dāng)前這個定時器是頁面中的第幾個定時器

間隔定時器

每間隔多少時間就執(zhí)行一次函數(shù)
語法： setInterval(要執(zhí)行的函數(shù)，間隔多少時間)
```
var timerId = setInterval(function () {
  console.log('我執(zhí)行了')
}, 1000)
```
- 時間和剛才一樣，是按照毫秒進(jìn)行計算的
- 每間隔 1 秒鐘執(zhí)行一次函數(shù)
- 只要不關(guān)閉，會一直執(zhí)行
- 返回值是，當(dāng)前這個定時器是頁面中的第幾個定時器

定時器的返回值

設(shè)置定時器的時候，他的返回值是部分 setTimeout 和 setInterval 的

只要有一個定時器，那么就是一個數(shù)字

var timerId = setTimeout(function () {
  console.log('倒計時定時器')
}, 1000)

var timerId2 = setInterval(function () {
  console.log('間隔定時器')
}, 1000)

console.log(timerId) // 1
console.log(timerId2) // 2

關(guān)閉定時器

我們剛才提到過一個 timerId，是表示這個定時器是頁面上的第幾個定時器
這個 timerId 就是用來關(guān)閉定時器的數(shù)字

我們有兩個方法來關(guān)閉定時器 clearTimeout 和 clearInterval

var timerId = setTimeout(function () {
  console.log('倒計時定時器')
}, 1000)
clearTimeout(timerId)

關(guān)閉以后，定時器就不會在執(zhí)行了

var timerId2 = setInterval(function () {
  console.log('間隔定時器')
}, 1000)
coearInterval(timerId2)

關(guān)閉以后定時器就不會在執(zhí)行了

原則上是
- clearTimeout 關(guān)閉 setTimeout
- clearInterval 關(guān)閉 setInterval

但是其實(shí)是可以通用的，他們可以混著使用

var timerId = setTimeout(function () {
  console.log('倒計時定時器')
}, 1000)
// 關(guān)閉倒計時定時器
clearInterval(timerId)

var timerId2 = setInterval(function () {
  console.log('間隔定時器')
}, 1000)
// 關(guān)閉間隔定時器
clearTimeout(timerId2)

DOM（上）

DOM（Document Object Model）：文檔對象模型
其實(shí)就是操作 html 中的標(biāo)簽的一些能力
我們可以操作哪些內(nèi)容
- 獲取一個元素
- 移除一個元素
- 創(chuàng)建一個元素
- 向頁面里面添加一個元素
- 給元素綁定一些事件
- 獲取元素的屬性
- 給元素添加一些 css 樣式
- …
DOM 的核心對象就是 docuemnt 對象
document 對象是瀏覽器內(nèi)置的一個對象，里面存儲著專門用來操作元素的各種方法
DOM：頁面中的標(biāo)簽，我們通過 js 獲取到以后，就把這個對象叫做 DOM 對象

獲取一個元素

通過 js 代碼來獲取頁面中的標(biāo)簽
獲取到以后我們就可以操作這些標(biāo)簽了

getElementById

getElementById 是通過標(biāo)簽的 id 名稱來獲取標(biāo)簽的

因?yàn)樵谝粋€頁面中 id 是唯一的，所以獲取到的就是一個元素

<body>
  <div id="box"></div>
  <script>
  	var box = document.getElementById('box')
  	console.log(box) // <div></div>
  </script>
</body>

獲取到的就是頁面中的那個 id 為 box 的 div 標(biāo)簽

getElementsByClassName

getElementsByClassName 是用過標(biāo)簽的 class 名稱來獲取標(biāo)簽的
因?yàn)轫撁嬷锌赡苡卸鄠€元素的 class 名稱一樣，所以獲取到的是一組元素
哪怕你獲取的 class 只有一個，那也是獲取一組元素，只不過這一組中只有一個 DOM 元素而已
```
<body>
  <div calss="box"></div>
  <script>
  	var box = document.getElementsByClassName('box')
  	console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
```
- 獲取到的是一組元素，是一個長得和數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)，但是不是數(shù)組，是偽數(shù)組
- 這個一組數(shù)據(jù)也是按照索引排列的，所以我們想要準(zhǔn)確的拿到這個 div，需要用索引來獲取

getElementsByName

getElementsByTagName

getElementsByTagName 是用過標(biāo)簽的標(biāo)簽名稱來獲取標(biāo)簽的
因?yàn)轫撁嬷锌赡苡卸鄠€元素的標(biāo)簽名稱一樣，所以獲取到的是一組元素
哪怕真的只有一個這個標(biāo)簽名，那么也是獲取一組元素，只不過這一組中只有一個 DOM 元素而已
```
<body>
  <div></div>
  <script>
  	var box = document.getElementsByTagName('div')
  	console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>
```
- 和 getElementsByClassName 一樣，獲取到的是一個長得很像數(shù)組的元素
- 必須要用索引才能得到準(zhǔn)確的 DOM 元素

querySelector**

querySelector 是按照選擇器的方式來獲取元素
也就是說，按照我們寫 css 的時候的選擇器來獲取

這個方法只能獲取到一個元素，并且是頁面中第一個滿足條件的元素

console.log(document.querySelector('div')) // 獲取頁面中的第一個 div 元素 
console.log(docuemnt.querySelector('.box')) // 獲取頁面中第一個有 box 類名的元素
console.log(document.querySelector('#box p')) // 獲取頁面中第一個 id 名為 box 的元素

querySelectorAll**

querySelectorAll 是按照選擇器的方式來獲取元素
這個方法能獲取到所有滿足條件的元素，以一個偽數(shù)組的形式返回
```
console.log(document.querySelectorAll('div')) // 獲取頁面中的所有的 div 元素 
console.log(docuemnt.querySelectorAll('.box')) // 獲取頁面中所有有 box 類名的元素
```
- 獲取到的是一組數(shù)據(jù)，也是需要用索引來獲取到準(zhǔn)確的每一個 DOM 元素

操作屬性

通過我們各種獲取元素的方式獲取到頁面中的標(biāo)簽以后
我們可以直接操作 DOM 元素的屬性，就能直接把效果展示在頁面上

標(biāo)準(zhǔn)屬性 ipt.value ipt.checked

innerHTML

獲取元素內(nèi)部的 HTML 結(jié)構(gòu)

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerHTML)
		/*
			
      <p>
        <span>hello</span>
      </p>
		
		*/
  </script>
</body>

設(shè)置元素的內(nèi)容

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.innerHTML = '<p>hello</p>'
  </script>
</body>

設(shè)置完以后，頁面中的 div 元素里面就會嵌套一個 p 元素

innerText

獲取元素內(nèi)部的文本（只能獲取到文本內(nèi)容，獲取不到 html 標(biāo)簽）

<body>
  <div>
    <p>
      <span>hello</span>
    </p>
  </div>

  <script>
    var div = document.querySelector('div')
    console.log(div.innerText) // hello
  </script>
</body>

可以設(shè)置元素內(nèi)部的文本
```
<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.innerText = '<p>hello</p>'
  </script>
</body>
```
- 設(shè)置完畢以后，會把 <p>hello</p> 當(dāng)作一個文本出現(xiàn)在 div 元素里面，而不會把 p 解析成標(biāo)簽

getAttribute

獲取元素的某個屬性（包括自定義屬性）

<body>
  <div a="100" class="box"></div>

  <script>
    var div = document.querySelector('div')
   	console.log(div.getAttribute('a')) // 100
    console.log(div.getAttribute('class')) // box
  </script>
</body>

setAttribute

給元素設(shè)置一個屬性（包括自定義屬性）

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.setAttribute('a', 100)
    div.setAttribute('class', 'box')
    console.log(div) // <div a="100" class="box"></div>
  </script>
</body>

removeAttribute

直接移除元素的某個屬性

<body>
  <div a="100" class="box"></div>

  <script>
    var div = document.querySelector('div')
   	div.removeAttribute('class')
    console.log(div) // <div a="100"></div>
  </script>
</body>

style

專門用來給元素添加 css 樣式的

添加的都是行內(nèi)樣式

<body>
  <div></div>

  <script>
    var div = document.querySelector('div')
   	div.style.width = "100px"
    div.style.height = "100px"
    div.style.backgroundColor = "pink"
    console.log(div) 
    // <div style="width: 100px; height: 100px; background-color: pink;"></div>
  </script>
</body>

頁面中的 div 就會變成一個寬高都是100，背景顏色是粉色

className

專門用來操作元素的類名的

<body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
   	console.log(div.className) // box
  </script>
</body>

也可以設(shè)置元素的類名，不過是全覆蓋式的操作

<body>
  <div class="box"></div>

  <script>
    var div = document.querySelector('div')
   	div.className = 'test'
    console.log(div) // <div class="test"></div>
  </script>
</body>

在設(shè)置的時候，不管之前有沒有類名，都會全部被設(shè)置的值覆蓋

div.classList.add('box')//添加類名
div.classList.remove('box')//刪除類名
div.classList.contains('box')//true 有類名  false 沒有這個類，名

DOM（下）

DOM 樹就是我們 html 結(jié)構(gòu)中一個一個的節(jié)點(diǎn)構(gòu)成的
不光我們的標(biāo)簽是一個節(jié)點(diǎn)，我們寫的文本內(nèi)容也是一個節(jié)點(diǎn)，注釋，包括空格都是節(jié)點(diǎn)

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

DOM 的節(jié)點(diǎn)我們一般分為常用的三大類 元素節(jié)點(diǎn) / 文本節(jié)點(diǎn) / 屬性節(jié)點(diǎn)
什么是分類，比如我們在獲取元素的時候，通過各種方法獲取到的我們叫做元素節(jié)點(diǎn)（標(biāo)簽節(jié)點(diǎn)）
比如我們標(biāo)簽里面寫的文字，那么就是文本節(jié)點(diǎn)
寫在每一個標(biāo)簽上的屬性，就是屬性節(jié)點(diǎn)

元素節(jié)點(diǎn)

我們通過 getElementBy... 獲取到的都是元素節(jié)點(diǎn)

屬性節(jié)點(diǎn)

我們通過 getAttribute 獲取的就是元素的屬性節(jié)點(diǎn)

文本節(jié)點(diǎn)

我們通過 innerText 獲取到的就是元素的文本節(jié)點(diǎn)

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

childNodes：獲取某一個節(jié)點(diǎn)下 所有的子一級節(jié)點(diǎn)
```
<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 這個 oDiv 獲取的是頁面中的 div 元素，就是一個元素節(jié)點(diǎn)
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.childNodes) 
    /*
    	NodeList(3) [text, p, text]
      0: text
      1: p
      2: text
      length: 3
      __proto__: NodeList
    */
  </script>
</body>
```
- 我們會發(fā)現(xiàn)，拿到以后是一個偽數(shù)組，里面有三個節(jié)點(diǎn)
- 一個 text：從 <div> 一直到 <p> 中間有一個換行和一堆空格，這個是第一個節(jié)點(diǎn)，是一個文本節(jié)點(diǎn)
- 一個 p：這個 p 標(biāo)簽就是第二個節(jié)點(diǎn)，這個是一個元素節(jié)點(diǎn)
- 一個 text：從 </p> 一直到 </div> 中間有一個換行和一堆空格，這個是第三個節(jié)點(diǎn)，是一個文本節(jié)點(diǎn)
- 這個時候就能看到我們有不同的節(jié)點(diǎn)類型了

children ：獲取某一節(jié)點(diǎn)下所有的子一級 元素節(jié)點(diǎn)

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 這個 oDiv 獲取的是頁面中的 div 元素，就是一個元素節(jié)點(diǎn)
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.children) 
    /*
    	HTMLCollection [p]
      0: p
      length: 1
      __proto__: HTMLCollection
    */
  </script>
</body>

我們發(fā)現(xiàn)只有一個節(jié)點(diǎn)了，因?yàn)?children 只要元素節(jié)點(diǎn)
div 下面又只有一個元素節(jié)點(diǎn)，就是 p
所以就只有一個，雖然只有一個，但是也是一個 偽數(shù)組

firstChild：獲取某一節(jié)點(diǎn)下子一級的 第一個節(jié)點(diǎn)

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 這個 oDiv 獲取的是頁面中的 div 元素，就是一個元素節(jié)點(diǎn)
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstChild) // #text 
  </script>
</body>

這個是只獲取一個節(jié)點(diǎn)，不再是偽數(shù)組了
獲取的是第一個
第一個就是 <div> 一直到 <p> 的那個換行和空格，是個文本節(jié)點(diǎn)

lastChild：獲取某一節(jié)點(diǎn)下子一級的 最后一個節(jié)點(diǎn)

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 這個 oDiv 獲取的是頁面中的 div 元素，就是一個元素節(jié)點(diǎn)
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastChild) // #text 
  </script>
</body>

只獲取一個節(jié)點(diǎn)，不再是偽數(shù)組
獲取的是最后一個
最后一個就是 </p> 一直到 </div> 之間的換行和空格，是個文本節(jié)點(diǎn)

firstElementChild：獲取某一節(jié)點(diǎn)下子一級 第一個元素節(jié)點(diǎn)

<body>
  <div>
    <p>hello</p>
  </div>
  
  <script>
    // 這個 oDiv 獲取的是頁面中的 div 元素，就是一個元素節(jié)點(diǎn)
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.firstElementChild) // <p>hello</p>
  </script>
</body>

只獲取一個節(jié)點(diǎn)，不在是偽數(shù)組
獲取的是第一個 元素節(jié)點(diǎn)
第一個元素節(jié)點(diǎn)就是 p 標(biāo)簽，是一個元素節(jié)點(diǎn)

lastElementChild：獲取某一節(jié)點(diǎn)下子一級 最后一個元素節(jié)點(diǎn)

<body>
  <div>
    <p>hello</p>
    <p>world</p>
  </div>
  
  <script>
    // 這個 oDiv 獲取的是頁面中的 div 元素，就是一個元素節(jié)點(diǎn)
  	var oDiv = document.querySelector('div')
    
    console.log(oDiv.lastElementChild) // <p>world</p>
  </script>
</body>

只獲取一個節(jié)點(diǎn)，不在是偽數(shù)組
獲取的是最后一個 元素節(jié)點(diǎn)
最后一個元素節(jié)點(diǎn)是 <p>world</p>，是一個元素節(jié)點(diǎn)

nextSibling：獲取某一個節(jié)點(diǎn)的 下一個兄弟節(jié)點(diǎn)

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
 
  <script>
    // 這個 oLi 獲取的是頁面中的 li 元素，就是一個元素節(jié)點(diǎn)
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.nextSibling) // #text
  </script>
</body>

只獲取一個節(jié)點(diǎn)，不再是偽數(shù)組
獲取的是 id="b" 這個 li 的下一個兄弟節(jié)點(diǎn)
因?yàn)?id="b" 的下一個節(jié)點(diǎn)，是兩個 li 標(biāo)簽之間的換行和空格，所以是一個文本節(jié)點(diǎn)

previousSibling：獲取某一個節(jié)點(diǎn)的 上一個兄弟節(jié)點(diǎn)

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 這個 oLi 獲取的是頁面中的 li 元素，就是一個元素節(jié)點(diǎn)
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.previousSibling) // #text
  </script>
</body>

只獲取一個節(jié)點(diǎn)，不在是偽數(shù)組
獲取的是 id="b" 這個 li 的上一個兄弟節(jié)點(diǎn)
因?yàn)?id="b" 的上一個節(jié)點(diǎn)，是兩個 li 標(biāo)簽之間的換行和空格，所以是一個文本節(jié)點(diǎn)

nextElementSibling：獲取某一個節(jié)點(diǎn)的 下一個元素節(jié)點(diǎn)

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 這個 oLi 獲取的是頁面中的 li 元素，就是一個元素節(jié)點(diǎn)
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.nextElementSibling) // <li id="c">!!!</li>
  </script>
</body>

只獲取一個節(jié)點(diǎn)，不在是偽數(shù)組
獲取的是 id="b" 這個 li 的下一個兄弟元素節(jié)點(diǎn)
因?yàn)?id="b" 的下一個兄弟元素節(jié)點(diǎn)就是 id="c" 的 li，是一個元素節(jié)點(diǎn)

previousElementSibling：獲取某一個節(jié)點(diǎn)的 上一個元素節(jié)點(diǎn)

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 這個 oLi 獲取的是頁面中的 li 元素，就是一個元素節(jié)點(diǎn)
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.previousElementSibling) // <li id="a">hello</li>
  </script>
</body>

只獲取一個節(jié)點(diǎn)，不在是偽數(shù)組
獲取的是 id="b" 這個 li 的上一個兄弟元素節(jié)點(diǎn)
因?yàn)?id="b" 的上一個兄弟元素節(jié)點(diǎn)就是 id="a" 的 li，是一個元素節(jié)點(diǎn)

parentNode：獲取某一個節(jié)點(diǎn)的 父節(jié)點(diǎn)

<body>
  <ul>
    <li id="a">hello</li>
    <li id="b">world</li>
    <li id="c">!!!</li>
  </ul>
  
  <script>
    // 這個 oLi 獲取的是頁面中的 li 元素，就是一個元素節(jié)點(diǎn)
  	var oLi = document.querySelector('#b')
    
    console.log(oLi.parentNode) // <ul>...</ul>
  </script>
</body>

只獲取一個節(jié)點(diǎn)，不在是偽數(shù)組
獲取的是當(dāng)前這個 li 的父元素節(jié)點(diǎn)
因?yàn)檫@個 li 的父親就是 ul，所以獲取到的就是 ul，是一個元素節(jié)點(diǎn)

attributes：獲取某一個 元素節(jié)點(diǎn) 的所有 屬性節(jié)點(diǎn) （了解）

<body>
  <ul>
    <li id="a" a="100" test="test">hello</li>
  </ul>
  
  <script>
    // 這個 oLi 獲取的是頁面中的 li 元素，就是一個元素節(jié)點(diǎn)
  	var oLi = document.querySelector('#a')
    
    console.log(oLi.attributes) 
    /*
    	NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}
      0: id
      1: a
      2: test
      length: 3
      a: a
      id: id
      test: test
      __proto__: NamedNodeMap
    
    */
  </script>
</body>

獲取的是一組數(shù)據(jù)，是該元素的所有屬性，也是一個偽數(shù)組
這個 li 有三個屬性，id / a / test 三個，所以就獲取到了這三個

節(jié)點(diǎn)屬性（不常用）

我們已經(jīng)知道節(jié)點(diǎn)會分成很多種，而且我們也能獲取到各種不同的節(jié)點(diǎn)
接下來我們就來聊一些各種節(jié)點(diǎn)之間屬性的區(qū)別

我們先準(zhǔn)備一段代碼

<body>
  <ul test="我是 ul 的一個屬性">
    <li>hello</li>
  </ul>

  <script>
    // 先獲取 ul
    var oUl = document.querySelector('ul')
    
    // 獲取到 ul 下的第一個子元素節(jié)點(diǎn)，是一個元素節(jié)點(diǎn)
    var eleNode = oUl.firstElementChild
    
    // 獲取到 ul 的屬性節(jié)點(diǎn)組合，因?yàn)槭莻€組合，我們要拿到節(jié)點(diǎn)的話要用索引
    var attrNode = oUl.attributes[0]

    // 獲取到 ul 下的第一個子節(jié)點(diǎn)，是一個文本節(jié)點(diǎn)
    var textNode = oUl.firstChild
  </script>
</body>

nodeType

nodeType：獲取節(jié)點(diǎn)的節(jié)點(diǎn)類型，用數(shù)字表示
```
console.log(eleNode.nodeType) // 1
console.log(attrNode.nodeType) // 2
console.log(textNode.nodeType) // 3
```
- nodeType === 1 就表示該節(jié)點(diǎn)是一個 元素節(jié)點(diǎn)
- nodeType === 2 就表示該節(jié)點(diǎn)是一個 屬性節(jié)點(diǎn)
- nodeType === 3 就表示該節(jié)點(diǎn)是一個 注釋節(jié)點(diǎn)

nodeName

nodeName：獲取節(jié)點(diǎn)的節(jié)點(diǎn)名稱
```
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text
```
- 元素節(jié)點(diǎn)的 nodeName 就是 大寫標(biāo)簽名
- 屬性節(jié)點(diǎn)的 nodeName 就是 屬性名
- 文本節(jié)點(diǎn)的 nodeName 都是 #text

nodeValue

nodeValue：獲取節(jié)點(diǎn)的值
```
console.log(eleNode.nodeValue) // null
console.log(attrNode.nodeValue) // 我是 ul 的一個屬性
console.log(textNode.nodeValue) // 換行 + 空格
```
- 元素節(jié)點(diǎn)沒有 nodeValue
- 屬性節(jié)點(diǎn)的 nodeValue 就是 屬性值
- 文本節(jié)點(diǎn)的 nodeValue 就是 文本內(nèi)容

匯總

-	nodeType	nodeName	nodeValue
元素節(jié)點(diǎn)	1	大寫標(biāo)簽名	null
屬性節(jié)點(diǎn)	2	屬性名	屬性值
文本節(jié)點(diǎn)	3	#text	文本內(nèi)容

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

我們所說的操作無非就是 增刪改查（CRUD）
創(chuàng)建一個節(jié)點(diǎn)（因?yàn)橄蝽撁嬷性黾又?，我們需要先?chuàng)建一個節(jié)點(diǎn)出來）
向頁面中增加一個節(jié)點(diǎn)
刪除頁面中的某一個節(jié)點(diǎn)
修改頁面中的某一個節(jié)點(diǎn)
獲取頁面中的某一個節(jié)點(diǎn)

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

createElement：用于創(chuàng)建一個元素節(jié)點(diǎn)

// 創(chuàng)建一個 div 元素節(jié)點(diǎn)
var oDiv = document.createElement('div')

console.log(oDiv) // <div></div>

創(chuàng)建出來的就是一個可以使用的 div 元素

createTextNode：用于創(chuàng)建一個文本節(jié)點(diǎn)

// 創(chuàng)建一個文本節(jié)點(diǎn)
var oText = document.createTextNode('我是一個文本')

console.log(oText) // "我是一個文本"

向頁面中加入一個節(jié)點(diǎn)

appendChild：是向一個元素節(jié)點(diǎn)的末尾追加一個節(jié)點(diǎn)

語法： 父節(jié)點(diǎn).appendChild(要插入的子節(jié)點(diǎn))

// 創(chuàng)建一個 div 元素節(jié)點(diǎn)
var oDiv = document.createElement('div')
var oText = document.createTextNode('我是一個文本')

// 向 div 中追加一個文本節(jié)點(diǎn)
oDiv.appendChild(oText)

console.log(oDiv) // <div>我是一個文本</div>

insertBefore：向某一個節(jié)點(diǎn)前插入一個節(jié)點(diǎn)

語法： 父節(jié)點(diǎn).insertBefore(要插入的節(jié)點(diǎn)，插入在哪一個節(jié)點(diǎn)的前面)

<body>
  <div>
    <p>我是一個 p 標(biāo)簽</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 創(chuàng)建一個元素節(jié)點(diǎn)
    var oSpan = document.createElement('span')
    
    // 將這個元素節(jié)點(diǎn)添加到 div 下的 p 的前面
    oDiv.insertBefore(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span></span>
    		<p>我是一個 p 標(biāo)簽</p>
    	</div>
    */
  </script>
</body>

刪除頁面中的某一個節(jié)點(diǎn)

removeChild：移除某一節(jié)點(diǎn)下的某一個節(jié)點(diǎn)
dom.remove()

語法：父節(jié)點(diǎn).removeChild(要移除的節(jié)點(diǎn))

<body>
  <div>
    <p>我是一個 p 標(biāo)簽</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 移除 div 下面的 p 標(biāo)簽
    oDiv.removeChild(oP)
    
    console.log(oDiv) // <div></div>
  </script>
</body>

修改頁面中的某一個節(jié)點(diǎn)

replaceChild：將頁面中的某一個節(jié)點(diǎn)替換掉

語法： 父節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn)，舊節(jié)點(diǎn))

<body>
  <div>
    <p>我是一個 p 標(biāo)簽</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 創(chuàng)建一個 span 節(jié)點(diǎn)
    var oSpan = document.createElement('span')
    // 向 span 元素中加點(diǎn)文字
    oSpan.innerHTML = '我是新創(chuàng)建的 span 標(biāo)簽'
    
   	// 用創(chuàng)建的 span 標(biāo)簽替換原先 div 下的 p 標(biāo)簽
    oDiv.replaceChild(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span>我是新創(chuàng)建的 span 標(biāo)簽</span>
    	</div>
    */
  </script>
</body>

獲取元素的非行間樣式

我們在操作 DOM 的時候，很重要的一點(diǎn)就是要操作元素的 css 樣式
那么在操作 css 樣式的時候，我們避免不了就要獲取元素的樣式
之前我們說過可以用 元素.style.xxx 來獲取

但是這個方法只能獲取到元素 行間樣式，也就是寫在行內(nèi)的樣式

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一個 p 標(biāo)簽</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.style.height) // 100px
    console.log(oDiv.style.width) // ''
  </script>
</body>

不管是外鏈?zhǔn)竭€是內(nèi)嵌式，我們都獲取不到該元素的樣式
這里我們就要使用方法來獲取了 getComputedStyle 和 currentStyle
這兩個方法的作用是一樣的，只不過一個在 非 IE 瀏覽器，一個在 IE 瀏覽器

getComputedStyle（非IE使用）

語法：window.getComputedStyle(元素, null).要獲取的屬性

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一個 p 標(biāo)簽</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(window.getComputedStyle(oDiv).width) // 100px
    console.log(window.getComputedStyle(oDiv).height) // 100px
  </script>
</body>

這個方法獲取行間樣式和非行間樣式都可以

currentStyle（IE使用）

語法： 元素.currentStyle.要獲取的屬性文章來源地址http://www.zghlxwxcb.cn/news/detail-800912.html

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一個 p 標(biāo)簽</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.currentStyle.width) // 100px
    console.log(oDiv.currentStyle.height) // 100px
  </script>
</body>

獲取元素的偏移量

就是元素在頁面上的什么位置
我們有幾個屬性來獲取，offsetLeft 和 offsetTop 和 offsetWidth 和 offsetHeight

offsetLeft 和 offsetTop

獲取的是元左邊的偏移量和上邊的偏移量
分成兩個情況來看
沒有定位的情況下
- 獲取元素邊框外側(cè)到頁面內(nèi)側(cè)的距離
有定位的情況下
- 獲取元素邊框外側(cè)到定位父級邊框內(nèi)側(cè)的距離（其實(shí)就是我們寫的 left 和 top 值）

offsetWidth 和 offsetHeight

獲取元素 內(nèi)容寬高 + padding寬高 + border寬高 的和

到了這里，關(guān)于【JS筆記】JavaScript語法《基礎(chǔ)+重點(diǎn)》知識內(nèi)容，快速上手（四）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

【JS筆記】JavaScript語法 《基礎(chǔ)+重點(diǎn)》 知識內(nèi)容，快速上手（四）