總結(jié)：

0.1 創(chuàng)建

1. document.write(幾乎不用)
2. innerHTML
3. createElement
注：
1. document.write 是直接將內(nèi)容寫入頁面的內(nèi)容流，但是文檔流執(zhí)行完畢迷捧，則它會導(dǎo)致頁面全部重繪
2. innerHTML 和createElement()不會導(dǎo)致頁面全部重繪
3. innerHTML 創(chuàng)建多個元素效率更高（不要拼接字符串稿蹲，采取數(shù)組形式拼接）络断，結(jié)構(gòu)稍微復(fù)雜
4. createElement() 創(chuàng)建多個元素效率稍低一點(diǎn)點(diǎn)菜职，但是結(jié)構(gòu)更清晰

0.2 增

1.appendChild
2.insertBefore

0.3 刪

1.removeChild

0.4 改

1. 修改元素屬性： src肴盏、href燕鸽、title等
2. 修改普通元素內(nèi)容： innerHTML 闪彼、innerText
3. 修改表單元素： value、type老速、disabled等
4. 修改元素樣式： style粥喜、className

0.5 查

1. DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推薦
2. H5提供的新方法： querySelector橘券、querySelectorAll 提倡
3. 利用節(jié)點(diǎn)操作獲取元素： 父(parentNode)额湘、子(children)、兄(previousElementSibling旁舰、
nextElementSibling) 提倡

0.6 屬性操作

1.setAttribute:設(shè)置DOM屬性
2.getAttribute:得到DOM屬性
3.removeAttribute移除屬性

0.7 事件操作

image.png

1.獲取元素

1.1根據(jù) ID 獲取

document.getElementById('id');

1.2 根據(jù)標(biāo)簽名獲取

document.getElementsByTagName('標(biāo)簽名');
還可以獲取指定標(biāo)簽內(nèi)的子元素
element.getElementsByTagName('標(biāo)簽名');

1.3通過 HTML5 新增的方法獲取

1. document.getElementsByClassName(‘類名’)锋华；// 根據(jù)類名返回元素對象集合
2. document.querySelector('選擇器'); // 根據(jù)指定選擇器返回第一個元素對象
3. document.querySelectorAll('選擇器'); // 根據(jù)指定選擇器返回
querySelector 和 querySelectorAll里面的類和id選擇器需要加符號,比如:document.querySelector('#nav');document.querySelector('.nav')；
不加符號的默認(rèn)為標(biāo)簽選擇器

1.4 獲取特殊元素（body箭窜，html）

1. doucumnet.body // 返回body元素對象
1. document.documentElement // 返回html元素對象

2.事件

2.1常見事件

image.png

3.操作元素

3.1改變元素內(nèi)容

element.innerText//從起始位置到終止位置的內(nèi)容, 但它去除 html 標(biāo)簽毯焕， 同時空格和換行也會去掉
element.innerHTML//起始位置到終止位置的全部內(nèi)容，包括 html 標(biāo)簽磺樱，同時保留空格和換行

3.2常用元素的屬性操作

1. innerText纳猫、innerHTML 改變元素內(nèi)容
2. src婆咸、href
3. id、alt芜辕、title
直接使用element.操作尚骄，例如：element.id;  element.src

3.3 表單元素的屬性操作

type、value物遇、checked乖仇、selected憾儒、disabled
直接使用element.操作询兴，例如：element.value;  element.disabled

3.4樣式屬性操作

我們可以通過 JS 修改元素的大小、顏色起趾、位置等樣式诗舰。
1. element.style 通過修改標(biāo)簽的行內(nèi)樣式操作
2. element.className 通過修改標(biāo)簽的類名樣式操作
注意：
1.JS 修改 style 樣式操作，產(chǎn)生的是行內(nèi)樣式训裆，CSS 權(quán)重比較高
2.如果樣式修改較多眶根，可以采取操作類名方式更改元素樣式。
3.通過className修改樣式边琉，需在style里提前設(shè)置好對應(yīng)className的樣式

3.5屬性操作

3.5.1獲取屬性值

element.屬性;  獲取內(nèi)置屬性值（元素本身自帶的屬性）
element.getAttribute(‘屬性’); 主要獲得自定義的屬性 （標(biāo)準(zhǔn)） 我們程序員自定義的屬性

3.5.2 設(shè)置屬性值

element.屬性;  設(shè)置內(nèi)置屬性值 
element.setAttribute(‘屬性’); 主要設(shè)置自定義的屬性 （標(biāo)準(zhǔn)）使用：element.setAttribute(‘class’,'nav1')

3.5.3 移除屬性

element.removeAttribute('屬性');

3.6 H5自定義屬性

