-
獲取HTML標(biāo)簽元素
- getElementById('tagId') //通過(guò)id屬性獲取
- getElementsByTagName('tagName') //通過(guò)標(biāo)簽名獲取,得到數(shù)組，通過(guò)下標(biāo)可定位
- getElementsByName('tagAttrName') //通過(guò)name屬性來(lái)獲取元素
- getElementsByClassName('tagClassName') //通過(guò)class屬性來(lái)獲取元素
- querySelector('') //可以通過(guò)id->#,class->. ,標(biāo)簽來(lái)獲取元素，只獲取該屬性的第一個(gè)元素
- querySelectorAll('') //獲取該條件的全部元素拢切，可通過(guò)下標(biāo)定位元素
-
操作HTML元素
- 添加元素節(jié)點(diǎn)
var _divBox = document.getElementById('divBox'); //獲取頁(yè)面中div元素對(duì)象
var _p = document.createElement('p'); //創(chuàng)建p節(jié)點(diǎn)
var _txt = document.createTextNode('this is zboy\'s para!'); //創(chuàng)建文本節(jié)點(diǎn)
_p.appendChild(_txt); //將文本填充到p節(jié)點(diǎn)中去
_divBox.appendChild(_p); //再將p節(jié)點(diǎn)添加到div容器中
//不創(chuàng)建文本節(jié)點(diǎn)猴凹，直接填充內(nèi)容
var _divBox = document.getElementById('divBox'); //獲取頁(yè)面中div元素對(duì)象
_divBox.innerHTML='<p>這是通過(guò)innerHTML填充的元素距糖！</p>';
//使用innerHTML的時(shí)候要注意,他是將該元素從起始到結(jié)束全部替換后面的內(nèi)容
- 移除元素節(jié)點(diǎn)
var _divBox = document.getElementById('divBox'); //獲取頁(yè)面中div元素對(duì)象
var _p = document.getElementsByTagName('p'); //獲取頁(yè)面中p節(jié)點(diǎn)
_divBox.removeChild(_p); //移除p標(biāo)簽節(jié)點(diǎn)
//或者直接可以通過(guò)下面代碼來(lái)刪除指定元素
var _p = document.getElementsByTagName('p'); //獲取頁(yè)面中p節(jié)點(diǎn)
_p.parentNode.removeChild(_p) //刪除該指定節(jié)點(diǎn)
- 改變?cè)貙傩?/li>
var _divBox = document.getElementById('divBox'); //獲取頁(yè)面中div元素對(duì)象
_divBox.name='divBox'; //設(shè)置/改變divBox元素屬性name為‘divBox’
var _p = document.getElementsByTagName('p')[0]; //獲取頁(yè)面中p節(jié)點(diǎn)
_p.id='paras'; //設(shè)置/改變p標(biāo)簽的id為‘paras’
- 改變?cè)貥邮?/li>
var _divBox = document.getElementById('divBox'); //獲取頁(yè)面中div元素對(duì)象
_divBox.style.backgroundColor='#FF0000'; //設(shè)置div容器的背景色為紅色
//這里的style后的名稱和css一致夫否，將-連字符改成駝峰式
- 獲取元素中內(nèi)容
//獲取元素中的HTML元素
_divBox.innerHTML = '<button>button</button>';
var _html = _divBox.innerHTML; //輸出<button>button</button>
//獲取元素中文本
var _txt = _divBox.innerText; //輸出button
//獲取包含自身的HTML元素
var _outerHTML = _divBox.outerHTML //輸出 <div id='divBox' name='divBox' style='...'><button>button</button></div>
