HTML DOM

最新推荐文章于 2024-08-18 10:54:05 发布
最新推荐文章于 2024-08-18 10:54:05 发布
阅读量85 收藏
点赞数
分类专栏： 前端 文章标签： dom javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50626011/article/details/117337657
版权

DOM

文章目录

前言

DOM是什么呢？
DOM（对象文档模型（Document Object Model））是W3C的规范，DOM可以修改一个文档的内容和结构。也就是说，这是表示和处理一个HTML或XML文档的常用方法。DOM技术是用户页面可以动态的变化，使页面的交互性增强。DOM通过JavaScript等脚本语言来进行读取，改变HTML、XHTML以及XML等文档。

一、DOM

HTML DOM 是：

  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准
    可以通过DOM实现对HTML的增添，删除，修改等

HTML DOM节点树
节点树

二、DOM方法

方法描述
removeChild()删除子节点
replaceChild()替换子节点
createElement()创建元素节点
insertBefore()在指定节点面前加入新的节点
getElementById()方法返回带有指定 ID 的元素

代码如下（示例）：
演示getElementById() 方法

<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<p><b>getElementById</b> 方法！</p>
<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>
</body>
</html>

2.DOM属性

属性： 节点（HTML 元素）的值

innerHTML 属性 获取元素的内容
获取ID为one的元素的内容

<script>
	var txt=document.getElementById("one").innerHTML;
	document.write(txt);
</script>

nodeName 属性
规定节点的名称
nodeType 属性
nodeType 属性返回节点的类型
查看更多DOM的属性

代码如下（示例）：

三、DOM 元素：

获取元素的方法

  • 使用 getElementById() 方法 通过ID名
  • 使用 getElementsByTagName() 方法 通过标签名
  • 使用 getElementsByClassName() 方法 通过类名
    例如：
<script>
	x=document.getElementById("intro");
	document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

创建 HTML 元素

appendChild()方法

<script>
	var para=document.createElement("p");
	var node=document.createTextNode("new.");
	para.appendChild(node);
	var element=document.getElementById("div1");
element.appendChild(para);

insertBefore()方法

<script>
	var para=document.createElement("p");
	var node=document.createTextNode("This is new.");
	para.appendChild(node);
	var element=document.getElementById("div1");
	var child=document.getElementById("p1");
	element.insertBefore(para,child);
</script>

删除HTML 元素

删除div1的p1元素

<script>
	var parent=document.getElementById("div1");
	var child=document.getElementById("p1");
	parent.removeChild(child);
</script>

替换HTML元素

replaceChild() 方法

用p元素代替div的子元素p1

<script>
	var para=document.createElement("p");
	var node=document.createTextNode("new");
	para.appendChild(node);
	var parent=document.getElementById("div1");
	var child=document.getElementById("p1");
	parent.replaceChild(para,child);
</script>

四、DOM事件

HTML 事件的例子：

  • 当点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当触发按键时
    …

五、DOM操作

修改 HTML 元素
修改 HTML DOM 许多不同的方面：

  • 改变 HTML 内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
    …
    例如 改变颜色
<script>
	document.getElementById("p").style.color="blue";
