济南网站制作报价,个人网站备案名称举例,营销策略有哪些理论,网站后台管理系统页面说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ 什么是DOM⭐ 节点操作 改变元素节点中的内容 ⭐ 什么是DOM DOMDocument Object Model文档对象模型是JavaScirpt操作HTML文档的接口使文档操作变得非常优雅、简便。 DOM是JS操控HTML和CSS的桥梁 DOM是我们前端开发领域使用最多的技术 DOM里的节点思维
我们先来看一个JS通过DOM操控HTML和CSS的实际的例子。
**例子**比如下面的HTML结构现在想用JavaScript在“苹果”后面插入一个p标签内容是“香蕉”。
div classboxp西瓜/pp葡萄/pp苹果/pp橘子/pp香梨/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
div idbox/div
script//定义节点变量o开头暗示这是一个对象var oBox document.getElementById(box);oBox.innerHTML 哈士奇;oBox.innerHTML ullipython全栈/lili产品思维/lili大前端/li/ul;
/scriptinnerText
div idbox/div
script//定义节点变量o开头暗示这是一个对象var oBox document.getElementById(box);oBox.innerText 哈士奇;oBox.innerText ullipython全栈/lili产品思维/lili大前端/li/ul;
/script总结innerHTML和innerText的区别就是innerText不会对HTML格式的文本进行解析。
