页面啥意思

dom是什么意思啊（DOM页面是什么）

DOM是所有前端开发者每天都要处理的事情。但随着jQuery等库的出现，DOM操作被大大简化，导致人们慢慢“忘记”了它原本的样子。但是要想深入学习前端知识，了解DOM是必不可少的，所以本文试图系统的讲解DOM的相关知识。如有遗漏或错误，请指出，共同讨论。

1.什么是DOM？

DOM(文档对象模型)是HTML和XML文档的API，通过它可以改变文档。

这种说法很官方，你一定还不明白。

举个例子:我们有一段HTML，那么如何访问第二层的第一个节点，如何把最后一个节点移到第一个节点？

DOM是定义如果做类似操作应该做什么的标准。例如，getElementById用于访问节点，insertBefore用于插入节点。

浏览器加载HTML时，会生成相应的DOM树。

简而言之，DOM可以理解为访问或操作各种HTML标签的实现标准。

对于一个HTML，文档节点Document(不可见)是它的根节点，对应的对象是Document对象(严格来说是一个子类HTMLDocument对象，下面单独介绍文档类型时会指出)。

换句话说，有一个文档节点Document，然后它有子节点，比如through

document . getelementsbytagname(" HTML ")，并获取元素节点类型的元素HTML。

每一个HTML标记都可以用一个相应的节点来表示，例如:

HTML由元素节点表示，注释由注释节点表示，文档类型由文档类型节点表示，等等。

总共定义了12种类型的节点，这些类型都是从节点类型继承而来的。

所以先说节点类型，因为这个类型的方法会被所有节点继承。

二。节点类型(基类，所有节点都继承了它的方法)

Node是所有节点的基类型，所有节点都继承自它，所以所有节点都有一些共同的方法和属性。

先说节点类型的属性。

首先，它是nodeType属性，用于指示节点类型，例如:

document.nodeType; // 返回 9 ，其中document对象为文档节点Document的实例

这里9代表DOCUMENT_NODE的意思，可以通过NODE查看节点对应的编号。文档_节点

document.nodeType === Node.DOCUMENT_NODE; // true

至于有哪些节点，每个节点对应的编号是多少，问Google就行了。反正常用的是元素节点元素(对应数字是1)和文本节点文本(对应数字是3)。

那么nodeName和nodeValue是常用的。

对于元素节点，nodeName是标记名，nodeValue是null。

对于文本节点nodeName为“# text”(在Chrome中测试)，nodeValue是实际值。

每个节点还有一个childNodes属性，这是一个非常重要的属性，保存着这个节点的所有直接子元素。

调用childNodes会返回一个NodeList对象，它非常像一个数组，但是有一个关键点。它是动态查询的，也就是每次调用都会查询DOM结构，所以需要谨慎使用，注意性能。

您可以使用下面的数组表或item方法来访问childNodes。

然后，每个节点都有各种属性，以便它们可以相互访问，如下图所示。

有用的方法和属性:

1、hasChildNodes()

如果包含childNodes，则返回true，这比查询childnodes的长度简单。

2、所有者文档

返回文档节点的引用(即html中的文档对象)

然后介绍节点类型的常用方法。

appendChild()方法可以将一个节点添加到该节点的childNodes的末尾。值得注意的是，如果文档中已经存在这个节点，那么原来的节点会被删除，感觉像是移动节点。

insertBefore()方法接受两个参数，一个是插入的节点，另一个是引用的节点。如果第二个参数为null，insertBefore和appendChild具有相同的效果。否则，该节点将被插入到引用节点之前。这里需要注意的是，如果第二个参数不为null，那么插入的节点不能是现有的节点。

replaceChild()方法可以替换一个节点，接受两个参数:要插入的节点和要替换的节点。返回被替换的节点。

RemoveChild()删除节点。这里有一个共同的要求。例如，我有一个节点#waste-node，那么我如何移除它？

var wasteNode = document.getElementById("waste-node");wasteNode.parentNode.removeClhid(wasteNode); // 先拿到父节点，再调用removeClild删除自己

我们在这里暂停一下。不知道大家注意到没有，上面的方法都是对某个节点的子节点进行操作。也就是说，必须找到parentNode(通过父节点)才能操作。

接下来说说复制节点的方法:

