JavaScript 與瀏覽器的溝通 : DOM


Posted by tzutzu858 on 2020-08-02

在瀏覽器的 Javascript 引擎解讀 HTML、SVG 時,會將內容分析成一個個的 DOM
DOM簡單來說,把 document 轉換成 object ,便可以取得那些物件
圖片取自維基百科

如何選到想要的元素:

下面這些 function 都是放在 document 上面,所以都是以 document. 開頭

  1. getElementsByTagName
    document.getElementsByTagName('div')

  2. getElementsByClassName
    document.getElementsByClassName('class_name')

  3. getElementById
    document.getElementById('id_name')

  4. getElementsByName
    .getElementsByName('name') 來根據 name 這個屬性取得表單元素的值
    他是 NodeList 集合,意味它會隨著有相同元素的新元素 name 添加到文檔中或從文檔中刪除而自動更新。
    例子:

<input type="hidden" name="up">
<input type="hidden" name="down">

<script>
  var up_names = document.getElementsByName("up");
  console.log(up_names[0].tagName); // displays "INPUT"
</script>

以下算比較新出來的

  1. querySelector : 後面接的是 css 的選擇器,只會回傳匹配到的第一個元素
    document.querySelector('#id_name')
    document.querySelector('div')
    document.querySelector('.class_name')
    document.querySelector('div > a')

  2. querySelectorAll : 會選到所有元素
    document.querySelectorAll('div') 所有的 div 都會被選到

改變元素的 CSS

舉例 :

<div id = 'block'>
   hello~
</div>
<script>
   const element = document.querySelector('#block')
   element.style.background = 'red'
   element.style.padding = '10px'
</script>

錯誤寫法 : element.style padding-top = '10px'

兩個方式改寫,第一種
element.style ['padding-top'] = '10px'
第二種 :
element.style paddingTop = '10px'

改變元素的 Class

<style>
    .active {
        background: red;
    }  
</style>

<div id = 'block' >
    hello~
</div>

<script>
const element = document.querySelector('#block')
element.classList.add('active')
</script>

上面這段程式就會將 <div id = 'block' > 變成 <div id = 'block' class= 'active'>

刪除 class 名稱
element.classList.remove('active')

開關 : 開會變關,關會變開,本來沒有 class_name 會新增,有的話會移除
element.classList.toggle('active')

改變內容:inner、outer 的 HTML 與 text

<div id = 'block' >
    yo
    <a>hello</a>
</div>

<script>
const element = document.querySelector('#block > a')
console.log(element.innerText)
</script>

//  innerText 就是印出裡面的文字
//  因此上面印出 hello
// 如果改成 :
const element = document.querySelector('#block')
console.log(element.innerHTML)

// innerHTML 就是把 id = block 標籤中的東西全部印出來 
//    yo
//    <a>hello</a>
// outerHTML 用法
const element = document.querySelector('#block')
console.log(element.outerHTML)
// 連自己都印出
<div id = 'block' >
    yo
    <a>hello</a>
</div>

結論 :
如果只要印裡面內容就用 innerText ,如果要把裡面標籤全部印出來就用 innerHTML
連自己的標籤都要印出就用 outerHTML
innerText 除了可以用來取得 HTML 元素之外,還會把元素的 HTML 標籤去除掉,但 innerText 並非 W3C 所規定的標準寫法,而且僅適用於 IE 瀏覽器。

連樣式都改
例如 : element.outerHTML = '<h1>hello!</h1>'

<div id = 'block' >
    yo
    <a>hello</a>
</div>

<script>
const element = document.querySelector('#block > a')
element.outerHTML = '<h1>hello!</h1>'
console.log(element.outerHTML)
</script>

結果:


插入與刪除元素:appendChild 與 removeChild

刪除
要刪掉元素前,要知道它的 parents 是誰,

<div id = 'block' >
    yo
    <a>hello</a>
</div>

const element = document.querySelector('#block')
element.removeChild(document.querySelector('a'))
// 只會印出 yo ,<a> 就會被刪掉了

插入

const element = document.querySelector('#block')
const item = document.createElement('div')
item.innerText = '123'
element.appendChild(item)

如果沒有想要它是個 element ,只是要新增純文字可以用
const item = document.createTextNode('123')

const element = document.querySelector('#block')
const item = document.createTextNode('123')
element.appendChild(item)

更多 :










Related Posts

【Day06】Vue-cli & Vuex mapState

【Day06】Vue-cli & Vuex mapState

CoderBridge 上安裝留言功能

CoderBridge 上安裝留言功能

r3:0 異世界網站挑戰 Lv. 11 ~ 15 攻略

r3:0 異世界網站挑戰 Lv. 11 ~ 15 攻略


Comments