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 ---- ...
随机推荐
- 行行AI人才直播第13期：刘红林律师《AIGC创业者4大法律问题需注意》
行行AI人才(海南行行智能科技有限公司)是博客园和顺顺智慧共同运营的AI行业人才全生命周期服务平台. AIGC爆火至今,商业落地已成为各行各业焦点的问题.它的广泛应用也带来了一系列的法律风险和挑战.一 ...
- 最全面的JAVA多线程知识总结
背景: 2023年经营惨淡,经历了裁员就业跳槽再就业,在找工作过程中对于知识的梳理和总结,本文总结JAVA多线程. 应用场景: 需要同时执行多个任务或处理大量并发请求时, 目前常用的场景有: We ...
- WebStorm: 配置React中useState自动补齐功能
配置如下 模板文本如下所示 const [$STATE$, $SET_STATE$] = useState($INITAL_STATE$) 编辑变量 SET_STATE文本如下所示 concat(&q ...
- pandas去重方法
原文链接:https://blog.csdn.net/missyougoon/article/details/83926840 数据去重可以使用duplicated()和drop_duplicates ...
- 一 APPIUM基本理论知识（转）
1.APPIUM介绍 Appium 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web 应用和混合应用.所谓的"移动原生应用"是指那些用 iO ...
- Mapbox Style 规范
https://my.oschina.net/u/3185947/blog/4819218
- 常见的 NoSQL 数据库有哪些？
前言 今天我们来介绍一下工作开发中常见的一些NoSQL数据库及其基本特点.欢迎在评论区留下文章中没有介绍且好用的NOSQL数据库. 什么是NOSQL数据库 非关系型数据库又被称为 NoSQL(Not ...
- ABC295 D题 题解
题意简述 给定一个长度不超过\(\;5\times 10^5\;\)的,仅有数字构成的字符串,问存在多少段子串,使得子串内字符重新排序后,前半段与后半段相同? 做法分析 重组后前后两部分相同,其实也就 ...
- 解决win10/ubuntu端口占用问题
win10解决方案 首先打开cmd命令行 命令行里输入 netstat -ano|findstr 被占用端口号 然后可以看到占用该端口号的pid 输入taskkill -f -pid pid号即可 u ...
- 【RocketMQ】消息的发送
RocketMQ是通过DefaultMQProducer进行消息发送的,它实现了MQProducer接口,MQProducer接口中定义了消息发送的方法,方法主要分为三大类: send同步进行消息发送 ...