什么是 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. 最为常用的Laravel操作(3)-模板

    Blade 模板引擎 模板继承 定义布局: <!-- 存放在 resources/views/layouts/app.blade.php --> <html> <head ...

  2. linux内核编译基础知识储备 --- 过渡篇（四）

    文章目录 一. 一种makefile中定义函数的方式 二. makefile之if函数 三. MAKE变量 四. $(quiet) 4.1 quiet = 空 与 quiet=quiet_ 的区别 4 ...

  3. ansible 的特点

    ansible的特点 基于Python语言实现 模块化,调用特定的模块,完成特定任务 部署简单,基于python和SSH(默认已安装),yum install 即可,不需要客户端 安全,基于OpenS ...

  4. SpringBoot 启动流程分析(寻找扩展点)

    1.SpringBoot maven 依赖版本 <?xml version="1.0" encoding="UTF-8"?> <project ...

  5. 代码随想录算法训练营第四天|力扣24.两两交换链表节点、力扣19.删除链表的倒数第N个结点、力扣面试02.07链表相交、力扣142.环形链表

    两两交换链表中的节点(力扣24.) dummyhead .next = head; cur = dummyhead; while(cur.next!=null&&cur.next.ne ...

  6. Numpy，一篇足以

    numpy 用于数值计算 ndarray, 一个有效的多维数组,能提供以数组为导向的快速数值计算和灵活的广播功能(broadcasting) 便利的数学函数 用于读取/写入(reading/writi ...

  7. nacos系列：简介和安装

    目录 版本选择 安装 windows安装 centos安装 mysql方式存储 官网:https://nacos.io github:https://github.com/alibaba/nacos ...

  8. filter() 函数的学习

    1.    filter() 函数 用于过滤序列,过滤掉不符合条件的元素,返回一个迭代器对象,如果要转换为列表,可以使用 list() 来转换.该接收两个参数, 第一个为函数,第二个为序列,序列的每个 ...

  9. python 运行环境变为 pytest in (for) xxx.py原因

    因为本人的自定义函数名称开头为test,在.py文件内我用了unittest框架,所以环境随着变化了. 修改回去很简单,只要不使用test开头或者换个文件夹.

  10. 原神盲盒风格：AI绘画Stable Diffusion原神人物公仔实操：核心tag+lora模型汇总

    本教程收集于:AIGC从入门到精通教程汇总 在这篇文章中,我们将深入探讨原神盲盒的艺术风格,以及如何运用AI绘画技术(Stable Diffusion)--来创造原神角色公仔.我们将通过实践操作让读者 ...