HTML DOM 简介

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

#html #javascript

HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准。

DOM → \to → Document Object Model

  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准

节点概念

将HTML的所有事物视为树的节点，将一个HTML文档视为一棵树

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点
    对于下面文档，可分解为如下一棵树
<html>
<head>
    <title>标题</title>
</head>
<body>
    <h1>题目</h1>
    <a href="www.baidu.com">链接</a>
</body>
</html>

在这里插入图片描述

DOM 属性、方法

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。javascript的编程接口则是对象方法和对象属性。

  • 方法是您能够执行的动作（比如添加或修改元素）。
  • 属性是您能够获取或设置的值（比如节点的名称或内容）。

访问 HTML 元素

通过id，标签名，类名的方式，获取指定节点

getElementById()方法

语法

node.getElementByld("id");

返回带有指定id的元素。

<p id="hw">hello world</p>
<script>
x=document.getElementById("hw"); //x通过id获取了所需节点
document.write("<p> 来自 hw 段落文本"+x.innerHTML+"<\p>")
</script>

效果 ↓ \downarrow ↓

在这里插入图片描述

getElementsByTagName()方法

语法

node.getElementsByTagName("tagname");

返回带有指定标签名的所有元素，返回值为数组。

getElementsByClassName()方法

语法

node.getElementsByClassName("classname");

与上两类类似

修改/创建 HTML 元素

  • 改变 HTML 内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变事件（处理程序）

修改HTML内容

使用 innerHTML属性

node.innerHTML=new_content

<p id="id1">content that will be changed<p>
<script>
document.getElementById("id1").innerHTML="new content";
</script>

修改HTML样式

应用各自属性，直接修改

<p id="id1">paragraph1<p>
<p id="id2">paragraph2<p>
<script>
document.getElementById("id2").style.color="blue";
document.getElementById("id2").style.fontFamily="Arial";
document.getElementById("id2").style.fontSize="larger";
</script>

在这里插入图片描述

创建新的 HTML 元素

appendChild()函数添加元素，将新元素作为加入部分的最后一个子元素

<div id="div1">
    <p> add a new paragraph below.</p>
</div>
<script>
var para=document.createElement("p");
var Cont=document.createTextNode("The new paragraph.");
para.appendChild(Cont);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

在这里插入图片描述

insertBefore()函数在指定元素前添加元素

<div id="div1">
    <p id="paraold"> add a new paragraph above.</p>
</div>
<script>
var para=document.createElement("p");
var Cont=document.createTextNode("The new paragraph.");
para.appendChild(Cont);

var element=document.getElementById("div1");
var para1=document.getElementById("paraold");
element.insertBefore(para,para1);
</script>

效果图

删除已有元素

removeChild()函数删除父节点下的指定子节点

<div id="div1">
    <p id="p1">para1</p>
    <p id="p2">pare2</p>
</div>
<script>
var elem1=document.getElementById("div1");
var para1=document.getElementById("p1");
elem1.removeChild(para1);
</script>

替换已有元素

replaceChild()函数替换子节点

<div id="div1">
    <p id="p1">para1</p>
    <p id="p2">para2</p>
</div>
<script>
var para3=document.createElement("p");
var text=document.createTextNode("a new paragraph");
para3.appendChild(text);
var elem1=document.getElementById("div1");
var para1=document.getElementById("p1");
elem1.replaceChild(para3,para1);
</script>

在这里插入图片描述

事件处理

  • 当用户点击鼠标时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • …

两类处理事件的方法

  • 作为属性加入HTML标签
  • 使用javascript分配事件
在html标签中加入属性
  • 一种是写在标签上的较短的函数
    <button onclick="this.innerHTML='hello world!'">文本变化按钮</button>
  • 作为函数写在HTML文档头部
    <head>
    <script>
    function click_button(id)
    {
        id.innerHTML="hello world!"
    }
    </script>
</head>
<body>
    <button onclick="click_button(this)">文本变化按钮</button>
</body>
    在这里插入图片描述
    ⇓ \Downarrow ⇓
    在这里插入图片描述
使用JavaScript分配事件
<button id="click_btn">文本变化按钮</button>
<script>
document.getElementById("click_btn").onclick=function(){chg_txt_btn()};
function chg_txt_btn()
{
    document.getElementById("click_btn").innerHTML="hello world!";
}
</script>

HTML标签事件属性(部分)

属性名用途
onclick鼠标点击后
onmousedown鼠标点击时
onmouseup鼠标松开时
onload进入页面，可用于处理 cookies
onunload退出界面，可用于处理 cookies
onchange用于输入字段的验证
onmouseover当光标移动到指定标签触发函数
onmouseout当光标离开元素时触发函数

用于指示节点的节点属性

节点列表

对于getElementByTagName()此类返回值为含有多个节点元素的列表的函数，以类似数组的方式指示所需要的节点，下标从零开始

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<script>
para_list=document.getElementsByTagName("p");
document.write("second paragraph is "+para_list[1].innerHTML);
</script>

在这里插入图片描述

length

节点列表的length属性指示列表的长度

para_list=document.getElementsByTagName("p");
for(i=0;i<para_list.length;i++)
{
    ...
}

指示节点间父子关系的属性

parentNode, firstChild, lastChild属性分别为父节点，第一个孩子，最后一个孩子节点

<p id="first_para">hello world!</p>
<script>
x=document.getElementById("first_para");
document.write(x.firstChild.nodeValue+" again");
</script>

在这里插入图片描述

