DOM文档对象的简单介绍

左手的ㄟ右手 2022-08-03 13:38 131阅读 0赞

DOM:文档对象模型

是操作HTML或XHPI，为文档提供结构化的表示。dom独立于具体的编程语言，通常通过javascript访问dom，不过并不严格要求这样。可以使用任何语言来访问dom。

主要功能：

一：查询和选取元素；  
二：遍历文档，找到文档的祖先，兄弟和后代元素；  
三：查找和设置元素的属性和内容；  
四：创建，插入和删除节点；  
五;HTML表单；

下面主要讲DOM文档对象的查询和选取元素，设置元素的属性和内容，创建，插入和删除节点：

一：查找元素的方法：

1：通过id：  document.geteElementById(元素id名称)；

2：通过name:   document.getElementsByName(元素名称)；

3：通过标签名：   documents.getElementsByTagName(标签名字)；

二：找到文档的的祖先，兄弟，和后代内容

1：parentNode;  该节点的父节点；

2：childNode； 该节点的子节点对象的集合；

3：firstChild：  该节点的子节点中的第一个节点；

4：lastChild：   该节点的子节点中的最后一个节点；

5：nextSibling：  该节点的兄弟节点的下一个节点；

6：previousSibling：  该节点的兄弟节点上一个节点。

例：var obj1 = document.getElementById("header")   //通过id找到该元素，（假设前面已经有这个id了），

var obj2 = obj1.childDode\[0\]  //该节点的第一个子节点

三：设置元素的属性和内容：

常用属性：nodeType：该节点类型，9代表document节点，1代表Element节点，3代表Text节点，8代表comment节点；

nodeValue： text节点或comment节点的文本内容；

nodeName：该节点的标签名；

内容的修改：

innerText：不能识别标签；

innerHTML:可以识别标签，能添加标签；

添加样式：

1：通过class添加，用到className属性添加

2：通过style添加，用style属性添加（注意像font-size这样的要写成这样：fontSize。）

四：DOM节点的创建：

1：createElement

2：createTextNode

五：添加节点：appendChild（）

例：

这个函数完成了创建节点，往节点立面添加内容，为节点添加样式表，再把这个节点添加到其父节点中  
function createNode()\{  
var div=document.createElement("div")    //创建节点  
div.innerText="我是一个层";     //往节点里添加内容  
div.className="content"     //向节点里添加样式  
var body = document.getElementsByTagName("body")\[0\];    //通过标签名找到该节点  
body.appendChild(div);      //向body里加入这个节点  
\}

附：节点树

![20150807210216800][]

如需完整的学习请参考手册学习

[20150807210216800]: /images/20220731/b66952f2c0834d2e9f01f6b418240f7d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript的HTML DOM （文档对象模型）

Javascript的HTML DOM （文档对象模型）一、HTML DOM （文档对象模型） > 采用DOM的方式来操作网页的元素,通过 HTML DOM，...

逃离我推掉我的手/ 2024年04月20日 11:25/ 0 赞/ 79 阅读

相关 Js-DOM文档对象模型

Ⅰ- 壹 - DOM文档对象模型 > 1. DOM ( Document Object Model ) 文档对象模型, 是W3C组织推荐的一套操作网页元素的应用程序接口

忘是亡心i/ 2023年06月26日 05:38/ 0 赞/ 21 阅读

相关 DOM 文档对象模型

优点和缺点编辑 DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。 DOM的缺点主要

野性酷女/ 2022年09月23日 13:57/ 0 赞/ 271 阅读

相关（六）文档对象模型（DOM）（上）

1.DOM是一个表示和操作文档的标准，全称为“文档对象模型”（Document Object Model）。 2.DOM操作HTML文档 <script type

超、凢脫俗/ 2022年09月22日 01:19/ 0 赞/ 245 阅读

相关 DOM文档对象的简单介绍

DOM:文档对象模型是操作HTML或XHPI，为文档提供结构化的表示。dom独立于具体的编程语言，通常通过javascript访问dom，不过并不严格要求这样。可以使

左手的ㄟ右手/ 2022年08月03日 13:38/ 0 赞/ 132 阅读

相关详细了解文档对象模型（DOM）

我们都听说过与JavaScript相关的DOM或文档对象模型。DOM是Web开发中一个非常重要的概念。没有它，我们就无法在浏览器中动态修改HTML页面。学习和理解DOM可以更

矫情吗；*/ 2022年01月18日 23:27/ 0 赞/ 311 阅读

相关 DOM 文档对象模型总结

1、DOM 文档对象模型 ![文档对象模型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

爱被打了一巴掌/ 2022年01月12日 23:39/ 0 赞/ 366 阅读

相关文档对象模型——DOM

DOM：文档对象模型，核心对象document，对html元素的样式（颜色、属性、位置）、内容、属性进行动态的改变和操作一、document对象　　1.属性　　　　

梦里梦外;/ 2022年01月10日 03:43/ 0 赞/ 343 阅读

相关 Java 文档对象模型（DOM）

DOM（Document Object Model）：文档对象模型，它定义了访问和处理HTML文档的标准方法，允许程序和脚本动态地访问和更新文档的内容、结构和样式。一...

小灰灰/ 2021年05月03日 16:00/ 0 赞/ 620 阅读

相关 DOM文档树介绍

DOM文档树介绍不少前端文章中都有dom tree（也就是文档树）概念的涉及。下面再结合图示简单介绍一下。

小灰灰/ 2020年05月16日 19:34/ 0 赞/ 752 阅读