clone node()；复制节点并接受参数true或false。如果为真，则复制该节点及其子节点。如果为false，则是复制节点本身(复制的节点将没有子元素)。此方法返回复制的节点。如果需要操作的话，需要使用上面提到的四种方法将这个节点放到html中。

至此，已经介绍了节点类型的常见属性和方法。如开头所述，所有节点类型都继承自节点类型，因此这些方法对所有节点都是通用的。

三。文档类型

在什么是DOM的开头，提到了文档类型。其实这个类型最重要的是它的子类HTMLdocument有一个实例对象文档。这个文档对象是我们最常用的对象之一。

文档对象安装在窗口对象上，因此您可以在浏览器中直接访问文档。

和往常一样，先说文档对象的属性，后面再说它的方法。

文档对象的一些属性

Document.childNodes继承了上面提到的节点类型，可以返回文档的直接子节点(通常包括文档声明和html节点)。

Document.documentElement可以直接获取html节点的引用(相当于

document . getelementsbytagname(" html ")[0]).

对document.body正文节点的引用

可以修改文档标题页的标题，这将更改浏览器选项卡上的名称。

文档的url。URL页面。

Document.referrer获取referrer，也就是打开这个页面的页面地址，对于源统计很有用。

Document.domain获取域名，可以设置，但通常只能设置为不包含子域的情况，在部分子域跨域的情况下有效。

接下来，介绍两种常见的方法。

GetElementById和getElementsByTagName

GetElementById，传入Id，获取元素节点。里面的参数区分大小写(不区分IE8)。注意:如果有多个元素具有相同的id，则返回第一个元素。IE7-内部表单元素的名称也将被用作id。

GetElementsByTagName根据标签获取元素，获取HTMLCollection类型。如果传入" "，则可以获取所有元素。*

另一个方法getElementsByName是HTMLdocument类型(即document对象)所特有的。顾名思义，getElementsbyname根据名称返回元素。

还有一些文档对象的集合。例如，document.forms可以返回所有表单表单。类型也是HTMLCollection。

说到HTMLCollection，我们再来说说。

HTMLCollection是包含一个或多个元素的集合，与上面提到的NodeList非常相似。这种类型的HTMLCollection有两种方法，一种是通过下标(或。item())，另一种是通过['name'](或者。namedItem())。

最后，还有另一个关于文档对象的重要方法，那就是

write() writeln() open() close()

Open close和open close分别是打开和关闭网页的输出流，相当于页面加载时的打开状态。这两种方法一般不用。

然后重要的方法是write和writeln，这两个方法都把东西写到页面上。不同的是，后者会添加一个新的行字符。

注意:在页面加载的过程中，可以使用这两种方法向页面添加内容。如果页面已经加载，再次调用write将重写整个页面。

还有一点，如果你想动态地写脚本，比如

四。元素类型

接下来，我们来谈谈最重要也是最常见的类型，元素类型。

我们日常操作的都是元素类型(本质是HTMLElement，这里简单说是为了方便理解)，比如

document.getElementById("test")

返回的是元素类型。我们日常生活中所说的“DOM对象”通常是指元素类型的对象。

然后说说这种类型的共同属性:

首先它在节点类型上有所有的属性方法，这个我就不赘述了，主要讲讲它自己的独特性。

首先是tagName，它与从节点类型继承的Nodename相同。都是返回标签名，通常是大写的，结果取决于浏览器。所以我在做一个对比。

最好是调用toLowerCase()这样的方法来进行比较。

说说上面提到的HTMLElement类型。

HTMLElement类型继承自Element类型，也是HTML元素的实际类型。我们在浏览器中使用的所有元素都是这种类型。

这种类型有一些标准属性，例如:

元素的唯一标识。

标题通常是鼠标上移时显示的信息。

类名类名

等等，这些属性是可读可写的，也就是说如果你改变了它们，就会得到相应的效果。

除了属性，还有几个重要的方法。

先说节点属性的操作方法。

GetAttribute、setAttribute和removeAttribute是三种方法。

这些是最常用的操纵属性的方法，我就不说怎么用了。顾名思义，它们非常简单。

还有一个attributes属性，它保存一个元素的所有属性。

停在这里，问一个问题。ele.className和ele.getAttribute("class ")返回的结果是一回事吗？

回答这个问题，我想说一个重要的知识点。元素的属性结构就是这样来的，比如inpnt元素。

lt;input checked="checked"gt;

