關(guān)于dom操作，我們分創(chuàng)建厌杜、增奉呛、刪计螺、改、查瞧壮、屬性操作登馒、事件操作來大體介紹一下
創(chuàng)建
1.createElement：通過傳入標(biāo)簽來創(chuàng)建一個(gè)dom
demo
var node=document.createElement('div')
node.innerHTML='我是新增的node'
document.body.appendChild(node)
2.createTextNode：用來創(chuàng)建一個(gè)文本節(jié)點(diǎn)
demo
var node=document.createTextNode('我是新增的文本節(jié)點(diǎn)')
document.body.appendChild(node)
3.cloneNode：克隆一個(gè)節(jié)點(diǎn)，有一個(gè)參數(shù)咆槽，true支持深度克隆陈轿，false不支持深度克隆
demo
<div id="div1">我是一個(gè)dom
<span>我是一個(gè)子節(jié)點(diǎn)</span>
</div>
<script type="text/javascript">
var cn = document.querySelector('#div1').cloneNode()
var cn2 = document.querySelector('#div1').cloneNode(true)
console.log(cn)
console.log(cn2)
</script>
淺拷貝的結(jié)果為
<div id="div1"></div>
深拷貝的結(jié)果為
<div id="div1">我是一個(gè)dom
<span>我是一個(gè)子節(jié)點(diǎn)</span>
</div>
4. createDocumentFragment： 用來插入一段dom
這個(gè)方法的運(yùn)用，可以減少頁面的重繪與回流問題秦忿，能批量的插入dom
demo
var temp = document.createDocumentFragment()
var a = document.createElement('div')
a.innerHTML = 'It\'s a'
var b = document.createElement('span')
b.innerHTML = 'It\'s b'
temp.appendChild(a)
temp.appendChild(b)
document.body.appendChild(temp)
添加到body之前麦射，都沒有真正的加入到dom tree里面，避免了重繪與回流
增
1.appendChild
A.appendChild(B):將B添加到A子元素的最后一個(gè)位置灯谣，如下
默認(rèn)的dom結(jié)構(gòu)
<div id="parent">
<span>我是一開始就有的子節(jié)點(diǎn)</span>
</div>
執(zhí)行以下的js之后
var parent = document.querySelector('#parent')
var child = document.createElement('div')
child.innerHTML = '我是子節(jié)點(diǎn)'
parent.appendChild(child)
<div id="parent">
<span>我是一開始就有的子節(jié)點(diǎn)</span>
<div>我是子節(jié)點(diǎn)</div>
</div>
2.insertBefore
parent.insertBefore(newNode, exitsNode):將newNode添加到exitsNode的前面
默認(rèn)dom結(jié)構(gòu)
<div id="me">
<div>child</div>
<div>child2</div>
<div>child3</div>
<div>child4</div>
<div>child5</div>
<div>child6</div>
<div>child7</div>
</div>
<input type="number">
<button>新增一個(gè)孩子</button>
執(zhí)行以下的js代碼潜秋，填入一個(gè)數(shù)字，點(diǎn)擊按鈕之后
function addNode() {
var index = document.querySelector('input').value
var tempDom = document.createElement('div')
tempDom.innerText = '我是新增的孩子'
var me = document.querySelector('#me')
var children = me.querySelectorAll('div')
me.insertBefore(tempDom, children[index])
}
document.querySelector('button').addEventListener('click', addNode)
<div id="me">
<div>child</div>
<div>child2</div>
<div>child3</div>
<div>我是新增的孩子</div>
<div>child4</div>
<div>child5</div>
<div>child6</div>
<div>child7</div>
</div>
注：如果第二個(gè)參數(shù)不存在或者異常酬屉，則會(huì)插入到最后
3.insertAdjacentElement
它包括兩個(gè)參數(shù)半等，其中第二個(gè)參數(shù)是要加的子節(jié)點(diǎn)，核心在于第一個(gè)參數(shù)呐萨，有如下的取值
beforebegin:把第二個(gè)參數(shù)加到當(dāng)前節(jié)點(diǎn)的前面
afterend：把第二個(gè)參數(shù)加到當(dāng)前節(jié)點(diǎn)的后面
afterbegin：把第二個(gè)參數(shù)加到當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)位置
beforeend：把第二個(gè)參數(shù)加到當(dāng)前節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)的位置
一開始我看到這個(gè)也是懵逼的杀饵，其實(shí)記這個(gè)可以掌握一定的技巧，以beforebegin,和afterbegin來記谬擦，首先切距，begin肯定是在前面，before肯定也是在前面惨远，就是兩個(gè)前面谜悟，就在節(jié)點(diǎn)前加，我就不類推了
刪
1.removeChild
parent.removeChild(child)北秽，刪除parent下的child節(jié)點(diǎn)葡幸，并且返回這個(gè)節(jié)點(diǎn)
dom結(jié)構(gòu)如下
<div id="deleteDemo">
<div>第一個(gè)子節(jié)點(diǎn)</div>
<div>第二個(gè)子節(jié)點(diǎn)</div>
<div>第三個(gè)子節(jié)點(diǎn)</div>
<div>第四個(gè)子節(jié)點(diǎn)</div>
</div>
<input type="number" id="txtDeleteIndex" />
<button id="btnDelete">刪除一個(gè)孩子</button>
執(zhí)行以下的js代碼，輸入一個(gè)數(shù)字贺氓，并點(diǎn)擊按鈕
function deleteNode() {
var index = document.querySelector('#txtDeleteIndex').value
var deleteDemo = document.querySelector('#deleteDemo')
var children = deleteDemo.querySelectorAll('div')
var removeChild = children[index] && deleteDemo.removeChild(children[index])
console.log(removeChild)
}
document.querySelector('#btnDelete').addEventListener('click', deleteNode)
<div id="deleteDemo">
<div>第一個(gè)子節(jié)點(diǎn)</div>
<div>第三個(gè)子節(jié)點(diǎn)</div>
<div>第四個(gè)子節(jié)點(diǎn)</div>
</div>
2.replaceChild
parent.replaceChild(newNode,oldNode)蔚叨，將oldNode替換為newNode
dom如下
<div id="replaceNodeDemo">
<div>第一個(gè)子節(jié)點(diǎn)</div>
<div>第二個(gè)子節(jié)點(diǎn)</div>
<div>第三個(gè)子節(jié)點(diǎn)</div>
<div>第四個(gè)子節(jié)點(diǎn)</div>
</div>
<input type="number" id="txtReplaceIndex" />
<button id="btnReplace">替換一個(gè)孩子</button>
執(zhí)行以下的js代碼，輸入一個(gè)數(shù)字辙培，并點(diǎn)擊按鈕
function replaceNode() {
var index = document.querySelector('#txtReplaceIndex').value
var replaceNodeDemo = document.querySelector('#replaceNodeDemo')
var children = replaceNodeDemo.querySelectorAll('div')
var newNode = document.createElement('div')
newNode.innerHTML = '我是替換之后的節(jié)點(diǎn)'
var replaceChild = children[index] && replaceNodeDemo.replaceChild(newNode, children[index])
console.log(replaceChild)
}
document.querySelector('#btnReplace').addEventListener('click', replaceNode)
<div id="replaceNodeDemo">
<div>第一個(gè)子節(jié)點(diǎn)</div>
<div>第二個(gè)子節(jié)點(diǎn)</div>
<div>我是替換之后的節(jié)點(diǎn)</div>
<div>第四個(gè)子節(jié)點(diǎn)</div>
</div>
改
修改dom蔑水，一般是修改dom的屬性，dom的html, text, 表單的值等
1.setAttribute
A.setAttribute(property, value):設(shè)置屬性property的值為value
代碼
<div id="divSetAttribute"></div>
<label for="txtProperty">屬性：</label>
<input id="txtProperty" />
<br />
<label for="txtValue">屬性值：</label>
<input id="txtValue" />
<button id="btnProperty">設(shè)置屬性</button>
<script type="text/javascript">
var divSetAttribute = document.querySelector('#divSetAttribute')
var txtProperty = document.querySelector('#txtProperty')
var txtValue = document.querySelector('#txtValue')
var btnProperty = document.querySelector('#btnProperty')
function setAttribute() {
divSetAttribute.setAttribute(txtProperty.value, txtValue.value)
}
btnProperty.addEventListener('click', setAttribute)
</script>
2.innerHTML：獲取或者設(shè)置dom的dom內(nèi)容
dom結(jié)構(gòu)如下
<div id="parent">
<div>第一個(gè)子節(jié)點(diǎn)</div>
<div>第二個(gè)子節(jié)點(diǎn)</div>
<div>第三個(gè)子節(jié)點(diǎn)</div>
<div>第四個(gè)子節(jié)點(diǎn)</div>
</div>
獲取parent的innerHTML扬蕊，結(jié)果為
<div>第一個(gè)子節(jié)點(diǎn)</div>
<div>第二個(gè)子節(jié)點(diǎn)</div>
<div>第三個(gè)子節(jié)點(diǎn)</div>
<div>第四個(gè)子節(jié)點(diǎn)</div>
3.innerText：獲取或者設(shè)置dom的文本內(nèi)容
dom結(jié)構(gòu)如下
<div id="parent">
<div>第一個(gè)子節(jié)點(diǎn)</div>
<div>第二個(gè)子節(jié)點(diǎn)</div>
<div>第三個(gè)子節(jié)點(diǎn)</div>
<div>第四個(gè)子節(jié)點(diǎn)</div>
</div>
獲取parent的innerText搀别，結(jié)果為
第一個(gè)子節(jié)點(diǎn)
第二個(gè)子節(jié)點(diǎn)
第三個(gè)子節(jié)點(diǎn)
第四個(gè)子節(jié)點(diǎn)
注意與innerHTML的區(qū)別
4.value：獲取或者設(shè)置input, select的value
<select id="s1">
<option value="2">中國(guó)</option>
<option selected="true" value=3>日本</option>
<option value="4">韓國(guó)</option>
</select>
<script>
document.querySelector('#s1').querySelectorAll('option')[document.querySelector('#s1').selectedIndex].value
</script>
查
查詢dom，這一塊的api比較豐富尾抑，可能會(huì)有遺漏
1.document.getElementById(id):古老的方法歇父，根據(jù)id獲取元素蒂培，不推薦
2.document.getElementsByTagName(tagName):古老的方法，根據(jù)dom的類型獲取元素榜苫，不推薦
3.document.getElementsByClassName(className):古老的方法毁渗，根據(jù)className獲取元素，不推薦
document.getElementsByName(name):古老的方法单刁，根據(jù)name獲取元素灸异，不推薦
4.document.getElementsByTagNameNS():沒用過
----------------------------------------------分割線----------------------------------------------
接下來，要重點(diǎn)介紹幾個(gè)目前常用的api
1.document.querySelector(css選擇器)：根據(jù)css選擇器來獲取dom羔飞，如果有多個(gè)肺樟，返回第一個(gè)
dom
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
執(zhí)行以下代碼
document.querySelector('.test')
返回
<div class="test">1</div>
2.document.querySelectorAll(css選擇器)：返回所有滿足條件的元素
以上面的例子為例，如果使用querySelectorAll逻淌，那么返回值就是三個(gè)元素么伯，這兩個(gè)api比較相似，只是一個(gè)返回一個(gè)dom卡儒，一個(gè)返回多個(gè)dom田柔，不展開了
3.獲取子節(jié)點(diǎn)children
dom代碼
<div id="div1">
It's me
<span>child</span>
<div>
child2
<p>leaf</p>
</div>
</div>
執(zhí)行以下代碼之后
document.querySelector('#div1').children
得到了兩個(gè)節(jié)點(diǎn)，分別是
<span>child</span>
和
<div>
child2
<p>leaf</p>
</div>
由此可見骨望，children獲取的是dom元素
4.獲取所有子節(jié)點(diǎn)childNodes
還是上面的dom結(jié)構(gòu)硬爆，來執(zhí)行以下以下代碼
document.querySelector('#div1').childNodes
返回了五個(gè)元素
nodes[0] =It's me
nodes[1] =<span>child</span>
nodes[2] =換行符
nodes[3] =<div>
child2
<p>leaf</p>
</div>
nodes[4] =換行符
很明顯，它不僅返回了dom子元素擎鸠，還返回了文本子元素
5.獲取父節(jié)點(diǎn)parentNode和parentElement
兩者大體差不多缀磕，區(qū)別和children和childNodes類似，不贅述了
6.獲取兄弟節(jié)點(diǎn)previousSibling劣光、previousElementSibling袜蚕、nextSibling、nextElementSibling
推薦使用帶Element的绢涡，大多數(shù)情況下牲剃，好像都不需要文本節(jié)點(diǎn)
7.獲取首尾節(jié)點(diǎn)firstChild、firstElementChild雄可、lastChild凿傅、lastElementChild
區(qū)別參考上一條
8.getComputedStyle
該方法是window下的一個(gè)方法，用來計(jì)算一個(gè)dom元素生成好之后的style滞项，很全狭归，不過因?yàn)閏hrome下的調(diào)試很方便夭坪，很少用到這個(gè)方法
9.getBoundingClientRect
這個(gè)方法我經(jīng)常用到文判，在以前的博文中也有提到，它是用來獲取邊距的室梅，很有用
屬性操作
1.setAttribute：設(shè)置dom的屬性
A.setAttribute(name,value),上面有提到戏仓，不贅述
2.getAttribute：得到dom的屬性
A.getAttribute('id') 獲取dom A的屬性id
3.removeAttribute移除屬性
A.removeAttribute(id) 移除id屬性
事件
1.添加事件：事件的添加疚宇，一般三種方式，直接綁定dom赏殃，通過js賦值敷待，通過addEventListener
代碼
<div id="div1" onclick="alert(1)">
我是用來測(cè)試的
</div>
<script type="text/javascript">
var div1 = document.querySelector('#div1')
div1.onclick = function() {
alert(2)
}
div1.addEventListener('click', function() {
alert(3)
})
</script>
以上代碼分別通過三種方式綁定了事件，點(diǎn)擊的結(jié)果是仁热，彈出了2和3榜揖，并沒有彈出1，這是因?yàn)榭勾溃?dāng)js中直接給onclick賦值時(shí)举哟，把直接綁定在dom上的事件覆蓋了，假如下面還有一個(gè)onclick的賦值迅矛，那么它也會(huì)覆蓋alert(2)妨猩，但是add這種方式并不會(huì)覆蓋，而是會(huì)追加秽褒，我們?cè)侔汛a修改一下驗(yàn)證
<div id="div1" onclick="alert(1)">
我是用來測(cè)試的
</div>
<script type="text/javascript">
var div1 = document.querySelector('#div1')
div1.onclick = function() {
alert(2)
}
div1.onclick = function() {
alert('2和3之間')
}
div1.addEventListener('click', function() {
alert(3)
})
div1.addEventListener('click', function() {
alert(4)
})
</script>
修改之后壶硅，彈出的結(jié)果是‘2和3之間’，3销斟，4庐椒，由此可見，以上結(jié)論正確
2.移除事件
對(duì)于直接綁定在dom上的事件蚂踊，可以采用removeAttribute來移除
對(duì)于賦值on這種的扼睬，可以重新賦值為null
對(duì)于add的，這種稍微復(fù)雜一點(diǎn)悴势，此時(shí)首先在add時(shí)窗宇，不能直接綁定匿名方法 了，要定義一個(gè)具名的方法特纤，移除時(shí)也要綁定上此方法军俊，代碼如下
<div id="div1">
我是用來測(cè)試的
</div>
<script type="text/javascript">
var div1=document.querySelector('#div1')
function Test(){
alert(133)
div1.removeEventListener('click',Test)
}
div1.addEventListener('click',Test)
</script>
以上點(diǎn)擊事件，只會(huì)執(zhí)行一次
