對js中宿主物件的解析
這篇文章主要介紹了關於對js中宿主對象的解析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
宿主對象即瀏覽器提供的對象，主要包括DOM對象和BOM對象。
一、DOM源起
1.SGML、XML與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> - 标签由一个小于号和一个大于号之间的文本组成，如<title><br> - 标签分为起始标签和结束标签，分别表示一个特定区域的开始和这个特定区域的结束，如<title>标题</title><br> - 特性是定义在起始标签内的值。如<img src="pircutre.jpg">，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中的<img>标签，否则会出现错误。<br> - 某些标签的结束标签可以不写，如HTML中的<p>标签。<br> - 标签可以以任何顺序嵌套，如<p><span></p></span>。<br> - 某些特性必须包含值，如<img src="picture.jpg">。<br> - 某些特性不要求一定有值，如<td nowrap>。<br> - 定义特性的两边有没有加双引号都是可以的，如<img src=picture.jpg>也是允许的。<br> - XML去掉了许多SGML中的随意语法，并且规定了新的语法:<br> - 任何的起始标签都必须有一个结束标签。<br> - 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即<tag />，如<br />,<hr />。<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;"> - <html><br><span style="color: #808080;"> <head><br><span style="color: #808080;"> <title>...</title><br><span style="color: #808080;"> ...<br><span style="color: #808080;"> </head><br><span style="color: #808080;"> <body><br><span style="color: #808080;"> <p><br><span style="color: #808080;"> ...<br><span style="color: #808080;"> </p><br><span style="color: #808080;"> ...<br><span style="color: #808080;"> </body><br><span style="color: #808080;"> </html><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節點層次的API
<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引用(使用<!DOCTYPE>)，如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">。它不能包含子节点。<br> - DocumentFragment 可以像Document一样来保存其它节点。<br> - Element 表示起始标签和结束标签之间的内容。这是唯一可以同时包含特性和子节点的节点类型。<br> - Attr 代表一对特姓名和特性值。这个节点类型不能包含子节点。<br> - Text 代表XML文档中的在其实标签和结束标签之间的，或者CData Seciron内的普通文本。这个节点类型不能包含子节点。<br> - CDataSection <![CDATA[]]>的对象表现形式。这个几点类型仅能包含文本节点Text作为子节点。<br> - Entity 表示在DTD中的一个实体定义，例如<!ENTITY foo "foo">。这个节点类型不能包含子节点。<br> - EntityReference 代表一个实体引用，例如"。这个节点类型不能包含子节点。<br> - ProcessingInstruction 代表一个PI。这个节点类型不能包含子节点。<br> - Comment 代表XML注释。这个节点类型不能包含子节点。<br> - Notation 代表在DTD中定义的记号。这个很少用到。</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';">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>
登入後複製
<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>
登入後複製
3.DOM節點層次的API
rrree #<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>
登入後複製
4.節點類型常量
<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代表了<p>元素。但有少数的除外。</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>
登入後複製
登入後複製
4.節點類型常量
<span style="color: #808080;">alinkColor 激活的链接的颜色，如<body alink="color">定义的<br>bgColor 页面的背景颜色，如<body bgcolor="color">定义的<br>fgColor 页面的文本颜色，如<body text="color">定义的<br>lastModified 最后修改页面的日期，是字符串<br>linkColor 链接的颜色，如<body link="color">定义的<br>referrer 浏览器当前页后退一个位置的url<br>title <title>标签中显示的文本<br>URL 当前页面的url<br>vlinkColor 访问过的链接的颜色，如<body vlink="color">定义的<br>* 这些属性是引用了<body>标签中的旧HTML特性，应该用样式表代替它们。</span>
登入後複製
登入後複製
| 特性/方法 | 類型/傳回型別 | 說明 |
| nodeName | String | ## 節點的名字 |
| nodeValue | # String | ## 節點的值 |
| nodeType | # Number | 節點的型別常數值 |
| ownerDocument | # Document | ## 節點的所屬文件 |
| childNodes |
# NodeList | 節點的所有子節點清單 |
| firstChild | # Node | 子節點清單的第一個節點 |
| lastChild | # Node | 子節點清單的最後一個節點 |
| hasChildNodes() | Boolean | 是否包含子節點 |
| appendChild(node) | Node | 將node新增至childNodes末端 |
| removeChild(node) | ## Node||
| # # 從childNodes刪除node | replaceChild(newnode,oldnode) | Node |
| # 將childNodes中的oldnode替換成newnode | insertBefore(newnode, refnode) | Node |
| 在childNodes中的refnode之前插入newnode | previousSibling | |
| Node | 指向前一個兄弟節點，如果這個節點是第一個兄弟節點，那麼這個值為null |
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代表了<p>元素。但有少数的除外。</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 激活的链接的颜色，如<body alink="color">定义的<br>bgColor 页面的背景颜色，如<body bgcolor="color">定义的<br>fgColor 页面的文本颜色，如<body text="color">定义的<br>lastModified 最后修改页面的日期，是字符串<br>linkColor 链接的颜色，如<body link="color">定义的<br>referrer 浏览器当前页后退一个位置的url<br>title <title>标签中显示的文本<br>URL 当前页面的url<br>vlinkColor 访问过的链接的颜色，如<body vlink="color">定义的<br>* 这些属性是引用了<body>标签中的旧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 页面中所有锚的集合(由<a name="ahchorname></a>标签表示)<br>applets 页面中所有applet的集合<br>embeds 页面中所有嵌入式对象的集合(由<embed>标签表示)<br>forms 页面中所有表单的集合<br>images 页面中所有图像的集合<br>links 页面中所有链接的集合(由<a href="somewhere.htm"><a>表示</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中宿主物件的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
4 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前
By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
神秘的JavaScript：它的作用以及為什麼重要
Apr 09, 2025 am 12:07 AM
JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
JavaScript難以學習嗎？
Apr 03, 2025 am 12:20 AM
學習JavaScript不難，但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程，通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤，使用調試技巧。 5)優化性能，遵循最佳實踐。
如何實現視差滾動和元素動畫效果，像資生堂官網那樣？
或者：
怎樣才能像資生堂官網一樣，實現頁面滾動伴隨的動畫效果？
Apr 04, 2025 pm 05:36 PM
實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網（https://www.shiseido.co.jp/sb/wonderland/）中�...
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
JavaScript的演變：當前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
