《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 元素內(nèi)容操作

元素內(nèi)容操作實(shí)現(xiàn)方法：可以使用DOM中的innerHTML屬性設(shè)置或獲取元素開始標(biāo)簽和結(jié)束標(biāo)簽之間的HTML內(nèi)容，返回結(jié)果包含HTML標(biāo)簽，并保留空格和換行。1innerHTMLinnerHTML屬性的使用示例如下。element.innerHTML='HTML內(nèi)容'; //設(shè)置內(nèi)容console.log(element.innerHTML); //獲取內(nèi)容當(dāng)獲取元素得到的結(jié)果是集合時(shí)，需要先通過索引訪問集合內(nèi)部的元素對(duì)象，再通過元素對(duì)象訪問innerHTML屬性。注意使用DOM中的innerText屬性可以設(shè)置或獲取元素的文本內(nèi)容，獲取的時(shí)候會(huì)去除HTML標(biāo)簽和多余的空格、換行，在設(shè)置的時(shí)候會(huì)進(jìn)行特殊字符轉(zhuǎn)義。2innerTextinnerText屬性的示例代碼如下。element.innerText='文本內(nèi)容'; //設(shè)置內(nèi)容console.log(element.innerText); //獲取內(nèi)容2innerText相同點(diǎn)：都可以設(shè)置或獲取元素開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容。不同點(diǎn)：innerHTML屬性獲取的元素內(nèi)容包含HTML標(biāo)簽，而innerText屬性獲取的元素內(nèi)容不包含HTML標(biāo)簽。innerText屬性與innerHTML屬性的相同點(diǎn)和不同點(diǎn)如下。3textContenttextContent屬性的示例代碼如下。element.textContent='文本內(nèi)容'; //設(shè)置內(nèi)容console.log(element.textContent); //獲取內(nèi)容使用DOM中的textContent屬性可以設(shè)置或獲取元素的文本內(nèi)容，保留空格和換行。相同點(diǎn)：都可以用來設(shè)置或獲取元素的文本內(nèi)容，并且返回的時(shí)候會(huì)去除HTML標(biāo)簽。不同點(diǎn)：textContent屬性還可以設(shè)置和獲取占位隱藏元素的文本內(nèi)容。通過給元素的visibility樣式屬性設(shè)置hidden值即可實(shí)現(xiàn)占位隱藏。需要說明的是，IE8及更早版本的瀏覽器不支持textContent屬性，所以在使用時(shí)需要注意瀏覽器兼容問題。3textContent