然后这个元素的属性被包含在input.attributes中，比如你在html元素上看到的类、id或者你自己定义的数据测试。

那么getAttribute、setAttribute、removeAttribute可以认为是一种快速获取属性集的方法。而* * direct input.id或者input.className都是直接挂在input下面的属性，和属性是一个级别的。* *所以返回的内容可能看起来和过去一样，但实际上是不同的。不信可以试试input.getAttribute("checked ")。

一般来说，这三种方法通常处理自定义属性，而不是id、class等“可识别的特性”。

先说创造元素。

Document.createElement()可以创建一个元素，比如:

document.createElement("div");

通常，您可以稍后为元素设置属性。有两种方法，一种是直接node.property或者node.setattribute("属性名"，"值")。等待

但是经过这一切，这个元素仍然不在页面中，所以你必须通过上面提到的appendChild之类的方法将元素添加到页面中。

在IE中，你也可以直接穿透整个HTML字符串来创建元素，比如

document.createElement("test");

最后，元素节点还支持那些HTMLDocument类型的查找方法，比如getElementsByTagName。但是它只会找到它的后代的节点。所以你可以这样写代码。

document.getElementById("test").getElementsByTagName("div"); // 找到id为test元素下的所有div节点

V .文本类型

这是一种特殊的类型，也是第三种最常见的类型(第一种和第二种分别是文档和元素)。

这个节点只是一个字符串。

一个重要的特点就是它没有子元素(但是仔细想想就知道了= =)

您可以通过nodeValue或data属性访问文本节点的文本内容。

下面简单说一下它提供的一些方法。

appendData(); // 在text末尾加内容 deleteData(offset, count); // 从offset指定的位置开始删除count个字符

还有insertDate、replaceData、splitText等方法。，所以就不一一说了。用的机会少，能用的时候请参考。

然后它还有一个length属性，返回字符长度。

这里有一个常见的坑。例如，下面的html结构

在这里，ul的第一个孩子是什么？乍一看，你一定以为是李，但实际上，你会发现它不是李，而是一个文本节点！

这是因为浏览器认为ul和第一个li之间有空白字符，所以有文本节点。

这里一个常见的问题是，遍历ul的childNodes时，被遍历的元素必须确定nodeType是否等于1(等于1表示是元素节点)，才能跳过这个坑。否则，您也可以删除所有空大小写和换行符。

创建文本节点的方法是document.createTextNode

然后像操作元素类型一样，再次插入到元素中，浏览器就能看到了。

六。其他类型:Comment、DocumentType和DocumentFragment

这些生僻字只是路过。

Comment是一个注释节点。

Type是DocumentType节点，可通过docment.doctype访问

节点DocumentFragment是一个文档片段，偶尔会用到。

例如，常见的用法是将三个li插入一个ul。

如果循环插入三次，浏览器会渲染三次，对性能影响很大。

所以人们通常会这样做。

第一

var fragment = document.createDocumentFragment();

然后用appendChild将li循环插入片段。

最后一次将片段插入ul。这会很快。

七。DOM扩展

看了上面说的这么多节点类型，我想大家对DOM节点都有了深刻的理解。下面说一些关于DOM扩展的事情。

浏览器为了方便开发者，扩展了一些DOM函数。

因为是浏览器自己扩展的，所以使用前一定要注意兼容性

判断“标准模式”和“混杂模式”通过document.compatMode和新的document.documentMode

上面不是说了一个文本节点是第一个子元素的坑吗，所以浏览器又实现了一个children属性，只包含元素节点。

为了方便判断节点A是否是节点B的子节点，引入了contains方法，比如

B.contains(A); // true就代表是，false就代表不是

这种方法存在兼容性问题。你可以在使用之前谷歌一下解决方案。

另外还提供了四种访问元素的方法。

innerText/innerHTML/outer text/outer html .

通过这些方法，您可以读取和写入元素。

其中*TEXT是返回的文本内容*HTML是返回的HTML文本。

outer*表示是否包含元素本身。

其实看内容的时候，内在和外在没有什么区别。

当内容写入一个元素时，就是是否包含元素本身的区别。

重要的是，这些方法存在性能问题。比如在IE中，如果通过inner删除的节点还在内存中，很容易消耗大量内存。*

另外一个窍门是，插入大量html代码，使用innerHTML，速度非常快。推荐使用。