什么是 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内容的更多相关文章

  1. DOM操作 、js获取id的内容 和修改原来的内容（innerHTML）

    js获取id的内容(getElementById) 和修改原来的内容(innerHTML) 1.通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的 ...

  2. HTML DOM 创建与修改

    修改 HTML 元素 修改 HTML DOM 意味着许多不同的方面: 改变 HTML 内容 改变 CSS 样式 改变 HTML 属性 创建新的 HTML 元素 删除已有的 HTML 元素 改变事件(处 ...

  3. DOM读取和修改节点对象属性

    一.获取和修改元素间的内容(3种) 1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文 固定套路:1.删除父元素下所有子元素:parent.innerHTML="&q ...

  4. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  5. SILVERLIGHT实现对HTML DOM的访问

    实现对HTML DOM的访问.Silverlight 2在命名空间System.Windows.Browser下内置了很多对于HTML DOM访问和操作的支持,我们最常用的一个对象是HtmlEleme ...

  6. Mac下显示隐藏文件 以及修改 hosts文件内容

    修改hosts 文件内容: 进入etc 文件夹,找到hosts 文件,把该文件复制出来,修改完里面的内容后,先把etc中的hosts 文件删除,然后在把修改后的文件脱机去 可能需要管理员的密码,你输入 ...

  7. 微信小程序之动态添加、删除指定内容(view)和获取input值

    这次遇到个问题: 1. 动态的添加指定的view内容..嗯..很简单..wx:for就搞定 2. 动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组..嗯.. 3 ...

  8. Word中的通配符随意组合进行批量替换或删除某些内容

    长文档需要批量修改或删除某些内容的时候,我们可以利用Word中的通配符来搞定这一切,当然,前提是你必须会使用它.通配符的功能非常强大,能够随意组合替换或删除我们定义的规则内容,下面易老师就分享一些关于 ...

  9. 如何修改PDF文件内容，PDF怎么添加背景

    很多的情况下,大家都会遇到PDF文件,不管是在学习中还是在工作中,对于PDF文件,文件的修改编辑是需要用到PDF编辑软件的,在编辑文件的时候,发现文件的页面是有背景颜色的,又该如何修改背景颜色呢,不会 ...

  10. git rebase修改历史提交内容

    目录 简述 解决过程 简述 git提交历史中有一次提交的内容是有问题,因为每隔一段时间就要发一次版本,所以必须修改这次提交的内容,以便其不影响已经发布的版本. 大概是这样子的 A --- B ---- ...

随机推荐

  1. 2021-10-09 Core学习

    控制器学习 如果有ID参数,根据前面定义的{controller=Home}/{action=Index}/{id?} 可以换成一下格式 页面学习 视图 基架搭建 然后在nuget控制台添加 Add- ...

  2. ASP.NET WebForm中在TextBox输入框回车时会触发其他事件，如何处理？

    一.TextBox在输入框回车时会触发其他事件,如何解决? 前台代码: <ul> <li><span>名称:</span><asp:TextBox ...

  3. 青少年CTF平台-Web-Robots

    题目信息 题目名称:Robots 题目描述:昨天十三年社团讲课,讲了Robots.txt的作用,小刚上课没有认真听课正在着急,你能不能帮帮忙? 题目难度:一颗星 解题过程 访问题目链接 在这里插入图片 ...

  4. Cilium系列-15-7层网络CiliumNetworkPolicy简介

    系列文章 Cilium 系列文章 前言 今天我们进入 Cilium 安全相关主题, 介绍 CiliumNetworkPolicies 相比于 Kubernetes 网络策略最大的不同: 7 层网络策略 ...

  5. 简述redis的单线程模式

    前言 在redis版本6之前,网络IO和键值对读写都是由一个线程来完成的.而redis的其他功能,比如持久化.异步删除.集群数据同步等,是由其他线程完成的. 为什么采用单线程 多线程有助于提升吞吐率( ...

  6. 树莓派烧录系统并在无外接屏幕的情况下连接VNC

    ​ 上个月老板给了块树莓派3B,开心坏了,在咸鱼上掏了很多零件,花了一段时间做出了一个二驱动的智能小车,但是觉得小车太小,就在又在咸鱼上掏了个四区的地盘,但是在拆卸的过程中,发现树莓派WIFI没有了, ...

  7. Android OAID 获取 基于MSA oaid_sdk_1.0.25.zip

    目录 简介 SDK下载 支持版本 开始使用 可能遇到的问题 替代方案 APK下载 写在最后 简介 本文链接:https://www.cnblogs.com/dks-/p/14357041.html 根 ...

  8. html5 2.0学习

    列表定义:是一种特别的对象集合.集合:集中在一起合二为一(聚集). 聚集:多个列(信息资源)排在一起.信息资源:一堆数据,可能是字符,可能是图片. 列表分类:有序列表 无序列表  (自)定义列表  有 ...

  9. SpringBoot 测试实践 - 2：单元测试与集成测试

    单元测试 vs. 集成测试 只编写单测,无法测试方法之间的集成情况,而且某些需求可能会修改多个方法,这可能会影响方法对应的单测,涉及到大量的相关单测的修改,这样的维护成本很高 可以把重心放在完善集成测 ...

  10. ThreadLocal：线程中的全局变量

    最近接了一个新需求,业务场景上需要在原有基础上新增2个字段,接口新增参数意味着很多类和方法的逻辑都需要改变,需要先判断是否属于该业务场景,再做对应的逻辑.原本的打算是在入口处新增变量,在操作数据的时候 ...