〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介

---

---

⭐ 什么是DOM？

DOM里的节点思维

我们先来看一个JS通过DOM操控HTML和CSS的实际的例子。

**例子：**比如下面的HTML结构，现在想用JavaScript在“苹果”后面插入一个p标签，内容是“香蕉”。

<div class="box">
    <p>西瓜</p>
    <p>葡萄</p>
    <p>苹果</p>
    <p>橘子</p>
    <p>香梨</p>
</div>

题目分析：使用DOM的节点思维：div是一个“节点”，它内部原有5个p“子节点”，这5个子节点是从0开始排序的。现在我们要做的就是新创建一个p节点，然后插入到原有2号子节点的后面。

比如一个HTML文档的结构，用DOM节点树来表示的话就是这样的：

下图中蓝色的是元素节点、橘黄色的是属性节点、绿色的是内容节点：

由此可见，DOM的节点树和html的层级结构很相似，所以DOM节点是非常人性化、容易理解的。

⭐ 节点操作

🌟 改变元素节点中的内容

示例代码：

innerHTML

<div id="box"></div>
<script>
    //定义节点变量，o开头暗示这是一个对象
    var oBox = document.getElementById('box');
    oBox.innerHTML = '哈士奇';
    oBox.innerHTML = '<ul><li>python全栈</li><li>产品思维</li><li>大前端</li></ul>';
</script>

innerText

<div id="box"></div>
<script>
    //定义节点变量，o开头暗示这是一个对象
    var oBox = document.getElementById('box');
    oBox.innerText = '哈士奇';
    oBox.innerText = '<ul><li>python全栈</li><li>产品思维</li><li>大前端</li></ul>';
</script>

总结：innerHTML和innerText的区别就是innerText不会对HTML格式的文本进行解析。