</script>
TinaSone
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
将HTMLDOM对象转换成字符串
qq_41672008的博客
07-22 1万+
将HTMLDOM对象转换成字符串 之前定义过的 document.beHTMLDOM() 函数可以将 htmlDOM字符串解析成 HTMLDOM，但是反过来，可不可以呢？即 将 HTMLDOM 转换成 HTMLDOM字符串 话不多说，直接上代码： <!DOCTYPE html> <html> <head> <meta chars...
2020 使用HTML DOM实现对订单表格的增删改操作(前端小练)
夜林的博客
10-29 3122
eed
html dom remove,js中dom节点删除remove方法
weixin_32143245的博客
06-25 3081
本文教程操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。1、remove方法将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。绑定的事件是否同时被移除，删除自身(无参数时)，有参数时要根据参数所涉及的范围决定。2、使用语法strong.remove()3、使用参数选择器表达式，比如remove(“.class”);remov...
HTML DOM style属性操作
JayYuen的博客
09-17 3760
dom.style.property:通过元素的style属性间接操作css样式 一，修改颜色 title.style.color：修改节点的颜色 <body> <h1 id="title">修改颜色</h1> </body> <script> let title = document.getElementById("...
学了HTML DOM简介、方法、属性，如何查找HTML元素你会了吗
m0_70117514的博客
05-03 2213
文章目录 目录 文章目录 前言 HTML DOM简介 什么是 DOM？ 什么是 HTML DOM？ HTML DOM 节点树 HTML DOM方法和属性 常用的 HTML DOM 方法： 常用的 HTML DOM 属性 查找HTML元素 代码 结果​ 注意： 前言 大家好，我是遇见ice。 个人主页：遇见ice的博客 本文讲了HTML DOM简介、HTML DOM方法、HTML DOM属性，以及如何查找HTM节点。 走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区..
html中dom什么意思,dom属性是什么意思啊 html dom是什么意思，通俗易懂
热门推荐
weixin_42453050的博客
06-10 1万+
dom的全称是Document Object Model，翻译过来是文档对象模型的意思，是W3C组织推荐的处理可扩展标志语言的标准编程接口。 DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口。DOM属性和HTML属性的区别一、是否可变的区别： html属性中的值是不变的，dom属性的值是变化的。 二、适用场合不同： 核心DOM适合...
c#操作html dom元素,C#获取与修改HTML DOM元素信息
weixin_39636610的博客
06-23 1424
用C#和JavaScript交互首先要解决C#读取HTML DOM元素的问题。 在System.Windows.Browser命名空间下，有一个HtmlDocument、HtmlPage、HtmlElement等类，可以用来读取HTML DOM元素。其读取方法和JavaScript如出一辙。引用内容： //初始化一个document HtmlDocument document = HtmlPage...
PHP Simple HTML DOM 简单使用
PHP开发
11-19 8283
一般与curl配合使用 远程抓取页面内容后，利用 Simple HTML DOM生成dom结构，之后可以像jQuery 一样方便的操作dom &amp;amp;amp;amp;amp;lt;?php $ch = curl_init();//初始化一个cURL会话 curl_setopt($ch ,CURLOPT_URL ,'http://www.hao123.com');//设置 URL curl_setopt($ch ,CURL...
当html dom加载完毕,JavaScript判断DOM何时加载完毕的技巧
weixin_28724319的博客
06-09 2201
处理HTML DOM文档存在一个难题是，JavaScript可以在DOM完全加载之前执行，这会给你的代码引发不少的潜在问题。浏览器的渲染和操作顺序大致如下列表：HTML解析完毕外部脚本和样式表加载完毕脚本在文档内解析并执行HTML DOM完全构造起来图片和外部内容加载网页完成加载在网页头部并且从外部文件加载的脚本会在HTML真正构造之前执行。如前所述，这是个至关重要的问题，因为这两处执行的脚本并不...
simplehtmldom Doc api帮助文档
10-28
simplehtmldom是一款在PHP环境中用于处理HTML和XML的工具库，它被设计得易于使用且功能强大，类似于前端开发中常用的jQuery库。simplehtmldom的出现使得在服务器端进行HTML内容的解析和操作变得更加简单和直观。下面...
HTML DOM Viewer
12-12
说明：用来查看DOM的工具，可以当作手册来用，也可以用来Debug,很方便的说 把代码copy到要调试的页面中，浏览时点击DOM Tester链接就会打开DOM查看，双击展开对象，右边的文本框里显示的是属性值，修改文本框会改变...
HTMLDOM参考手册
07-22
资源名称：HTML DOM 参考手册资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
12-19
Simple HTML DOM是一个方便的PHP插件，它提供了一个简单的接口，让我们能够使用DOM（Document Object Model）方式来操作HTML。这个插件允许我们像操作DOM对象一样处理HTML，而无需直接处理复杂的正则表达式，大大...
html dom 手册
07-27
HTML DOM（Document Object Model）手册是一本至关重要的资源，它详细介绍了如何通过编程方式操作HTML文档。DOM是一种标准，允许程序和脚本动态更新、添加、删除和改变元素及属性，使得网页内容变得可交互。这个手册...
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 309
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
最新发布
weixin_43213064的博客
08-18 389
【代码】springboot网上商品订单转手系统bootpf
vue3进阶用法之通过调用函数动态加载组件用法及示例
wz9608的博客
08-14 357
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 1027
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值