3.6.1 設(shè)置H5自定義屬性

H5規(guī)定自定義屬性data-開頭做為屬性名并且賦值属百。
比如 <div data-index=“1”></div>
或者使用 JS 設(shè)置
element.setAttribute(‘data-index’, 2)

3.6.2 獲取H5自定義屬性

1. 兼容性獲取 element.getAttribute(‘data-index’);
2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才開始支持

4.節(jié)點(diǎn)操作

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

4.1.1父節(jié)點(diǎn)和子節(jié)點(diǎn)

父節(jié)點(diǎn)：
node.parentNode 返回最近的一個父節(jié)點(diǎn)，沒有則返回null

子節(jié)點(diǎn)：
開發(fā)中使用一般使用以下方法返回子節(jié)點(diǎn)
第一個子元素節(jié)點(diǎn)变姨，可以使用 parentNode.chilren[0]
最后一個子元素節(jié)點(diǎn)族扰，可以使用 parentNode.chilren[parentNode.chilren.length - 1]


1. parentNode.childNodes（標(biāo)準(zhǔn)）（但一般不使用）;返回包含指定節(jié)點(diǎn)的子節(jié)點(diǎn)的集合，該集合為即時更新的集合定欧。
注：返回值里面包含了所有的子節(jié)點(diǎn)渔呵，包括元素節(jié)點(diǎn)，文本節(jié)點(diǎn)等砍鸠。
2. parentNode.children（非標(biāo)準(zhǔn)）（經(jīng)常使用）扩氢；返回所有的子元素節(jié)點(diǎn)，并且只返回子元素節(jié)點(diǎn)爷辱，且無瀏覽器兼容問題录豺。


firstChild 返回第一個子節(jié)點(diǎn)，找不到則返回null饭弓。同樣双饥，也是包含所有的節(jié)點(diǎn)。
3. parentNode.firstChild（一般不使用）
lastChild 返回最后一個子節(jié)點(diǎn)示启，找不到則返回null兢哭。同樣，也是包含所有的節(jié)點(diǎn)夫嗓。
4. parentNode.lastChild（一般不使用）

firstElementChild 返回第一個子元素節(jié)點(diǎn)迟螺，找不到則返回null冲秽。
5. parentNode.firstElementChild
lastElementChild 返回最后一個子元素節(jié)點(diǎn)，找不到則返回null矩父。
6. parentNode.lastElementChild
注意：這兩個方法有兼容性問題锉桑，IE9 以上才支持。

4.1.2 兄弟節(jié)點(diǎn)

1. node.nextSibling  返回當(dāng)前元素的下一個兄弟節(jié)點(diǎn)窍株，找不到則返回null民轴。同樣，也是包含所有的節(jié)點(diǎn)球订。
2. node.previousSibling 返回當(dāng)前元素上一個兄弟節(jié)點(diǎn)后裸，找不到則返回null。同樣冒滩，也是包含所有的節(jié)點(diǎn)微驶。

以下這兩個方法有兼容性問題， IE9 以上才支持：
3. node.nextElementSibling 返回當(dāng)前元素下一個兄弟元素節(jié)點(diǎn)开睡，找不到則返回null因苹。
4. node.previousElementSibling 返回當(dāng)前元素上一個兄弟節(jié)點(diǎn)，找不到則返回null篇恒。

解決兼容問題方法：
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
} }
return null;
}

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

document.createElement('tagName')

4.3 添加節(jié)點(diǎn)

1. node.appendChild(child)  將一個節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾扶檐。類似于 CSS 里面的
after 偽元素。
2. node.insertBefore(child, 指定元素) 將一個節(jié)點(diǎn)添加到父節(jié)點(diǎn)的指定子節(jié)點(diǎn)前面胁艰。類似于 CSS 里面的 before 
偽元素款筑。

4.4 刪除節(jié)點(diǎn)

node.removeChild(child) 方法從 DOM 中刪除一個子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)蝗茁。

4.5 復(fù)制節(jié)點(diǎn)(克隆節(jié)點(diǎn))

node.cloneNode() 方法返回調(diào)用該方法的節(jié)點(diǎn)的一個副本醋虏。 也稱為克隆節(jié)點(diǎn)/拷貝節(jié)點(diǎn)
注意：
1. 如果括號參數(shù)為空或者為 false ，則是淺拷貝哮翘，即只克隆復(fù)制節(jié)點(diǎn)本身颈嚼，不克隆里面的子節(jié)點(diǎn)。
2. 如果括號參數(shù)為 true 饭寺，則是深度拷貝阻课，會復(fù)制節(jié)點(diǎn)本身以及里面所有的子節(jié)點(diǎn)。