search

Home  >  Article  >  Web Front-end  >  Parsing host objects in js

Parsing host objects in js

不言
不言Original
2018-07-14 16:26:462622browse

This article mainly introduces the analysis of host objects in js, which has certain reference value. Now I share it with everyone. Friends in need can refer to it.

Host objects are objects provided by the browser. , mainly including DOM objects and BOM objects.

1. Origin of DOM

1.SGML, XML and XHTML

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">SGML(标准通用标记语言)是定义使用标签来表示数据的标记语言的语法。<br>　　- 标签由一个小于号和一个大于号之间的文本组成，如b2386ffb911b14667cb8f0f91ea547a7<br>　　- 标签分为起始标签和结束标签，分别表示一个特定区域的开始和这个特定区域的结束，如b2386ffb911b14667cb8f0f91ea547a7标题6e916e0f7d1e588d4f442bf645aedb2f<br>　　- 特性是定义在起始标签内的值。如987e85750ca55ce536dfd79e452bbcda，src就是其特性<br>HTML遵循SGML标记语言的语法,它是的SGML一种应用。或者说，SGML用来定义HTML的文档类型定义(DTD)。SGML还用来编写XML的DTD。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">XML对SGML的语法做了更细致和严谨的扩展。<br>　　- SGML的奇怪语法:<br>　　　　- 某些标签不语序出现结束标签，如HTML中的a1f02c36ba31691bcfe87b2722de723b标签，否则会出现错误。<br>　　　　- 某些标签的结束标签可以不写，如HTML中的e388a4556c0f65e1904146cc1a846bee标签。<br>　　　　- 标签可以以任何顺序嵌套，如e388a4556c0f65e1904146cc1a846bee45a2772a6b6107b401db3c9b82c049c294b3e26ee717c64999d7867364b1b4a354bdf357c58b8a65c66d7c19c8e4d114。<br>　　　　- 某些特性必须包含值，如489c580dcc4e72119dc2f28cced6fd5f。<br>　　　　- 某些特性不要求一定有值，如904b6b39b75ef1127fe85748522f0103。<br>　　　　- 定义特性的两边有没有加双引号都是可以的，如b27846dc685a1200c62a5e67183e6529也是允许的。<br>　　- XML去掉了许多SGML中的随意语法，并且规定了新的语法:<br>　　　　- 任何的起始标签都必须有一个结束标签。<br>　　　　- 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即cd02bdb502a3e8db9c0fb45c5fc9dac3，如df250b2156c434f3390392d09b1c9563,231a563c997aa9e3e0ae614bd16728b0。<br>　　　　- 标签必须按合适的顺序嵌套。就近原则书写结束标签。<br>　　　　- 所有的特性都必须有值。<br>　　　　- 所有的特性都必须在值得周围加上双引号。<br>XML衍生出了MathML、SVG、RDF、RSS等等。同时，HTML被改进为XHML，即遵循XML语法的HTML。XHMTL被称为严格模式。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

