• 說(shuō)明：該文屬于 大前端全棧架構(gòu)白寶書(shū)專欄，目前階段免費(fèi)，如需要項(xiàng)目實(shí)戰(zhàn)或者是體系化資源，文末名片加V！
• 作者：不渴望力量的哈士奇(哈哥)，十余年工作經(jīng)驗(yàn), 從事過(guò)全棧研發(fā)、產(chǎn)品經(jīng)理等工作，目前在公司擔(dān)任研發(fā)部門(mén)CTO。
• 榮譽(yù)：2022年度博客之星Top4、2023年度超級(jí)個(gè)體得主、谷歌與亞馬遜開(kāi)發(fā)者大會(huì)特約speaker、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者。

---

• ?? 白寶書(shū)系列
  • ?? 啟示錄 - 攻城獅的自我修養(yǎng)
  • ?? Python全棧白寶書(shū)
  • ?? ChatGPT實(shí)踐指南白寶書(shū)
  • ?? 產(chǎn)品思維訓(xùn)練白寶書(shū)
  • ?? 全域運(yùn)營(yíng)實(shí)戰(zhàn)白寶書(shū)
  • ?? 大前端全棧架構(gòu)白寶書(shū)

? 什么是DOM？

DOM（Document Object Model，文檔對(duì)象模型）是JavaScirpt操作HTML文檔的接口，使文檔操作變得非常優(yōu)雅、簡(jiǎn)便。

DOM是JS操控HTML和CSS的橋梁

DOM是我們前端開(kāi)發(fā)領(lǐng)域使用最多的技術(shù)

DOM里的節(jié)點(diǎn)思維

我們先來(lái)看一個(gè)JS通過(guò)DOM操控HTML和CSS的實(shí)際的例子。

**例子：**比如下面的HTML結(jié)構(gòu)，現(xiàn)在想用JavaScript在“蘋(píng)果”后面插入一個(gè)p標(biāo)簽，內(nèi)容是“香蕉”。

<div class="box">
    <p>西瓜</p>
    <p>葡萄</p>
    <p>蘋(píng)果</p>
    <p>橘子</p>
    <p>香梨</p>
</div>

題目分析：使用DOM的節(jié)點(diǎn)思維：div是一個(gè)“節(jié)點(diǎn)”，它內(nèi)部原有5個(gè)p“子節(jié)點(diǎn)”，這5個(gè)子節(jié)點(diǎn)是從0開(kāi)始排序的?，F(xiàn)在我們要做的就是新創(chuàng)建一個(gè)p節(jié)點(diǎn)，然后插入到原有2號(hào)子節(jié)點(diǎn)的后面。

DOM的最大特點(diǎn)就是將文檔表示為節(jié)點(diǎn)樹(shù)

DOM中最大的父節(jié)點(diǎn)是document。document是一個(gè)特殊的節(jié)點(diǎn)，HTML文檔中所有的標(biāo)簽、屬性及標(biāo)簽里的文本都是它的子節(jié)點(diǎn)

比如一個(gè)HTML文檔的結(jié)構(gòu)，用DOM節(jié)點(diǎn)樹(shù)來(lái)表示的話就是這樣的：

下圖中藍(lán)色的是元素節(jié)點(diǎn)、橘黃色的是屬性節(jié)點(diǎn)、綠色的是內(nèi)容節(jié)點(diǎn)：

由此可見(jiàn)，DOM的節(jié)點(diǎn)樹(shù)和html的層級(jí)結(jié)構(gòu)很相似，所以DOM節(jié)點(diǎn)是非常人性化、容易理解的。

DOM就是通過(guò)操作節(jié)點(diǎn)的方式來(lái)新增、修改、刪除文檔里的內(nèi)容。

? 節(jié)點(diǎn)操作

?? 改變?cè)毓?jié)點(diǎn)中的內(nèi)容

改變?cè)毓?jié)點(diǎn)中的內(nèi)容可以使用兩個(gè)相關(guān)屬性：1. innerHTML 2. innerText

innerHTML屬性能以HTML語(yǔ)法設(shè)置節(jié)點(diǎn)中的內(nèi)容

innerText屬性只能以純文本的形式設(shè)置節(jié)點(diǎn)中的內(nèi)容

示例代碼：

innerHTML

<div id="box"></div>
<script>
    //定義節(jié)點(diǎn)變量，o開(kāi)頭暗示這是一個(gè)對(duì)象
    var oBox = document.getElementById('box');
    oBox.innerHTML = '哈士奇';
    oBox.innerHTML = '<ul><li>python全棧</li><li>產(chǎn)品思維</li><li>大前端</li></ul>';
</script>

innerText

<div id="box"></div>
<script>
    //定義節(jié)點(diǎn)變量，o開(kāi)頭暗示這是一個(gè)對(duì)象
    var oBox = document.getElementById('box');
    oBox.innerText = '哈士奇';
    oBox.innerText = '<ul><li>python全棧</li><li>產(chǎn)品思維</li><li>大前端</li></ul>';
</script>

總結(jié)：innerHTML和innerText的區(qū)別就是innerText不會(huì)對(duì)HTML格式的文本進(jìn)行解析。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-756029.html

到了這里，關(guān)于〖大前端 - 基礎(chǔ)入門(mén)三大核心之JS篇?〗- JavaScript 的DOM簡(jiǎn)介的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！