DOM核心操作

前言

  JavaScript主要是由三部分組成：ECMAScript、DOM、BOM，今天我們一起來學習一下JS中DOM的核心操作吧。

是什麼

  DOM即Document Object Model（文檔對象模型），可以使用JS來操作HTML。

創建元素

  方式一：document.write

  創建方式：

document.write('我是後來的<p>我是更後的</p>')

  最終效果：
  

  方式二：innerHTML

  創建方式：

var box = document.getElementById('box');
box.innerHTML = '新內容<p>新標籤</p>'

  最終效果：
  

  方式三：createElement

  創建方式：

var div = document.createElement('div');
document.body.appendChild(div)

  最終效果：
  

  三種方式區分：

document.write：如果實在頁面加載完畢後，此時通過這種方式創建元素，那麼頁面上存在的內容就都被幹掉了
innerHTML：採取數組形式拼接的時候，效率更高，但是結構稍微複雜
createElement：創建多個元素效率稍微低一點，但是結構更爲清晰

操作元素

  一、增

  1.appendChild

node.appendChild(child)  // 後面追加元素

  2.insertBefore

node.insertBefore(child, 指定元素)  // 在執行元素之前插

  代碼示例：

  二、刪

node.removeChild(child)   // 移除指定元素

  代碼示例：

  三、改

  1.修改元素屬性：src、href、title

img.src = 'openEye.png'

  2.修改普通元素內容：innerHTML、innerText

var box = document.getElementById('box');
box.innerHTML = '新內容<p>新標籤</p>'

  3.修改表單樣式：value、type、disabled

li.innerHTML = text.value;
input.type = 'password'
btn.disable = true

  4.修改元素樣式：style、className

img.style.display = 'none'
img.className=' '    // 在CSS中定義的類名

  四、查

  1.DOM提供的API：getElementById、getElementsByTagName

<div id='box'></div>
var box = document.getElementById('box');
var box2 = document.getElementsByTagName('div')

  2.H5提供的新方法：querySelector、querySelectorAll

var ul = document.querySelector('ul');
var li = document.querySelectorAll('li')

  3.利用節點操作獲取元素：parentNode、children、previousElementSibling、nextElementSibling

parentNode：返回的是離元素最近的父級節點 如果找不到就返回null
children：獲取所有的子元素節點
previousElementSibling：上一個兄弟元素節點
nextElementSibling：下一個兄弟元素節點

自定義屬性操作

  1.setAttribute

設置自定義屬性：setAttribute(“屬性的名字”,“屬性的值”);

  2.getAttribute

獲取自定義屬性的值：getAttribute(“屬性的名字”);

  3.removeAttribute

移除自定義屬性：removeAttribute(“屬性的名字”);

事件操作

  1.事件源.事件類型 = 事件處理程序

btn.onclick = function() {
	// do something
}

  2.addEventListener

document.addEventListener('click ', function() {
    // do something
})