2.XML API

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">XML定义了HTML的数据排版和解析方式。根据XML语言规范，需要制定API来实现对<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">这些数据的操作和访问。<br>DOM模型就是最为流行的针对XML的基于树的API。它将XML解析为一颗有节点的树模型，并使用一系列互相关联的对象来表示XML的代码。从而能够指导开发增删改查等具体API的实现。<br>* DOM是语言无关的API，它并不与其它语言绑定。但对于JavaScript而言，DOM被习惯理解成API集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;">HTML DOM <span style="color: #808080; font-family: 'Menlo';">（文档对象模型）<br><span style="color: #808080; font-family: 'Menlo';">   - 当网页被加载时，浏览器会创建页面的文档对象模型（<span style="color: #808080;">Document Object Model<span style="color: #808080; font-family: 'Menlo';">）。<span style="color: #808080;"><br><span style="color: #808080;">   - HTML DOM <span style="color: #808080; font-family: 'Menlo';">模型被构造为对象的树。<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">通过<span style="color: #808080;"> HTML DOM<span style="color: #808080; font-family: 'Menlo';">，可访问<span style="color: #808080;"> HTML <span style="color: #808080; font-family: 'Menlo';">文档的所有元素。<span style="color: #808080;"><br><span style="color: #808080;">   - 100db36a723c770d327fc0aef2ce13b1<br><span style="color: #808080;">        93f0f5c25f18dab9d176bd4f6de5d30e<br><span style="color: #808080;">           b2386ffb911b14667cb8f0f91ea547a7...6e916e0f7d1e588d4f442bf645aedb2f<br><span style="color: #808080;">            ...<br><span style="color: #808080;">        9c3bca370b5104690d9ef395f2c5f8d1<br><span style="color: #808080;">        6c04bd5ca3fcae76e30b72ad730ca86d<br><span style="color: #808080;">           e388a4556c0f65e1904146cc1a846bee<br><span style="color: #808080;">              ...<br><span style="color: #808080;">           94b3e26ee717c64999d7867364b1b4a3<br><span style="color: #808080;">            ...<br><span style="color: #808080;">        36cc49f0c466276486e50c850b7e4956<br><span style="color: #808080;">     73a6ac4ed44ffec12cee46588e518a5e<br>　　- <span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">通过可编程的文档对象模型，<span style="color: #808080;">JavaScript <span style="color: #808080; font-family: 'Menlo';">获得了足够的能力来创建动态的<span style="color: #808080;"> HTML<span style="color: #808080; font-family: 'Menlo';">。<span style="color: #808080;"><br><span style="color: #808080;">   　　- JavaScript <span style="color: #808080; font-family: 'Menlo';">能够改变页面中的所有<span style="color: #808080;"> HTML <span style="color: #808080; font-family: 'Menlo';">元素<span style="color: #808080;"><br><span style="color: #808080;">   　　- JavaScript <span style="color: #808080; font-family: 'Menlo';">能够改变页面中的所有<span style="color: #808080;"> HTML <span style="color: #808080; font-family: 'Menlo';">属性<span style="color: #808080;"><br><span style="color: #808080;">   　　- JavaScript <span style="color: #808080; font-family: 'Menlo';">能够改变页面中的所有<span style="color: #808080;"> CSS <span style="color: #808080; font-family: 'Menlo';">样式<span style="color: #808080;"><br><span style="color: #808080;">   　　- JavaScript <span style="color: #808080; font-family: 'Menlo';">能够对页面中的所有事件做出反应<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">　　- 即<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">Javascript<span style="color: #808080; font-family: 'Menlo';">可以操作四个内容<span style="color: #808080;">:，<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;">html<span style="color: #808080; font-family: 'Menlo';">元素、<span style="color: #808080;">html<span style="color: #808080; font-family: 'Menlo';">属性、<span style="color: #808080;">css<span style="color: #808080; font-family: 'Menlo';">样式、事件。<br>　　- HTML DOM 是浏览器对象BOM的一个属性</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

3.DOM node level

<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">DOM定义了树节点（node）的层次和其Node接口:<br>　　- Document              最顶层的节点，所有的其它节点都是附属于它的。<br>　　- DocumentType　　　　　　DTD引用(使用1a309583e26acea4f04ca31122d8c535)，如5f93f0836788ea4b78b2789d8875111c。它不能包含子节点。<br>　　- DocumentFragment　　　 可以像Document一样来保存其它节点。<br>　　- Element　　　　　　　　　表示起始标签和结束标签之间的内容。这是唯一可以同时包含特性和子节点的节点类型。<br>　　- Attr　　　　　　　　　　　代表一对特姓名和特性值。这个节点类型不能包含子节点。<br>　　- Text　　　　　　　　　　 代表XML文档中的在其实标签和结束标签之间的，或者CData Seciron内的普通文本。这个节点类型不能包含子节点。<br>　　- CDataSection　　　　　　706a388e39e8555a9742f4594c5343bf的对象表现形式。这个几点类型仅能包含文本节点Text作为子节点。<br>　　- Entity　　　　　　　　　 表示在DTD中的一个实体定义，例如46e3020b9c3e00b36b072ef90da83899。这个节点类型不能包含子节点。<br>　　- EntityReference　　　　代表一个实体引用，例如&quot;。这个节点类型不能包含子节点。<br>　　- ProcessingInstruction 代表一个PI。这个节点类型不能包含子节点。<br>　　- Comment　　　　　　　　 代表XML注释。这个节点类型不能包含子节点。<br>　　- Notation　　　　　　　　代表在DTD中定义的记号。这个很少用到。</span></span></span></span></span></span></span></span></span></span></span>

