一,、節(jié)點(diǎn)常用操作
document.createElement()用來(lái)生成網(wǎng)頁(yè)元素節(jié)點(diǎn)，參數(shù)為元素的標(biāo)簽名
document.createTextNode()用來(lái)生成文本節(jié)點(diǎn),，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容
node.appendChild()接受一個(gè)節(jié)點(diǎn)對(duì)象作為參數(shù),，將其作為最后一個(gè)子節(jié)點(diǎn)，插入當(dāng)前節(jié)點(diǎn)
node.hasChildNodes()返回一個(gè)布爾值,，表示當(dāng)前節(jié)點(diǎn)是否有子節(jié)點(diǎn)
node.removeChild()接受一個(gè)子節(jié)點(diǎn)作為參數(shù),，用于從當(dāng)前節(jié)點(diǎn)移除該子節(jié)點(diǎn)
node.cloneNode()用于克隆一個(gè)選中的節(jié)點(diǎn)。它接受一個(gè)布爾值作為參數(shù),，表示是否同時(shí)克隆子節(jié)點(diǎn),，默認(rèn)是false，即不克隆子節(jié)點(diǎn),。注意: 不會(huì)克隆綁定到該元素上的事件
node.innerHTML返回該元素包含的 HTML 代碼,。該屬性可讀寫(xiě)，常用來(lái)設(shè)置某個(gè)節(jié)點(diǎn)的內(nèi)容,；（不屬于W3C DOM規(guī)范）
node.innerText返回該元素包含的內(nèi)容,。該屬性可讀寫(xiě)
node.nextElementSibling返回緊跟在當(dāng)前節(jié)點(diǎn)后面的第一個(gè)同級(jí)Element節(jié)點(diǎn)，如果當(dāng)前節(jié)點(diǎn)后面沒(méi)有同級(jí)節(jié)點(diǎn),，則返回null
node.previousElementSibling返回緊跟在當(dāng)前節(jié)點(diǎn)前面的第一個(gè)同級(jí)Element節(jié)點(diǎn),，如果當(dāng)前節(jié)點(diǎn)前面沒(méi)有同級(jí)節(jié)點(diǎn)，則返回null
node.parentElement返回當(dāng)前節(jié)點(diǎn)的父級(jí)Element節(jié)點(diǎn)
node.childNodes返回一個(gè)NodeList集合,，成員包括當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)(注意空格回車(chē)也算)
node.firstChild返回樹(shù)中節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn),，如果節(jié)點(diǎn)是無(wú)子節(jié)點(diǎn)，則返回null
node.lastChild返回該節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，如果該節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)則返回null
<div id="div" style="border:1px solid red;"> //創(chuàng)建元素,、標(biāo)簽節(jié)點(diǎn) var p = document.createElement('p'); //創(chuàng)建文本節(jié)點(diǎn) var pText = document.createTextNode('P標(biāo)簽內(nèi)內(nèi)容'); document.getElementById('div').appendChild(p);
二,、節(jié)點(diǎn)屬性
var div = document.querySelector('#div'); console.log(div.zhy); //undefined
屬性操作的標(biāo)準(zhǔn)方法：
node.getAttribute()返回當(dāng)前元素節(jié)點(diǎn)的指定屬性。如果指定屬性不存在,，則返回null
node.setAttribute()為當(dāng)前元素節(jié)點(diǎn)新增屬性,。如果同名屬性已存在
node.hasAttribute()返回一個(gè)布爾值，表示當(dāng)前元素節(jié)點(diǎn)是否包含指定屬性
node.removeAttribute()從當(dāng)前元素節(jié)點(diǎn)移除屬性
var div = document.querySelector('#div'); //設(shè)置屬性,，有則修改,，無(wú)則添加，可設(shè)置非標(biāo)準(zhǔn)屬性 div.setAttribute('id','d'); div.setAttribute('zdy','zdy'); //獲取屬性值,，可獲取非標(biāo)準(zhǔn)屬性 console.log(div.getAttribute('id')); //d console.log(div.getAttribute('zdy')); //zdy
三,、css樣式屬性
節(jié)點(diǎn)對(duì)象.style.樣式屬性方式只能獲取行內(nèi)css樣式，而寫(xiě)在 style 標(biāo)簽內(nèi)的樣式表,，無(wú)法獲取和修改,。
getComputedStyle()接受一個(gè)節(jié)點(diǎn)對(duì)象，返回該節(jié)點(diǎn)對(duì)象最終樣式信息的對(duì)象,，所謂“最終樣式信息”,，指的是各種CSS規(guī)則疊加后的結(jié)果
注意： getComputedStyle() 是window對(duì)象下的方法，不是DOM對(duì)象
在具體使用的時(shí)候還有一些需要重點(diǎn)注意的細(xì)節(jié)：
1,、名字需要改寫(xiě),，將橫杠從CSS屬性名中去除，然后將橫杠后的第一個(gè)字母大寫(xiě)：
比如background-color寫(xiě)成backgroundColor
2,、屬性值都是字符串,，設(shè)置時(shí)必須包括單位：
比如，divStyle.width的值不能寫(xiě)為100,，而要寫(xiě)為100px
width: 200px; height: 200px; border: 1px solid red; document.getElementById('div').onclick = function(){ this.style.width = parseInt(getComputedStyle(div).width)+10+"px"; this.style.height = parseInt(getComputedStyle(div).height)+10+"px";
|
