Document Object Model( 文档对象模型 )

最新推荐文章于 2022-07-30 01:28:42 发布
最新推荐文章于 2022-07-30 01:28:42 发布
阅读量745 收藏
点赞数
分类专栏： javascript HTML/CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010449115/article/details/78567759
版权

DOM 是Document Object Model( 文档对象模型 )的缩写。 DOM是把html里面的各种数据当作对象进行操作的一种思路。 比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。

获取节点的方法

  1. 在设计html的时候，一个元素对应的id应该是唯一的。 可以通过document.getElementById 获取某个元素对应的元素节点对象。
  2. 所有的元素都有标签名 通过 getElementsByTagName 根据标签名称获取一个元素数组。
  3. 与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组。
  4. 表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。
<html>
用户名 <input name="userName"> <br>
密码  <input name="userPassword">
<br>
<script>
var  elements= document.getElementsByName("userName");

for(i=0;i<elements.length;i++){
  document.write(elements[i]);
  document.write("<br>");
}

</script>
</html>

5.通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue
如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as[“id”]取出名称是id的属性。

<html>

<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);

</script>
</html>

6.通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。

<html>

<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);

</script>
</html>
retreatweb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM——Document Object Model 文档对象模型
XinKun的博客
11-23 220
一、DOM简介 DOM：document object model 文档对象模型 文档：整个HTML页面 对象：网页的每一个部分 模型：表示对象之间的关系，方便我们获取对象 节点(Node): 文档节点：整个html文档 元素节点：html文档中的标签 属性节点：元素的属性 文本节点：html中文本内容 浏览器已经提供文档节点对象 对象这个对象时window属性 可以在页面中直接使用 文档节点代表的是整个网页 二
HTML DOM 教程(4)
伟大的饺子
04-15 457
一棵节点树中的所有节点彼此都是有关系的。文档树（节点数）请看下面这个HTML文档： DOM Tutorial DOM Lesson one Hello world! 上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例， 和 的父节点是 节点，文本节点 "Hello
DOM（Document Object Model，文档对象模型）
梦在哪里的博客
05-29 1275
DOM1. 历史2. 标准3. 应用程序3.1 Web浏览器3.2 JavaScript4. 实现4.1 布局引擎(Layout engines)4.2 库5. 参考文献 本文为译文，点击此处查看原文。 文档对象模型(DOM)是一个跨平台的、独立于语言的应用程序编程接口，它将XML文档视为树结构，其中每个节点都是表示文档一部分的对象。DOM表示具有逻辑树的文档。树的每个分支都以一个节点结束，每个节...
浅析DOM【Document Object Model（文档对象模型）】
胡振涛
03-04 1868
这两天学习JS的时候接触了几次DOM，那么今天有接触了DOM，而且是主要讲授关于DOM的知识，那么什么是DOM呢？ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。目的是为了能让js操作ht...
Document Object Model
weixin_53589418的博客
01-04 172
DOM DOM：Document Object Model，文档对象模型。是js提供的，用来访问网页里所有内容的(标签,属性,标签的内容) DOM树 当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。 整个网页封装成的对象叫document 标签封装成的对象叫Element 属性封装成的对象叫Attribute 文本封装成的对象叫Text 操作标签 document.getEle
DOM(document Object model)
kui大师的博客
04-25 1523
DOM总结
DOM （文档对象模型(Document Object Model)）
weixin_43755969的博客
04-03 256
这是我第一篇博客 DOM （文档对象模型(Document Object Model)） 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Net...
什么是Document Object Model
weixin_33826609的博客
05-18 96
Document Object Model (DOM) 是一个跨平台的, 与语言无关的约定, 用于代表在HTML, XHTML和XML中的对象, 以及与这些对象进行交互.   使用DOM可以允许程序和脚本动态地访问和更新文档的内容, 结构, 和样式. 文档还可以被DOM进一步地进行处理, 处理之后的结果可以被纳回展现页面上.   也就是说, 通过Document Object Model, 我...
JavaScript——Document Object Model
胖虎虎
07-30 270
DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。 DOM和BOM的区别：函数模板 通过点击按钮框绑定一个事件 获取事件id的事件，在这个事件中获取单机按钮框的事件 而且document.write(“输出语句”); 相当于java的system.out.println();1.通过点击按钮框获取value值 2.将第一个文本框中的value赋值到第二个文本框上 3.失去焦点对象获取value值，通过this指针 6.
Document Object Model文档对象模型
qq_46416772的博客
06-13 153
DOM知识点汇总
DOM文档对象模型(Document Object Model)
Black_Straight的博客
06-04 283
DOM文档对象模型(Document Object Model)
DOM,Document Object Model文档对象模型
qq_34283987的博客
09-12 307
简介DOM,Document Object Model文档对象模型。 DOM是操作HTML和XML的一组API，可以实现动态改变页面的功能。 DOM节点树：每个HTML或XML文档被浏览器加载后都会在内存中生成一个DOM树。如图： div p h1以前叫标签，现在叫dom对象、dom节点、dom元素，每个标签都是HTMLElement这个类的对象，形如HTMLXxxElement,
DOM= Document Object Model，文档对象模型
xn227的专栏
03-10 117
dom就相当于js的framwork。里面都是方法。 2.dom动态设置事件 [code="js"] function f1() { alert("1"); } function f2() { alert("2"); } [/code] 注意：上面写法是错的，我一直没有搞清楚 和的区别 错的： [code="html"] ...
DOM的深度剖析----Document Object Model
qq_35050438的博客
03-09 399
DOM（） DOM树 常见方法
DOM:文档对象模型 document object model
mrhaoxiaojun的博客
03-21 473
//描述家庭族谱图，只要我们获得一个元素，就可以通过很多的属性或者方法找到页面中的任何一个元素     //一、获取元素的常用的8个方法：     //     1、document.getElementById('')     //         1、ID重复了，只获取第一个     //         2.IE6、7下不区分ID大小写     //         3.IE6、7
DOM（文档对象模型 document object Model）
qq_44417271的博客
08-19 118
DOM（文档对象模型 document object Model） DOM的作用：就是通过JS和HTML标签通信的方式。 document对象下的属性和方法 * getElementById(id) 通过ID获取元素，返回值一定是一个Node节点 * getElementsByTagName(标签名) 通过标签名获取元素，返回值一定是一个NodeList * querySelectorAll("css选择器") 返回与css选择器相匹配的NodeList * getElementsByClassName("
HTML DOM 之 DOM对象：Document Object Model (文档对象模型)
weixin_42472048的博客
06-22 329
思维导图   HTML DOM 简介 HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。 在继续学习之前，您需要对下面的知识有基本的了解： HTML / XHTML JavaScript 什么是 DOM？ 通过 JavaScript，您可以重构整...
操作DOM（Document Object Model）
APieceOfBullshit
02-13 410
一、使用节点 Node接口：所有节点类型必须继承Node类型 1、节点类型 DOM规定：整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等等。 介绍12种节点类型的博客：https://www.cnblogs.com/xiaohuochai/p/5785189.html 2、节点名称和值 nodeName和nod...
15-DOM（Document Object Model）文档对象模型
weixin_41452476的博客
11-09 228
1 DOM的概念 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、Acti
利用Beautiful Soup可将rq.text解析为Document Object Model（文档对象模型）
最新发布
06-09
是的，您可以使用Beautiful Soup库将请求返回的文本解析为文档对象模型（DOM）。DOM是一种表示HTML和XML文档的标准树形结构，可以让您以编程方式访问和操作文档的内容。 以下是使用Beautiful Soup解析HTML文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值