HTML DOM

最新推荐文章于 2025-08-23 15:32:34 发布
原创 最新推荐文章于 2025-08-23 15:32:34 发布 · 326 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #文档 #function #input #div #action

本文详细介绍了 HTML DOM 的概念及其如何将 HTML 文档解析为节点树结构，包括不同类型的节点及其属性，并演示了如何使用 getElementById 和 getElementsByTagName 方法来访问和操作这些节点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 HTML DOM

 

HTML DOM是HTML Document Object Model(文档对象模型)的缩写，HTML DOM则是专门适用与HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。

 

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

节点：

DOM 是这样规定的：

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

 

元素节点类型(nodeType)：1

文本节点类型(nodeType：3

属性节点类型(nodeType：2

节点的访问：

getElementById() 和 getElementsByTagName()方法

getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。这两种方法会忽略文档的结构。假如您希望查找文档中所有的 <p> 元素，getElementsByTagName() 会把它们全部找到，不管 <p> 元素处于文档中的哪个层次。同时，getElementById() 方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。

 

 

语法：

<span id=”ID”></span>

document.getElementById("ID");

 

注：此方法只能用于document 对象

 

getElementsByTagName() 语法

document.getElementsByTagName("标签名称");

 

或者：

document.getElementById('ID').getElementsByTagName("标签名称");

 

实例：

下面这个例子会返回所有 <p> 元素的一个节点列表，且这些 <p> 元素必须是 id 为 "maindiv" 的元素的后代：

document.getElementById('maindiv').getElementsByTagName("p");

 

parentNode、firstChild以及lastChild方法

parenNode--------父节点

firstChild-----------首节点

lastChild-----------尾节点

 

 

实例：

<script type="text/javascript">

window.onload = function() {

    //通过getElementById("edu")方法获取select的对象

          var edus = document.getElementById("edu");

     var edus1 = edus.childNodes;

     alert(edus1.length);

     var fc = edus.firstChild;

     alert(fc.nodeName);

     var lc = edus.lastChild;

     alert(lc.nodeName);

     var llc = lc.firstChild;

     alert(llc.nodeValue);

    

      var msg="";

     for(var i=0;i<edus1.length;i++){

       if(edus1[i].nodeType==1)

         msg+=edus1[i].lastChild.nodeValue+",";

     }

    

 

          document.getElementById("showMsg").innerHTML=msg;

         }

</script>

         <body>

         <div>

                   <form action="">

                   用户名:<input type="text" name="name" />

                   学历:

         <select id="edu" name="education"><option value="大专">大专生</option>

           <option value="本科">本科生</option>

           <option value="硕士">硕士生</option>

           <option value="博士">博士生</option>

   </select>

                   <input type="submit" value="注册" />

                   </form>

         </div>     

                     用户的学历是：

   <div id="showMsg">

  

   </div>

 

 

         </body>

注意 标签之间的空格也算节点。上面方法比较不容易理解、下面有更简单的方法：

         <script type="text/javascript">

window.onload = function() {

    //通过getElementById("edu")方法获取select的对象

         var edus = document.getElementById("edu");

         //通过select中options集合获取所有的option对象

         var edus1  =   edus.options;

         var msg ="";

         //遍历所有的option对象的文本值

           for(var i=0;i<edus1.length;i++){

               msg+=edus1[i].innerHTML+",";

           }

          //把获取的msg信息写入到showMsg的div中

          document.getElementById("showMsg").innerHTML=msg;

         }

</script>

 

此方法用options直接得到OPTION的值

wangshuo19911
关注
HTML DOM（文档对象模型） 详细讲解
qq_53016083的博客
01-18 2294
1. HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。 2. 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 3. 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
将HTMLDOM对象转换成字符串
qq_41672008的博客
07-22 1万+
将HTMLDOM对象转换成字符串 之前定义过的 document.beHTMLDOM() 函数可以将 htmlDOM字符串解析成 HTMLDOM，但是反过来，可不可以呢？即 将 HTMLDOM 转换成 HTMLDOM字符串 话不多说，直接上代码： <!DOCTYPE html> <html> <head> <meta chars...
html dom remove,js中dom节点删除remove方法
weixin_32143245的博客
06-25 3247
本文教程操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。1、remove方法将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。绑定的事件是否同时被移除，删除自身(无参数时)，有参数时要根据参数所涉及的范围决定。2、使用语法strong.remove()3、使用参数选择器表达式，比如remove(“.class”);remov...
PHP爬虫教程：使用cURL和Simple HTML DOM Parser
weixin_44617651的博客
04-14 2645
一个关于如何使用PHP的cURL和HTML解析器来创建爬虫的教程，特别是处理代理信息的部分。首先，我需要确定用户的需求是什么。可能他们想从某个网站抓取数据，但遇到了反爬措施，需要使用代理来避免被封IP。不过用户没有提到具体的目标网站，所以我需要保持教程的通用性。
2020 使用HTML DOM实现对订单表格的增删改操作(前端小练)
夜林的博客
10-29 3281
eed
HTML DOM style属性操作
JayYuen的博客
09-17 3908
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 2324
文章目录 目录 文章目录 前言 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 1572
用C#和JavaScript交互首先要解决C#读取HTML DOM元素的问题。 在System.Windows.Browser命名空间下，有一个HtmlDocument、HtmlPage、HtmlElement等类，可以用来读取HTML DOM元素。其读取方法和JavaScript如出一辙。引用内容： //初始化一个document HtmlDocument document = HtmlPage...
simplehtmldom:这是简单HTML DOM解析器的镜像，网址为
05-07
simplehtmldom是用于PHP的快速可靠HTML DOM解析器。 主要特征 纯粹基于PHP的DOM解析器（无需XML扩展名）。 适用于格式正确且已损坏HTML文档。 加载网页，本地文件和文档字符串。 支持CSS选择器。 要求 simple...
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
12-19
Simple HTML DOM是一个方便的PHP插件，它提供了一个简单的接口，让我们能够使用DOM（Document Object Model）方式来操作HTML。这个插件允许我们像操作DOM对象一样处理HTML，而无需直接处理复杂的正则表达式，大大...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
在Web前端开发中，JavaScript与HTML DOM（Document Object Model）的交互是至关重要的。这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素...
JS添加或删除HTML dom元素的方法实例分析
10-17
在Web开发中，对HTML文档对象模型（DOM）的操作是极其重要的环节，它涉及到页面内容的动态更新。JavaScript提供了多种方式来添加和删除DOM元素，这些操作对于实现如用户交互、动态内容加载等功能至关重要。接下来，...
simplehtmldom Doc api帮助文档
10-28
simplehtmldom是一款在PHP环境中用于处理HTML和XML的工具库，它被设计得易于使用且功能强大，类似于前端开发中常用的jQuery库。simplehtmldom的出现使得在服务器端进行HTML内容的解析和操作变得更加简单和直观。下面...
【前端面试题✨】HTML 篇（一）
最新发布
2301_77798916的博客
08-23 503
本文介绍了HTML相关核心概念与技术：1) HTML语义化强调使用合适标签表达内容，提升可读性与SEO；2) Canvas用于JavaScript图形绘制，适合动态渲染；3) SVG与Canvas对比，前者为矢量图适合交互，后者适合高性能动画；4) HTML5新特性如语义标签、音视频支持、WebSocket实时通信及地理定位API；5) 解决兼容性问题的方法；6) title与alt属性的区别及重要性；7) HTML全局属性的作用。这些内容覆盖了现代Web开发的关键HTML知识点。
【html2img/pdf 纯！纯！python将html保存为图片/pdf！！效果非常的棒！】
放飞自我的coder
08-22 290
本文介绍了一个使用HTML和Python创建固定样式卡片的方案。通过HTML构建了一个1200x675像素的卡片布局，包含图片区和文字内容区，采用优雅的UI设计。使用plutoprint库将HTML转换为PNG图片，实现页面渲染和导出功能。最终生成一张融合骑行、绿植、建筑元素的摄影构图分析卡片，包含5个核心要点：多场景融合构图、动态姿态捕捉、前景框架运用、光线参数匹配以及情绪环境协同。整个流程展示了如何将HTML设计通过Python工具链实现可视化输出。
如何在DHTMLX Scheduler中实现带拖拽的任务待办区（Backlog）
开发者效率提升工具的博客
08-21 1156
为了满足 DHTMLX Scheduler 用户的实际业务需求，本文将展示如何在 JavaScript 日程组件中实现“带拖拽的任务待办区（Backlog）”。这一功能让用户可以像物业管理系统那样，通过简单的拖拽操作将任务分配到时间轴上的合适位置，大幅提升排程效率与体验。
HTML第三次作业
2301_81538927的博客
08-13 1521
【代码】html第三次作业。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值