　4.Node type constants

<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">Node接口还定义了不同节点类型的12个常量:<br>　　- Document　　　　　　　　 - 　　　　　　Node.DOCUMENT_NODE<br>　　- DocumentType　　　　　  - 　　　　　　Node.DOCUMENT_TYOE_NODE<br>　　- DoucmentR=Frament　　  -　　　　　　 Node.DOCUMENT_FRAMENT_NODE<br>　　- Element　　　　　　　　  -　　　　　　 Node.ELEMENT_NODE<br>　　- Attr　　　　　　　　　　  -　　　　　　Node.ATTRIBUTE_NODE<br>　　- Text　　　　　　　　　　  -　　　　　　Node.TEXT_NODE<br>　　- CDataSection　　　　　  -　　　　　　 Node.CDATA_SECTION_NODE<br>　　- <span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">Entity　　　　　　　　　 </span></span></span></span></span></span></span></span></span></span></span>-　　　　　　 Node.ENTITY_NODE<br>　　- EntityReference　　　  -　　　　　　 Node.ENTITY_REFERENCE_NODE<br>　　- <span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">ProcessingInstruction </span></span></span></span></span></span></span></span></span></span></span>-　　　　　　 Node.PROCESSING_INSTRUCTION_NODE<br>　　- Comment　　　　　　　　　-　　　　　　 Node.COMMENT_NODE<br>　　- Notation　　　　　　　　 -　　　　　　Node.NOTATION_NODE<br>* 这些常量会在选择节点之后以属性的方式查询</span></span></span></span></span></span></span></span></span></span></span>

　4.Node type constants

<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">Node接口还定义了不同节点类型的12个常量:<br>　　- Document　　　　　　　　 - 　　　　　　Node.DOCUMENT_NODE(9)<br>　　- DocumentType　　　　　  - 　　　　　　Node.DOCUMENT_TYOE_NODE(10)<br>　　- DoucmentR=Frament　　  -　　　　　　 Node.DOCUMENT_FRAMENT_NODE(11)<br>　　- Element　　　　　　　　  -　　　　　　 Node.ELEMENT_NODE(1)<br>　　- Attr　　　　　　　　　　  -　　　　　　 Node.ATTRIBUTE_NODE(2)<br>　　- Text　　　　　　　　　　  -　　　　　　 Node.TEXT_NODE(3)<br>　　- CDataSection　　　　　  -　　　　　　 Node.CDATA_SECTION_NODE(4)<br>　　- <span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">Entity　　　　　　　　　 -　　　　　　 Node.ENTITY_NODE(5)<br>　　- EntityReference　　　  -　　　　　　 Node.ENTITY_REFERENCE_NODE(6)<br>　　- <span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">ProcessingInstruction -　　　　　　 Node.PROCESSING_INSTRUCTION_NODE(7)<br>　　- Comment　　　　　　　　　-　　　　　　 Node.COMMENT_NODE(8)<br>　　- Notation　　　　　　　　 -　　　　　　 Node.NOTATION_NODE(12)<br>* 这些常量会在选择节点之后以属性的方式查询</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

　5.Node characteristics and methods

<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">Node接口定义了所有节点类型都包含的特性和方法:<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
## removeChild(node) Node Delete node from childNodes## replaceChild(newnode,oldnode)## insertBefore(newnode, refnode) previousSibling nextSibling attributes
Characteristics/Methods Type/Return Type Description
nodeName String node Name
nodeValue String ## The value of the node
nodeType Number The type constant value of the node
ownerDocument Document The document to which the node belongs
childNodes
NodeList List of all child nodes of the node
firstChild Node The first node in the child node list
lastChild Node The last child node list Node
hasChildNodes() Boolean Whether it contains children Node
appendChild(node) Node Append node Add to the end of childNodes
Node Replace oldnode in childNodes with newnode
Node Insert newnode before refnode in childNodes
Node points to the previous sibling node. If this node is the first sibling node, then the value is null
Node points to the next sibling node. If this node is the last sibling node, then the value is null
NamedNodeMap Contains the attributes that represent an element Attr object, only used for Element nodes

