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 ---- ...
随机推荐
- win10安装mysql时提示错误：mysqld: Can't change dir to 'C: oftware\mysql\data\' (Errcode: 2 - No such file or directory)
win10安装解压版mysql时,提示错误: 2019-10-22 09:02:00 2004 [ERROR] Can't find messagefile 'C:\WINDOWS\system32\ ...
- python笔记：第十一章正则表达式
1.模块re 以一定规则,快速检索文本,或是实现一些替换操作 默认下,区分大小写 2.常见的匹配字符表 字符 描述 \d 代表任意数字,就是阿拉伯数字 0-9 这些 \D 代表非数字的字符.与\d完全 ...
- Mybatis(映射器 mappers)
MapperRegistry:注册绑定我们的Mapper文件 方式一: <!--每一个Mapper.XML都需要在Mybatis核心配置文件中注册--> <mappers> & ...
- ip2location.py
import re import geoip2.database from tabulate import tabulate from matplotlib import pyplot as plt ...
- 修复grub分区
修复grub分区 实验环境:grup.cfg文件丢失,引导出错 1,删除grup.cfg配置文件 2,重启虚拟机 3,重启进入救援模式 再读进度条的时候快速点击Esc键 选着光驱或者u盘启动
- Windows校验文件MD5和SHA值的方法
1.需求背景 下载或传输文件后,需要计算文件的MD5.SHA256等校验值,以确保下载或传输后的文件和源文件一致 2.校验方法 如上图所示,可以使用Windows自带的certutil命令来计算一个文 ...
- 当小白遇到FullGC
起初没有人在意这场GC,直到它影响到了每一天! 前言 本文记录了一次排查FullGC导致的TP99过高过程,介绍了一些排查时思路,线索以及工具的使用,希望能够帮助一些新手在排查问题没有很好的思路时,提 ...
- 《数据结构-C语言》顺序表
@ 目录 顺序表 结构定义 初始化 创建表 求表长 判断表是否为空 取值 查找 插入 删除 逆置 清空 销毁 遍历打印 测试 顺序表 结构定义 #include <stdio.h> #in ...
- C# Wke例子 -- WebUI登录窗口
概述 Wke介绍: http://blog.csdn.net/sabrecode/article/details/78145938 用Wke做了一个登录窗口, webui比较特殊. 因为它就是一个超文 ...
- JavaAgent寄生在目标进程中引起的ClassNotFoundException
今天有解决方案部的小伙伴反映,我公司XWind产品在分析客户应用程序的潜在性能问题时,总是显现诊断任务异常,为了定位问题的根因,我们马上要求解决方案部的小伙伴提供XWind相关的日志,从日志中找到了如 ...