childNodes 孩子节点列表

nodeValue 节点内容

文档根节点

  • document.documentElement - 全部文档
  • document.body - 文档的主体

html dom 手册
07-27
NULL 博文链接：https://hanyuanbo.iteye.com/blog/741480
HTML DOM简介_动力节点Java学院整理
09-28
HTML DOM（Document Object Model）是一种编程接口，用于处理HTML和XML文档。它是W3C（万维网联盟）制定的一个标准，允许开发人员通过JavaScript或其他脚本语言与网页内容进行交互，包括添加、删除、修改和布局页面...
DOM（一）——HTML DOM
热门推荐
学会改变自己——才能突破
11-27 2万+
对于B/S开发，客户端与服务器端的交互是非常必要的，JavaScript的提出解决了很多问题，AJAX的提出也解决了异步通信的问题，更加为用户着想了。而DOM是其中非常基础的知识，在学习AJAX的同时，我学习了一下DOM的相关操作，这篇重点讲一下HTML DOM的相关内容，其实就是在HTML网页上进行的各种操作。           一，概述： DOM（对象文档模型（Docume
DOM和HTML的区别和联系
最新发布
m0_74416054的博客
05-25 281
​ HTML定义了网页的结构和内容，而DOM则提供了对这些结构和内容进行编程操作的接口。​ 通过JavaScript等脚本语言与DOM的交互，开发者可以实现网页的动态效果、用户交互和数据处理等功能。
JS读取html dom对象
jhhuang4836的专栏
11-20 140
JavaScript HTML DOM JS 验证 DOM HTML 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM （文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。 HTML DOM 树 通过可编...
HTML DOM(一)：认识DOM
web开发
07-18 446
什么是DOM？ 通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HT...
HTML-DOM模型
My_story_begins的博客
09-21 1961
如何使用前端调试
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，而无需直接处理复杂的正则表达式，大大...
HTML DOM简介.rar
02-21
目录如下： 1. DOM可以做什么？ 2. DOM的结构 3. 访问DOM节点1——getElementById() 4. 访问DOM节点2——getElementsByTagName() 5. 访问DOM节点3——通过节点关系 6. DOM节点信息 ...11. DOM简介总结
HTML DOM（文档对象模型）
weixin_52563771的博客
05-22 955
HTML DOM（文档对象模型）一、DOM简介二、DOM树DOM方法四、获取标签元素通过 id 查找 HTML 元素通过标签名查找 HTML 元素通过类名查找 HTML 元素通过 CSS 选择器查找 HTML 元素获取body元素获取html元素五、DOM事件六、修改元素内容七、修改元素样式属性八、节点操作节点层级关系创建与添加元素节点(先创建在添加元素)删除节点 一、DOM简介 文档对象模型（Document Object Model），是W3C标准中课处理可扩展标记语言（HTML、XML）的标准编程接
php dom是什么,DOM是什么意思
weixin_30134145的博客
03-20 333
DOM就是文件对象模型，通过JavaScript代码对页面进行重构从而增强与页面的交互性本篇文章将要分享的是有关DOM的含义介绍，具有一定参考价值，希望对大家有所帮助。DOM的含义：DOM称为文件对象模型(DocumentObjectModel，简称DOM)，是W3C组织推荐的处理可扩展置标语言的标准编程接口DOM是HTML文档的内存中对象表示，它提供了使用JavaScript与网页交互的方式。D...
dom.html,DOM HTML
weixin_42509105的博客
06-14 274
DOM HTMLHTML DOM 允许 JavaScript 改变 HTML 元素的内容。改变 HTML 输出流JavaScript 能够创建动态的 HTML 内容：今天的日期是：Tue Oct 18 2016 09:59:23 GMT+0800在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。实例html>牛骨文(niuguwen.cn)...
HTML中的DOM
wssjiayou的博客
08-25 399
HTML中的DOM
DOM简介
hjyp的博客
08-12 267
文章目录理论知识动态改变DOM树的节点DOM树节点的基本接口对象和接口的关系DOM中常用接口的方法 理论知识 页面也应用了面向对象的思想，一个页面会被组织成一个document对象，这个document对象是顶级对象，此对象下又可以包含很多子对象，即页面上的元素。元素可以通过多种API进行添加。 DOM不是一种编程语言，而是对HTML或者XML等文档的一种结构化表示方法。DOM向外提供了很多API，通过这些API可以操控DOM里的元素。DOM可以用任何语言来实现，而不仅仅是JavaScript，只不过大多数
HTML DOM 学习
Hmengy的博客
07-19 557
DOM——（Document Object Model）文件对象模型，是W3C的标准，定义了访问HTML和XML的标准。 它提供了一种结构化的文档表示方式，从而使你可以修改它的内容以及最终的表达方式，进而将网页和脚本货或编程语言连接了起来。 核心DOM——针对任何结构化文档的标准模型 HTML DOM——针对HTMl文档的标准模型 XML DOM——针对XML文档的标准模型 HTMl DO...
DOM简介【DOM】
QQ1012421396的博客
08-20 766
DOM的概念：     DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。     D：文档 – html 文档 或 xml 文档     O：对象 – document 对象的属性和方法     M：模型       DOM
深入解析HTML DOM技术文档
压缩包子文件的文件名称“HtmlDom.chm”表明这是一个编译好的HTML帮助文件。CHM文件是一种常用的微软帮助文件格式，它将多个HTML文档打包在一起，通常附带搜索和目录导航功能，方便用户查看和检索信息。这个文件可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值