HTML DOM

最新推荐文章于 2024-10-05 16:51:11 发布
最新推荐文章于 2024-10-05 16:51:11 发布
阅读量101 收藏
点赞数
分类专栏： 学习笔记 文章标签： html dom js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50946965/article/details/119698592
版权

HTML DOM总结

一、HTML DOM节点

节点 : 父、子和同胞

节点也节点之间是有层级关系的
父(parent)、子(child)、同胞(sibling) 等术语用来描述节点与节点之间的关系

  • 父级的称为父节点，子级的称为子节点
  • 同级的子节点称为同胞，即拥有相同父节点的节点
  • 在节点树中，顶端节点称为根(root)
  • 除了根其他的每个节点都有父节点

二、HTML DOM方法

方法是你能够执行的动作(比如添加或删除元素)

一些常用的HTML DOM属性

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

一些常用的DOM方法

  • getElementById(id) - 返回带有指定ID的元素
  • getElementsByTagName() - 返回包含带有指定标签名称的对象的集合(是一个数组，所以当选中哪个元素时要加上索引)
  • getElementsByClassName() - 返回带有指定类名的所有元素的节点列表(同上，也是一个数组)
  • appendChild() - 把新的子节点添加到指定节点的后面
  • insertBefore() - 在指定的子节点前面插入新的子节点
  • removeChild() - 删除子节点
  • replaceChild() - 替换字节点
  • createAttribute() - 创建属性节点(比如创建class属性，a的target属性)
  • createElement() - 创建元素节点
  • createTextNode() - 创建文本节点(想要在某一个元素里面添加文本，则在创建好文本和元素后：元素名：appendChild(文本名))
  • getAttribute() - 返回指定的属性值 (如a链接里面的target里的_blank)
  • setAttribute() - 把指定属性设置或修改为指定的值

HTML DOM属性

innerHTML属性

获取元素内容最简单的方法就是使用innerHTML属性，可以获取 和替换 HTML元素内容，包括<html> <body>

nodeName属性

nodename属性规定节点的名称

  • nodeName 是只读的
  • 元素节点，属性节点的nodeName 与标签名，属性名相同
  • 文本节点的nodeName 始终是**#text**
  • 文档节点的nodeName 始终是**#document**

nodeValue属性

nodeValue属性规定节点的值

  • 元素节点的nodeValue是undefined或null
  • 文本节点的nodeValue是文本本身
  • 属性节点的nodeValue是属性值

nodeType 属性

nodeType 属性返回节点的类型，是只读的
必要重要的节点类型有：

元素类型1NodeType
元素1
属性2
文本3
文档9

HTML DOM 访问

getElementById() 方法

语法

var id = node.getElementById("id");
getElementsByTagName() 方法

语法

<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<script>
x=document.getElementsByTagName("p");
document.write("第一段的文本: " + x[0].innerHTML); //Hello World!
</script>
getElementsByClassName() 方法

如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法：
返回的是包含class = "intro"的所有元素的一个列表
语法

document.getElementsByClassName("intro");
暖季啊
关注
专栏目录
将HTMLDOM对象转换成字符串
qq_41672008的博客
07-22 1万+
将HTMLDOM对象转换成字符串 之前定义过的 document.beHTMLDOM() 函数可以将 htmlDOM字符串解析成 HTMLDOM，但是反过来，可不可以呢？即 将 HTMLDOM 转换成 HTMLDOM字符串 话不多说，直接上代码： <!DOCTYPE html> <html> <head> <meta chars...
HTML DOM（文档对象模型） 详细讲解
qq_53016083的博客
01-18 2149
1. HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。 2. 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 3. 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
html dom remove,js中dom节点删除remove方法
weixin_32143245的博客
06-25 3115
本文教程操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。1、remove方法将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。绑定的事件是否同时被移除，删除自身(无参数时)，有参数时要根据参数所涉及的范围决定。2、使用语法strong.remove()3、使用参数选择器表达式，比如remove(“.class”);remov...
2020 使用HTML DOM实现对订单表格的增删改操作(前端小练)
夜林的博客
10-29 3141
eed
HTML DOM style属性操作
JayYuen的博客
09-17 3785
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 2237
文章目录 目录 文章目录 前言 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 1446
用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 8326
一般与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...
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
12-19
Simple HTML DOM是一个方便的PHP插件，它提供了一个简单的接口，让我们能够使用DOM（Document Object Model）方式来操作HTML。这个插件允许我们像操作DOM对象一样处理HTML，而无需直接处理复杂的正则表达式，大大...
JS添加或删除HTML dom元素的方法实例分析
10-17
在Web开发中，对HTML文档对象模型（DOM）的操作是极其重要的环节，它涉及到页面内容的动态更新。JavaScript提供了多种方式来添加和删除DOM元素，这些操作对于实现如用户交互、动态内容加载等功能至关重要。接下来，...
simplehtmldom:这是简单HTML DOM解析器的镜像，网址为
05-07
simplehtmldom是用于PHP的快速可靠HTML DOM解析器。 主要特征 纯粹基于PHP的DOM解析器（无需XML扩展名）。 适用于格式正确且已损坏HTML文档。 加载网页，本地文件和文档字符串。 支持CSS选择器。 要求 simple...
simplehtmldom Doc api帮助文档
10-28
simplehtmldom是一款在PHP环境中用于处理HTML和XML的工具库，它被设计得易于使用且功能强大，类似于前端开发中常用的jQuery库。simplehtmldom的出现使得在服务器端进行HTML内容的解析和操作变得更加简单和直观。下面...
HtmlDom.rar_HTML dom_PHP HTMLdom
09-22
标题“HtmlDom.rar_HTML dom_PHP HTMLdom”指出这个压缩包文件包含与HTML DOM和PHP中处理DOM相关的资源。文件“HtmlDom.chm”很可能是一个帮助文件，提供了关于PHP HTML DOM操作的详细指南。 PHP HTML DOM的核心是`...
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 1084
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
【移动端】Viewport 视口
小秀的博客
10-04 1445
（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。
html中src/href区别
最新发布
hexadecimal_001的博客
10-05 488
在HTML中，src和href是两个常见的属性，它们用于指定资源的位置，但用途和上下文有所不同。
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 1039
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
深入理解HTML DOM与JavaScript交互
"html dom 底层 javascript" 在网页开发中，HTML、DOM和JavaScript是构建动态交互式用户体验的核心技术。DOM（Document Object Model）是HTML和XML文档的结构化表示，它允许通过编程方式访问和修改文档内容。本文档...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值