　　6.HTML DOM

<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">任何基于XML的语言，如XHTML和SVG，因为它们遵循XML语法，所以可以使用上述的Node接口操作。然而很多语言会继续定义它们自己的DOM来扩展XML以提供特定功能。<br>开发XML DOM的同时，W3C还一起开发了针对XHTML(以及HTML)的DOM。这个DOM定义了一个HTMLDocument一个HTMLElement作为实现基础。每个HTML元素通过它自己的HTMLElement类型表示，如HTMLpElement代表了e388a4556c0f65e1904146cc1a846bee元素。但有少数的除外。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

二、DOM通用节点对象操作

　　1.DOM的通用属性

<span style="color: #808080;">alinkColor      激活的链接的颜色，如43d208a65fe9048c68875684afaf4982定义的<br>bgColor         页面的背景颜色，如2b3aa87bfdd05026305e8610b64807e6定义的<br>fgColor         页面的文本颜色，如796f13351eaaea3144c92d599bdd6297定义的<br>lastModified    最后修改页面的日期，是字符串<br>linkColor       链接的颜色，如0d4c9cfcc7094a7f922a15fc33aa3959定义的<br>referrer        浏览器当前页后退一个位置的url<br>title           b2386ffb911b14667cb8f0f91ea547a7标签中显示的文本<br>URL             当前页面的url<br>vlinkColor      访问过的链接的颜色，如88f8836599a7b1384ed386434dbf5b20定义的<br>* 这些属性是引用了6c04bd5ca3fcae76e30b72ad730ca86d标签中的旧HTML特性，应该用样式表代替它们。</span>

 　　2.DOM的通用集合

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">ahchors        页面中所有锚的集合(由8d4a7a9529b5245685ed835b8a55b5555db79b134e9f6b82c0b36e0489ee08ed标签表示)<br>applets        页面中所有applet的集合<br>embeds         页面中所有嵌入式对象的集合(由d8e2720730be5ddc9c2a3782839e8eb6标签表示)<br>forms          页面中所有表单的集合<br>images         页面中所有图像的集合<br>links          页面中所有链接的集合(由fbfc78c0576f52668b3bdcecb96ce2e03499910bf9dac5ae3c52d5ede7383485表示</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

　　3.DOM通用节点操作

document对象是BOM的一部分，同时也是HTML DOM的HTMLDocument对象的表现形式，即它也是XML DOM Document对象。

　　1查找节点

<span style="color: #808080;">document.getElementById()       <span style="color: #808080; font-family: 'Menlo';">  返回对拥有指定<span style="color: #808080;"> id <span style="color: #808080; font-family: 'Menlo';">的第一个对象的引用。<br><span style="color: #808080;">document.getElementsByName()      <span style="color: #808080; font-family: 'Menlo';">返回带有指定名称的对象集合。<br><span style="color: #808080;">document.getElementsByTagName()   <span style="color: #808080; font-family: 'Menlo';">返回带有指定标签名的对象集合。<br><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">document.getElementsByClassName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定类名的对象集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>document操作元素</title></head><body>
    <p class="outer">
        <p class="inner">第一段文本</p>
        <p class="inner">第二段文本</p>
    </p>
    <script>
        var op = document.getElementsByClassName("outer")[0].getElementsByClassName("inner")[0].innerHTML;    
        </script></body></html>

　　2创建节点

<span style="color: #808080;">document.createAttribute(name)    创建属性名为name的属性节点。<br>document.createElement()          创建标签名为tagName的元素。<span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br><span style="color: #808080;">document.createTextNode(text)　　　创建包含文本text的文本节点。<span style="color: #808080; font-family: 'Menlo';"><br><span style="color: #808080;">* 创建其它Node接口定义的节点没有太大用处。因为被更简便的操作替代。</span></span></span></span></span></span></span>

　　3添加节点

<span style="color: #808080;">Element.appendChild(Node)          添加Node子元素。<br>Element.insertBefore(newNode, oldNode)  <span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">在某个子节点对象前添加新节点。</span></span></span></span></span></span></span></span>

　　4删除节点

<span style="color: #808080;">Element.removeChild(Node)          删除Node子元素。</span>

