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

  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。



文章目录

  • [⭐ 什么是DOM?](#⭐ 什么是DOM?)
  • [⭐ 节点操作](#⭐ 节点操作)
    • [🌟 改变元素节点中的内容](#🌟 改变元素节点中的内容)

⭐ 什么是DOM?

DOM(Document Object Model,文档对象模型)是JavaScirpt操作HTML文档的接口,使文档操作变得非常优雅、简便。

DOM是JS操控HTML和CSS的桥梁

DOM是我们前端开发领域使用最多的技术

DOM里的节点思维

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

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

html 复制代码
<div class="box">
    <p>西瓜</p>
    <p>葡萄</p>
    <p>苹果</p>
    <p>橘子</p>
    <p>香梨</p>
</div>

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

DOM的最大特点就是将文档表示为节点树

DOM中最大的父节点是document。document是一个特殊的节点,HTML文档中所有的标签、属性及标签里的文本都是它的子节点

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

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

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

DOM就是通过操作节点的方式来新增、修改、删除文档里的内容。

⭐ 节点操作

🌟 改变元素节点中的内容

改变元素节点中的内容可以使用两个相关属性:1. innerHTML 2. innerText

innerHTML属性能以HTML语法设置节点中的内容

innerText属性只能以纯文本的形式设置节点中的内容

示例代码:

innerHTML

html 复制代码
<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

html 复制代码
<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格式的文本进行解析。

相关推荐
永乐春秋25 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿26 分钟前
【前端】CSS
前端·css
Ajiang282473530428 分钟前
对于C++中stack和queue的认识以及priority_queue的模拟实现
开发语言·c++
ggdpzhk28 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
幽兰的天空32 分钟前
Python 中的模式匹配:深入了解 match 语句
开发语言·python
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10223 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js