DOM

最新推荐文章于 2022-07-04 20:19:44 发布

LeeSayhi

最新推荐文章于 2022-07-04 20:19:44 发布

阅读量255

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/LeeSayhi/article/details/53862560

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM“Document Object Modle”（文档对象模型）

DOM是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

1、文档
一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来，文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。 DOM是web页面的完全的面向对象表述，它能够使用如 Javascript 等脚本语言进行修改。

2、对象
Javascript语言里的对象可以分为三种类型：

用户定义对象（user-defined object）:由程序员自行创建的对象。
内建对象（native object）：内建在Javascript里的对象，如Array、Math、Date等。
宿主对象（host objec）：由浏览器提供的对象，如Form、Image、Element等。

3、模型
DOM中的“M”代表着“Model”它的含义是某种事物的表现形式，浏览器向我们提供了当前网页的模型，我们可以通过Javascript去读取。

节点
节点（node）代表网络中的一个连接点，网络是由节点构成的集合。

元素节点（element node）：DOM的原子是元素节点
文本节点（text node）：我是一段文本p元素就是一个文本节点
属性节点（attribute node）：我是一段文本 title=”我是个标题”就是一个属性节点，属性节点总是被包含在元素节点当中。

DOM 提供的方法：

1、getElementById()方法

document.getElementById("purchases")

这个调用将返回一个对象，这个对象对应着 document 对象里独一无二的元素，那个元素的HTML id 属性值是 purchases 。

2、getElementsByTagname()方法

document.getElementsByTagname("li")`

这个调用将返回一个对象数组，每个对象分别对应着 document 对象中的一个列表项（li）元素，可以用 length 属性查出这个数组里的元素个数。

3、getAttribute() 方法
利用 getElementById() 方法和 getElementsByTagName() 方法找到那个元素之后，就可以用 getAttribute()方法把它各种属性值查询出来。
getAttribute() 方法是一个函数，他有一个参数——打算查询的属性的名字

object.getAttribute(attribute)

getAttribute() 方法不能通过document对象调用，例如，查询每个元素的titile属性

var paras = document.getElementsByTagname("p");
for (var i=0; i<paras.length; i++) {
    alert(paras[i].getAttribute("title"));
}

如果这份文档中的 p 元素不带 title 属性，则相应的 getAttribute(“title”)调用将返回 null

4、setAttribute()方法
之前的3种方法都只能用来检索信息， setAttribute() 方法与它们有本质上的区别：它允许我们对属性节点的值做出修改。
类似getAttribute()方法，setAttribute() 方法也是只能通过元素节点对象调用的函数，有两个参数：object.setAttribute(attribute,value)

5、createElement() 方法：

document.createElement("p")

创建一个新的元素

6、appendChild() 方法：

parent.appendChild(child)

把新创建的节点插入DOM节点树上

7、createTextNode() 方法：

document.createTextNode(text)

创建一个文本节点

8、insertBefore() 方法：

parentElement.insertBefore(newElement,targeElement)

将把一个新元素插入到一个现有元素的前面

DOM和Javascript
上面的几种示例都使用了 Javascript ，也就是说，它虽然是用JavaScript编写的，却可以通过 DOM 来访问文档和其中的元素。DOM 并不是一个编程语言，但如果没有DOM， JavaScript 语言也不会有任何网页，XML页面以及涉及到的元素的概念或模型。在文档中的每个元素— 包括整个文档，文档头部，文档中的表格，表头，表格中的文本 — 都是文档所属于的文档对象模型（DOM）的一部分，因此它们可以使用DOM和一个脚本语言如 JavaScript，来访问和处理。

JavaScript可以访问和操作存储在DOM中的内容，因此我们可以写成这个近似的等式：API (web 或 XML 页面) = DOM + JS (脚本语言)

访问DOM
当在创建一个脚本时-无论是使用内嵌 script 元素或者使用在web页面脚本加载的方法— 都可以使用 document 或 window 元素的API来操作文档本身或获取文档的子类（web页面中的各种元素）。

如使用 window 对象的 alert() 函数显示一个警告信息：<body onload="window.alert("welcome to my home page");">

除了定义 JavaScript的 script 元素外，当文档被加载（以及当整个DOM可以被有效使用时），JavaScript可以设定一个函数来运行。下面的函数会创建一个新的 H1元素，为元素添加文本，并将H1添加在文档树中：

<html>
    <head>
        <script>
            //当文档加载时执行函数
            window.onload = function() {
                heading = document.createElement("h1");
                heading_text = document.createTextNode("Big Head");
                heading.appendChild(heading_text);
                document.body.appendChild(heading);
            }
        </script>
    </head>
    <body>
    </body>
</html>