　　5替换节点

<span style="color: #808080;">Element.replacChild(newNode, oldNode)   替换子元素。</span>
<span style="color: #808080;">document.getElementById()       <span style="color: #808080; font-family: 'Menlo';">  　返回对拥有指定<span style="color: #808080;"> id <span style="color: #808080; font-family: 'Menlo';">的第一个对象的引用。<br><span style="color: #808080;">document.getElementsByName()      　<span style="color: #808080; font-family: 'Menlo';">返回带有指定名称的对象集合。<br><span style="color: #808080;">document.getElementsByTagName()   　<span style="color: #808080; font-family: 'Menlo';">返回带有指定标签名的对象集合。<br><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">document.getElementsByClassName() 　<span style="color: #808080; font-family: 'Menlo';">返回带有指定类名的对象集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

　　6.节点属性和方法

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">节点属性和方法包含DOM NOde接口定义的所有属性和方法。HTML DOM 还包括其它的一些属性和方法。详细参见http://www.w3school.com.cn/jsref/dom_obj_all.asp。</span></span></span></span></span></span></span></span>
<span style="color: #808080;">Element.tagName　　　　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的标签名。　　</span><br>Element.cloneNode()　　　　　　　　 　复制当前元素。<br>Element.normalize()　　　　　　　　　 <span style="color: #808080; font-family: 'Menlo';">合并元素中相邻的文本节点，并移除空的文本节点。<br></span>Element.parentNode　　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的父节点。<br></span>Element.ownerDocument　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的根元素（文档对象）。</span><span style="color: #808080; font-family: 'Menlo';"><br></span>nodelist.item()　　　　　　　　　　　 <span style="color: #808080; font-family: 'Menlo';">返回<span style="color: #808080;"> NodeList <span style="color: #808080; font-family: 'Menlo';">中位于指定下标的节点。<br><span style="color: #808080;">nodelist.length　　　　　　　　　　　 <span style="color: #808080; font-family: 'Menlo';">返回<span style="color: #808080;"> NodeList <span style="color: #808080; font-family: 'Menlo';">中的节点数。</span></span></span></span></span></span></span><span style="color: #808080; font-family: 'Menlo';"><br></span>Element.toString()　　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">把元素转换为字符串。</span></span>

　　4.DOM通用属性操作

　　1.查找属性

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">Element.attributes<span style="color: #808080; font-family: 'Menlo';">　　　　　　　　　　</span></span></span></span></span></span></span>返回元素属性的<span style="color: #808080; font-family: 'Fira Code';"> NamedNodeMap<span style="color: #808080;">。</span></span><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br></span></span></span></span>El</span></span></span></span></span></span>ement.hasAttribute() 　　　 　　　 <span style="color: #808080; font-family: 'Menlo';">如果元素拥有指定属性，则返回<span style="color: #808080;">true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> false<span style="color: #808080; font-family: 'Menlo';">。<br><span style="color: #808080;">Element.hasAttributes()     　　　　<span style="color: #808080; font-family: 'Menlo';">如果元素拥有属性，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> fals</span></span></span></span></span></span></span></span></span></span></span>

　　2.获取属性

<span style="color: #808080;">Element.<span style="color: #808080;">getAttribute</span>()          　 返回元素节点的指定属性值。<br>Element.<span style="color: #808080;">getAttributeNode</span>()　　　　  <span style="color: #808080;">返回指定的属性节点</span>。</span>

 　　3.设置属性

<span style="color: #808080;"><span style="color: #808080;">Element.setAttribute() 　　　　　　 <span style="color: #808080; font-family: 'Menlo';">把指定属性设置或更改为指定值。<br><span style="color: #808080;">Element.setAttributeNode()  　　　 <span style="color: #808080; font-family: 'Menlo';">设置或更改指定属性节点。</span></span></span></span></span>

 　　4.删除属性

<span style="color: #808080;"><span style="color: #808080;">Element.removeAttribute()　　　　　 <span style="color: #808080; font-family: 'Menlo';">从元素中移除指定属性。<br><span style="color: #808080;">Element.removeAttributeNode()　　  <span style="color: #808080; font-family: 'Menlo';">移除指定的属性节点，并返回被移除的节点。</span></span></span></span></span>

