HTML DOM 之一：访问、修改、删除HTML内容
什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
编者注：DOM 是 Document Object Model（文档对象模型）的缩写。
1、getElementById
<!DOCTYPE html>
<html>
<body> <p id="intro">Hello World!</p>
<p> DOM很有用 </p> <p style="color: red; margin-left: 20px">
1、getElementById的例子开始：
</p>
<!--getElementById-->
<script>
x=document.getElementById("intro");
document.write("innnerHTML="+x.innerHTML);
document.write("<p></p>");
document.write("firstChild.nodeValue="+x.firstChild.nodeName);
document.write("<p></p>");
document.write("firstChild.nodeValue="+x.firstChild.nodeValue);
document.write("<p></p>");
document.write("firstChild.nodeType="+x.firstChild.nodeType);
document.write("<p></p>");
</script> </body>
</html>
2、getElementsByTagName
<!DOCTYPE html>
<html>
<body> <p style="color: green; margin-left: 20px">
2、getElementsByTagName的例子开始：
</p>
<!--getElementsByTagName-->
<script>
x=document.getElementsByTagName("p");
document.write("x[1].innerHTML="+x[0].innerHTML);
</script> <div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div> <script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script>
</body>
</html>
3、修改HTML元素
<!DOCTYPE html>
<html>
<body> <p style="color: rgb(0,0,255); margin-left: 20px">
3、修改 HTML 元素的例子开始
</p>
<!--修改 HTML 元素-->
<p id="p1">Hello World!</p> <script>
document.getElementById("p1").innerHTML="New text!";
</script> <p style="color: rgb(255,255,0); margin-left: 20px"> </body>
</html>
4、向HTML DOM中添加新元素
<!DOCTYPE html>
<html>
<body> <p style="color: rgb(255,255,0); margin-left: 20px">
4、向 HTML DOM 添加新元素的例子开始
</p>
<!--向 HTML DOM 添加新元素-->
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <!--如需向 <p> 元素添加文本，您首先必须创建文本节点，
然后您必须向 <p> 元素追加文本节点，
最后，您必须向已有元素追加这个新元素。
-->
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node); var element=document.getElementById("div1");
element.appendChild(para);
</script> </body>
</html>
5、删除HTML元素
<!DOCTYPE html>
<html>
<body> <p style="color: rgb(0,255,255); margin-left: 20px">
5、删除已有的 HTML 元素的例子开始
</p>
<div id="div2">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var parent=document.getElementById("div2");
var child=document.getElementById("p1");
parent.removeChild(child);
</script> </body>
</html>
提示：能否在不引用父元素的情况下删除某个元素？
很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。
这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
6、替换元素
<!DOCTYPE html>
<html>
<body> <p style="color: rgb(0,255,255); margin-left: 20px">
6、替换元素的例子开始
</p>
<div id="div3">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var parent=document.getElementById("div3");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script> </body>
</html>
HTML DOM 之一：访问、修改、删除HTML内容的更多相关文章
- DOM操作 、js获取id的内容 和修改原来的内容（innerHTML）
js获取id的内容(getElementById) 和修改原来的内容(innerHTML) 1.通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的 ...
- HTML DOM 创建与修改
修改 HTML 元素 修改 HTML DOM 意味着许多不同的方面: 改变 HTML 内容 改变 CSS 样式 改变 HTML 属性 创建新的 HTML 元素 删除已有的 HTML 元素 改变事件(处 ...
- DOM读取和修改节点对象属性
一.获取和修改元素间的内容(3种) 1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文 固定套路:1.删除父元素下所有子元素:parent.innerHTML="&q ...
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- SILVERLIGHT实现对HTML DOM的访问
实现对HTML DOM的访问.Silverlight 2在命名空间System.Windows.Browser下内置了很多对于HTML DOM访问和操作的支持,我们最常用的一个对象是HtmlEleme ...
- Mac下显示隐藏文件 以及修改 hosts文件内容
修改hosts 文件内容: 进入etc 文件夹,找到hosts 文件,把该文件复制出来,修改完里面的内容后,先把etc中的hosts 文件删除,然后在把修改后的文件脱机去 可能需要管理员的密码,你输入 ...
- 微信小程序之动态添加、删除指定内容(view)和获取input值
这次遇到个问题: 1. 动态的添加指定的view内容..嗯..很简单..wx:for就搞定 2. 动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组..嗯.. 3 ...
- Word中的通配符随意组合进行批量替换或删除某些内容
长文档需要批量修改或删除某些内容的时候,我们可以利用Word中的通配符来搞定这一切,当然,前提是你必须会使用它.通配符的功能非常强大,能够随意组合替换或删除我们定义的规则内容,下面易老师就分享一些关于 ...
- 如何修改PDF文件内容，PDF怎么添加背景
很多的情况下,大家都会遇到PDF文件,不管是在学习中还是在工作中,对于PDF文件,文件的修改编辑是需要用到PDF编辑软件的,在编辑文件的时候,发现文件的页面是有背景颜色的,又该如何修改背景颜色呢,不会 ...
- git rebase修改历史提交内容
目录 简述 解决过程 简述 git提交历史中有一次提交的内容是有问题,因为每隔一段时间就要发一次版本,所以必须修改这次提交的内容,以便其不影响已经发布的版本. 大概是这样子的 A --- B ---- ...
随机推荐
- Swift函数调用方式浅析
函数的调用机制 函数的调用机制是在函数调用时通过那种路径走到最终调用函数地址的机制. 在编程语言中,函数的调用机制有三种 1.静态调用:编译期就确定了函数内存地址,执行效率最高,还可以使用编译器优 ...
- PerfView专题 (第十五篇)： 如何洞察 C# 中的慢速方法
一:背景 1. 讲故事 在 dump 分析旅程中,经常会遇到很多朋友反馈一类问题,比如: 方法平时都执行的特别快,但有时候会特别慢,怎么排查? 我的方法第一次执行特别慢,能看到慢在哪里吗? 相信有朋友 ...
- EF 管理数据库架构
本章会主要了解EF提供的独立迁移项目,用独立迁移项目自动创建dgml设计关系图和sql脚本. 迁移项目通常也叫(CodeFirst代码优先),在EF中迁移项目是在,在代码中设计数据库,每次对数据库的设 ...
- win10安装mysql-8.0.19-winx64
第一步:去官网下载安装 (重点)第二步:先解压,然后在mysql下创建一个my.ini文件,更改my.ini文件里面的两行安装目录,第二行加上\data,my.ini文件不能多或少一个符号,内容见文章 ...
- tensorflow.js 视频图片多目标检测
前言: Tensorflow.js 官方提供了很多常用模型库,涵盖了平时开发中大部分场景的模型.例如,前面提到的图片识别,除此之外还有人体姿态识别,目标物体识别,语音文字等识别.其中一些可能是 Pyt ...
- 2023-08-02：给定一棵树，一共有n个点， 每个点上没有值，请把1~n这些数字，不重复的分配到二叉树上， 做到 : 奇数层节点的值总和 与 偶数层节点的值总和 相差不超过1。 返回奇数层节点分配
2023-08-02:给定一棵树,一共有n个点, 每个点上没有值,请把1~n这些数字,不重复的分配到二叉树上, 做到 : 奇数层节点的值总和 与 偶数层节点的值总和 相差不超过1. 返回奇数层节点分配 ...
- [mysql]MGR简介与部署
前言 MySQL Group Replication,简称MGR,是MySQL官方于2016年推出的一个全新的高可用解决方案,采用Paxos分布式一致性协议作为高可用和一致性解决方案.在MGR之前的高 ...
- ros源的移除
在Ubuntu上卸载了ros系统后,每次运行源更新命令 sudo apt update 都会报错,提示ros源找不到等问题. 这时,只需要 cd /etc/apt/souce.list.d sudo ...
- api接口对接如何实现，php如何对接api
API接口对接是现代软件开发中不可或缺的一部分,它允许不同的应用程序之间进行数据交换和服务调用.在PHP中,可以使用多种方式实现API接口的对接,包括基于HTTP协议的传统方法以及现代的API客户端库 ...
- 文心一言 VS 讯飞星火 VS chatgpt （87）-- 算法导论8.2 4题
四.用go语言,设计一个算法,它能够对于任何给定的介于0到 k 之间的 n 个整数先进行预处理,然后在 O(1)时间内回答输入的 n个整数中有多少个落在区间[a..b]内.你设计的算法的预处理时间应为 ...