　　5.getattr和setattr获取或设置属性

除了hasAttribute、getAttributes、setAttributes、removeAttribute操作属性，一些属性也可以通过节点.属性的方式获取/设置属性。
<span style="color: #808080;">Element.id                      <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> id<span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br></span></span></span></span></span></span></span>Element.style    　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> style <span style="color: #808080; font-family: 'Menlo';">属性。<br><span style="color: #808080;">Element.innerHTML　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容。</span></span><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"> <br></span></span></span></span></span></span></span>Element.className　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> class <span style="color: #808080; font-family: 'Menlo';">属性。<br></span></span></span>Element.title    　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> title <span style="color: #808080; font-family: 'Menlo';">属性。<br><span style="color: #808080;">Element.textContent　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回节点及其后代的文本内容。</span></span> <br><span style="color: #808080;">Element.contentEditable 　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的文本方向。<br></span></span></span></span></span>Element.dir　　　　　　　　　　　　 <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容是否可编辑。</span></span> <br><span style="color: #808080;">Element.accessKey    　　　　　　 <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的快捷键。<br></span>Element.lang     　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的语言代码。</span><span style="color: #808080; font-family: 'Menlo';"><br></span>Element.namespaceURI     　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的<span style="color: #808080;"> namespace URI<span style="color: #808080; font-family: 'Menlo';">。<br></span></span></span>Element.tabIndex     　　　　　　 <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> tab <span style="color: #808080; font-family: 'Menlo';">键控制次序。</span></span></span></span>
<span style="color: #808080;">Element.clientHeight     　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的可见高度。<br><span style="color: #808080;">Element.clientWidth     　　　　 <span style="color: #808080; font-family: 'Menlo';">返回元素的可见宽度。<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br><span style="color: #808080;">Element.offsetWidth <span style="color: #808080; font-family: 'Menlo';">　　　　　　　返回元素的宽度。<br><span style="color: #808080;">Element.offsetLeft  <span style="color: #808080; font-family: 'Menlo';">　　　　　　　返回元素的水平偏移位置。<br><span style="color: #808080;">Element.offsetParent    　　　　 <span style="color: #808080; font-family: 'Menlo';">返回元素的偏移容器。<br><span style="color: #808080;">Element.offsetTop   　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的垂直偏移位置。<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>Element.scrollHeight     　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的整体高度。<br><span style="color: #808080;">Element.scrollLeft  　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素左边缘与视图之间的距离。<br><span style="color: #808080;">Element.scrollTop       　　　　 <span style="color: #808080; font-family: 'Menlo';">返回元素上边缘与视图之间的距离。<br><span style="color: #808080;">Element.scrollWidth    　　　　  <span style="color: #808080; font-family: 'Menlo';">返回元素的整体宽度。</span></span></span></span></span></span></span></span>

 　　6.检查元素

<span style="color: #808080;">Element.isContentEditable    <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容。<br><span style="color: #808080;">Element.isDefaultNamespace()    <span style="color: #808080; font-family: 'Menlo';">如果指定的<span style="color: #808080;"> namespaceURI <span style="color: #808080; font-family: 'Menlo';">是默认的，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> false<span style="color: #808080; font-family: 'Menlo';">。<br><span style="color: #808080;">Element.isEqualNode()   <span style="color: #808080; font-family: 'Menlo';">检查两个元素是否相等。<br><span style="color: #808080;">Element.isSameNode()    <span style="color: #808080; font-family: 'Menlo';">检查两个元素是否是相同的节点。<br><span style="color: #808080;">Element.compareDocumentPosition()   <span style="color: #808080; font-family: 'Menlo';">比较两个元素的文档位置。<br><span style="color: #808080;">Element.isSupported()   <span style="color: #808080; font-family: 'Menlo';">如果元素支持指定特性，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

js中自定义对象的解析

对js的内建对象的解析

The above is the detailed content of Parsing host objects in js. For more information, please follow other related articles on the PHP Chinese website!

php html xhtml String Boolean NULL 常量 xml JS number 对象 dom bom
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Analysis of DOM objects in JavaScriptNext article：Analysis of DOM objects in JavaScript

Related articles

See more