前端(六)：JavaScript面向对象之宿主对象
程序员文章站
2023-08-26 13:39:38
宿主对象即浏览器提供的对象，主要包括DOM对象和BOM对象。 一、DOM源起 1.SGML、XML和XHTML SGML(标准通用标记语言)是定义使用标签来表示数据的标记语言的语法。 - 标签由一个小于号和一个大于号之间的文本组成，如 - 标签分为起始标签和结束标签，分别表示一个特定区 ......</div>
<div class="content">
<p> 宿主对象即浏览器提供的对象，主要包括DOM对象和BOM对象。</p>
<h2>一、DOM源起</h2>
<h3> 1.SGML、XML和XHTML</h3>
<p><span style="color: #000000;"> <span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="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></p>
<p><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> </span></span></span></span></span></span></span></span><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">XML对SGML的语法做了更细致和严谨的扩展。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - SGML的奇怪语法:</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 某些标签不语序出现结束标签，如HTML中的<img>标签，否则会出现错误。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 某些标签的结束标签可以不写，如HTML中的<p>标签。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 标签可以以任何顺序嵌套，如<div><span></div></span>。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 某些特性必须包含值，如<img src="picture.jpg">。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 某些特性不要求一定有值，如<td nowrap>。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 定义特性的两边有没有加双引号都是可以的，如<img src=picture.jpg>也是允许的。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - XML去掉了许多SGML中的随意语法，并且规定了新的语法:</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 任何的起始标签都必须有一个结束标签。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即<tag />，如<br />,<hr />。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 标签必须按合适的顺序嵌套。就近原则书写结束标签。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 所有的特性都必须有值。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 所有的特性都必须在值得周围加上双引号。</span></span></span></span></span></span></span></span></span><br><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> XML衍生出了MathML、SVG、RDF、RSS等等。同时，HTML被改进为XHML，即遵循XML语法的HTML。XHMTL被称为严格模式。</span></span></span></span></span></span></span></span></span></p>
<h3> 2.XML的API</h3>
<p> <span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">XML定义了HTML的数据排版和解析方式。根据XML语言规范，需要制定API来实现对<span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">这些数据的操作和访问。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000;"> <span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">DOM模型就是最为流行的针对XML的基于树的API。它将XML解析为一颗有节点的树模型，并使用一系列互相关联的对象来表示XML的代码。从而能够指导开发增删改查等具体API的实现。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> DOM是语言无关的API，它并不与其它语言绑定。但对于JavaScript而言，DOM被习惯理解成API集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> <span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">HTML DOM <span style="font-family: 'Menlo';">（文档对象模型）</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model<span style="font-family: 'Menlo';">）。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - HTML DOM <span style="font-family: 'Menlo';">模型被构造为对象的树。<span style="font-family: 'Menlo';">通过 HTML DOM<span style="font-family: 'Menlo';">，可访问 HTML <span style="font-family: 'Menlo';">文档的所有元素。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - <html><br> <head><br> <title>...</title><br> ...<br> </head><br> <body><br> <div><br> ...<br> </div><br> ...<br> </body><br> </html><br> - <span style="font-family: 'Menlo';">通过可编程的文档对象模型，JavaScript <span style="font-family: 'Menlo';">获得了足够的能力来创建动态的 HTML<span style="font-family: 'Menlo';">。<span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">即<span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">Javascript<span style="font-family: 'Menlo';">可以操作四个内容:元素、属性、样式和事件。<span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">html元素、html属性、css样式、事件。html元素、元素属性、元素样式和事件。html元素、html属性、css样式、事件。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> - 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></p>
<h3> 3.DOM node接口和属性访问</h3>
<p><span style="color: #000000;"> <span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">DOM定义了树节点（node）的层次和其Node接口，以及这些节点的类型和其数字标号。<span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">这些常量会在选择节点之后以属性的方式查询。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<table style="width: 800px; height: 260px;" border="0" frame="void" rules="none"><tbody>
<tr>
<td style="text-align: center;">
<pre class="brush: javascript;">接口名称</pre>
</td>
<td style="text-align: center;">
<pre class="brush: javascript;">释义</pre>
</td>
<td style="text-align: center;">
<pre class="brush: javascript;">属性访问方式</pre>
</td>
<td style="text-align: center;">
<pre class="brush: javascript;">数字表示</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element</pre>
</td>
<td>
<pre class="brush: javascript;">表示起始标签和结束标签之间的内容。这是唯一可以同时包含特性和子节点的节点类型。</pre>
</td>
<td>
<pre class="brush: javascript;">Node.ELEMENT_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">1</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Attr</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 代表一对特姓名和特性值。这个节点类型不能包含子节点。 </span></td>
<td>
<pre class="brush: javascript;">Node.ATTRIBUTE_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">2</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Text</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 代表XML文档中的在其实标签和结束标签之间的，或者CData Se*n内的普通文本。这个节点类型不能包含子节点。 </span></td>
<td>
<pre class="brush: javascript;">Node.TEXT_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">3</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">CDataSection</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> <![CDATA[]]>的对象表现形式。这个几点类型仅能包含文本节点Text作为子节点。</span></td>
<td>
<pre class="brush: javascript;">Node.CDATA_SECTION_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">4</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Entity</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 表示在DTD中的一个实体定义，例如<!ENTITY foo "foo">。这个节点类型不能包含子节点。</span></td>
<td>
<pre class="brush: javascript;">Node.ENTITY_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">5</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">EntityReference</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 代表一个实体引用，例如"。这个节点类型不能包含子节点。</span></td>
<td>
<pre class="brush: javascript;">Node.ENTITY_REFERENCE_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">6</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">ProcessingInstruction</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 代表一个PI。这个节点类型不能包含子节点。 </span></td>
<td>
<pre class="brush: javascript;">Node.PROCESSING_INSTRUCTION_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">7</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Comment</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 代表XML注释。这个节点类型不能包含子节点。 </span></td>
<td>
<pre class="brush: javascript;">Node.COMMENT_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">8</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Document</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 代表在DTD中定义的记号。这个很少用到。</span></td>
<td>
<pre class="brush: javascript;">Node.DOCUMENT_NODE </pre>
</td>
<td>
<pre class="brush: javascript;">9</pre>
</td>
</tr>
<tr>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;"> DocumentType</span></td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 最顶层的节点，所有的其它节点都是附属于它的。</span></td>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;"> Node.DOCUMENT_TYOE_NODE</span></td>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;"> 10</span></td>
</tr>
<tr>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;"> DoucmentR=Frament</span></td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> DTD引用(使用<!DOCTYPE>)，如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">。它不能包含子节点。</span></td>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;"> Node.DOCUMENT_FRAMENT_NODE</span></td>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;"> 11</span></td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Notation</pre>
</td>
<td><span style="font-size: 12px; color: #000000; font-family: times new roman, times;"> 可以像Document一样来保存其它节点。 </span></td>
<td>
<pre class="brush: javascript;">Node.NOTATION_NODE</pre>
</td>
<td>
<pre class="brush: javascript;">12</pre>
</td>
</tr>
</tbody></table>
<h3> 4.节点特性和方法</h3>
<p><span style="color: #000000;"> <span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">Node接口定义了所有节点类型都包含的特性和方法。<span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<table style="width: 800px; height: 510px;" border="0"><tbody>
<tr>
<td style="text-align: center;"><strong><span style="font-size: 14px;">特性/方法</span></strong></td>
<td style="text-align: center;"><strong><span style="font-size: 14px;"> 类型/返回类型</span></strong></td>
<td style="text-align: center;"> <strong><span style="font-size: 14px;">说明</span></strong>
</td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> nodeName </span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> String</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 节点的名字</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> nodeValue</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> String</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 节点的值</span></td>
</tr>
<tr>
<td style="text-align: left;"><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> nodeType</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Number</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 节点的类型常量值</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> ownerDocument</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Document</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 节点的所属文档</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> childNodes <br></span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> NodeList</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 节点的所有子节点列表</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> firstChild</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Node</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 子节点列表的第一个节点</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> lastChild</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Node</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 子节点列表的最后一个节点</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> hasChildNodes()</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Boolean</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 是否包含子节点</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> appendChild(node)</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Node</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 将node添加到childNodes末尾</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> removeChild(node)</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Node</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 从childNodes中删除node</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> replaceChild(newnode,oldnode)</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Node</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 将childNodes中的oldnode替换成newnode</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> insertBefore(newnode, refnode)</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Node</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 在childNodes中的refnode之前插入newnode</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> previousSibling</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Node</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 指向前一个兄弟节点，如果这个节点就是第一个兄弟节点，那么该值为null</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> nextSibling</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> Node</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 指向后一个兄弟节点，如果这个节点就是最后一个兄弟节点，那么该值为null</span></td>
</tr>
<tr>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> attributes</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> NamedNodeMap</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times; color: #000000;"> 包含了代表一个元素的特性的Attr对象，仅用于Element节点</span></td>
</tr>
</tbody></table>
<h3> 5.HTML DOM</h3>
<p><span style="font-size: 14px; color: #000000;"> <span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">任何基于XML的语言，如XHTML和SVG，因为它们遵循XML语法，所以可以使用上述的Node接口操作。然而很多语言会继续定义它们自己的DOM来扩展XML以提供特定功能。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="font-size: 14px; color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> 开发XML DOM的同时，W3C还一起开发了针对XHTML(以及HTML)的DOM。这个DOM定义了一个HTMLDocument一个HTMLElement作为实现基础。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<p><span style="font-size: 14px; color: #000000;"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"> 每个HTML元素通过Ω它自己的HTMLElement类型表示，如HTMLDivElement代表了<div>元素。但有少数的除外。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<h2>二、DOM通用节点对象操作</h2>
<h3> 1.DOM的通用属性</h3>
<table style="width: 800px; height: 200px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">alinkColor</pre>
</td>
<td>
<pre class="brush: javascript;">激活的链接的颜色，如<body alink="color">定义的。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">bgColor</pre>
</td>
<td>
<pre class="brush: javascript;">页面的背景颜色，如<body bgcolor="color">定义的。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">fgColor</pre>
</td>
<td>
<pre class="brush: javascript;">页面的文本颜色，如<body text="color">定义的。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">lastModified</pre>
</td>
<td>
<pre class="brush: javascript;">最后修改页面的日期，是字符串。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">linkColor</pre>
</td>
<td>
<pre class="brush: javascript;">链接的颜色，如<body link="color">定义的</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">referrer</pre>
</td>
<td>
<pre class="brush: javascript;">浏览器当前页后退一个位置的url</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">title</pre>
</td>
<td>
<pre class="brush: javascript;"><title>标签中显示的文本</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">URL</pre>
</td>
<td>
<pre class="brush: javascript;">当前页面的url</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">vlinkColor</pre>
</td>
<td>
<pre class="brush: javascript;">访问过的链接的颜色，如<body vlink="color">定义的</pre>
</td>
</tr>
<tr>
<td colspan="2">
<pre class="brush: javascript;">* 这些属性是引用了<body>标签中的旧HTML特性，应该用样式表代替它们。</pre>
</td>
</tr>
</tbody></table>
<h3> 2.DOM的通用集合</h3>
<table style="width: 800px; height: 120px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">ahchors</pre>
</td>
<td>
<pre class="brush: javascript;">页面中所有锚的集合(由<a name="ahchorname></a>标签表示)。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">applets</pre>
</td>
<td>
<pre class="brush: javascript;">页面中所有applet的集合。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">embeds</pre>
</td>
<td>
<pre class="brush: javascript;">页面中所有嵌入式对象的集合(由<embed>标签表示)</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">forms</pre>
</td>
<td>
<pre class="brush: javascript;">页面中所有表单的集合。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">images</pre>
</td>
<td>
<pre class="brush: javascript;">页面中所有图像的集合。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">links</pre>
</td>
<td>
<pre class="brush: javascript;">页面中所有链接的集合(由<a href="somewhere.htm"><a>表示。</pre>
</td>
</tr>
</tbody></table>
<h3> 3.DOM通用节点操作</h3>
<p><span style="color: #000000;"> document对象是BOM的一部分，同时也是HTML DOM的HTMLDocument对象的表现形式，即它也是XML DOM Document对象。</span></p>
<h4> 1查找节点</h4>
<table style="height: 120px; ; width: 800px;" border="0"><tbody>
<tr>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;">document[Element].getElementById()</span></td>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;">返回对拥有指定 id 的第一个对象的引用。</span></td>
</tr>
<tr>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;">document[Element].getElementsByName()</span></td>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;">返回带有指定名称的对象集合。</span></td>
</tr>
<tr>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;">document[Element].getElementsByTagName()</span></td>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;"> 返回带有指定标签名的对象集合。</span></td>
</tr>
<tr>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;">document[Element].getElementsByClassName()</span></td>
<td><span style="color: #000000; font-size: 12px; font-family: times new roman, times;">返回带有指定类名的对象集合。</span></td>
</tr>
</tbody></table>
<h4> 2创建节点</h4>
<table style="height: 90px; ; width: 800px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">document.createAttribute(name)</pre>
</td>
<td>
<pre class="brush: javascript;">创建属性名为name的属性节点。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">document.createElement()</pre>
</td>
<td>
<pre class="brush: javascript;">创建标签名为tagName的元素。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">document.createTextNode(text)</pre>
</td>
<td>
<pre class="brush: javascript;">创建包含文本text的文本节点。</pre>
</td>
</tr>
<tr>
<td colspan="2">
<pre class="brush: javascript;">* 创建其它Node接口定义的节点没有太大用处。因为被更简便的操作替代。</pre>
</td>
</tr>
</tbody></table>
<h4> 3添加节点</h4>
<table style="height: 80px; ; width: 800px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">Element.appendChild(Node)</pre>
</td>
<td>
<pre class="brush: javascript;">添加Node子元素。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.insertBefore(newNode, oldNode)</pre>
</td>
<td>
<pre class="brush: javascript;">在某个子节点对象前添加新节点。</pre>
</td>
</tr>
</tbody></table>
<p> </p>
<div class="cnblogs_code" onclick="cnblogs_code_show('b66530ae-6e2d-484c-81a0-6b53ebab2236')">
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="code_img_closed_b66530ae-6e2d-484c-81a0-6b53ebab2236" class="code_img_closed" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIwOC9iXzFfMjAxNzEyMDgxOTUzMzY2NDY0LmpwZw==" alt="前端(六)：JavaScript面向对象之宿主对象" title="前端(六)：JavaScript面向对象之宿主对象"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="code_img_opened_b66530ae-6e2d-484c-81a0-6b53ebab2236" class="code_img_opened" style="display: none;" onclick="cnblogs_code_hide('b66530ae-6e2d-484c-81a0-6b53ebab2236',event)" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIwOC9iXzFfMjAxNzEyMDgxOTUzMzY5OTc3LmpwZw==" alt="前端(六)：JavaScript面向对象之宿主对象" title="前端(六)：JavaScript面向对象之宿主对象"><div id="cnblogs_code_open_b66530ae-6e2d-484c-81a0-6b53ebab2236" class="cnblogs_code_hide">
<pre class="brush: javascript;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>节点选取</title>
<style type="text/css">
.outer {
width: 200px;
background-color: yellow;
}
.inner{
float: left;
height: 50px;
width: 50px;
}
.inner:first-child{
background-color: red;
}
.inner:last-child{
background-color: blue;
}
.header, .bottom{
height: 50px;
width: 200px;
background-color: green;
}
.clearfix:before, .clearfix:after{
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="outer clearfix">
</div>
<div class="bottom"></div>
<script>
function newDiv() {}
newDiv.create = newDiv.prototype.create = function (className) {
var oDiv = document.createElement("div");
// 第一种方式
/*
var oText = document.createTextNode("第一个子div");
oDiv.appendChild(oText);
var oAttr = document.createAttribute("class");
oAttr.nodeValue = className;
oDiv.setAttributeNode(oAttr);
*/
// 第二种方式
oDiv.innerHTML = "第二个子div";
oDiv.setAttribute("class", className);
return oDiv;
};
var oDiv = new newDiv();
var oDivFather = document.getElementsByClassName("outer")[0]
oDivFather.appendChild(oDiv.create("inner"));
oDivFather.appendChild(oDiv.create("inner"));
</script>
</body>
</html></pre>
</div>
<span class="cnblogs_code_collapse">样例代码</span>
</div>
<p> 4删除节点</p>
<p><span style="color: #000000;"> Element.removeChild(Node) 删除Node子元素。</span></p>
<h4> 5替换节点</h4>
<p><span style="color: #000000;"> Element.replacChild(newNode, oldNode) 替换子元素。</span></p>
<h4> 6.节点属性和方法</h4>
<p><span style="color: #000000;"> <span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';"><span style="font-family: 'Menlo';">节点属性和方法包含DOM NOde接口定义的所有属性和方法。HTML DOM 还包括其它的一些属性和方法。详细参见http://www.w3school.com.cn/jsref/dom_obj_all.asp。</span></span></span></span></span></p>
<table style="width: 800px; height: 240px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">Element.tagName</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的标签名。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.cloneNode() </pre>
</td>
<td>
<pre class="brush: javascript;">复制当前元素。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.normalize()</pre>
</td>
<td>
<pre class="brush: javascript;">合并元素中相邻的文本节点，并移除空的文本节点。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.parentNode</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的父节点。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.ownerDocument</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的根元素（文档对象）。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">nodelist.item()</pre>
</td>
<td>
<pre class="brush: javascript;">返回 NodeList 中位于指定下标的节点。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">nodelist.length</pre>
</td>
<td>
<pre class="brush: javascript;">返回 NodeList 中的节点数。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.toString()</pre>
</td>
<td>
<pre class="brush: javascript;">把元素转换为字符串。</pre>
</td>
</tr>
</tbody></table>
<h3> 4.DOM通用属性操作</h3>
<h4> 1.查找属性</h4>
<table style="height: 60px; ; width: 800px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">Element.hasAttribute()</pre>
</td>
<td>
<pre class="brush: javascript;">如果元素拥有指定属性，则返回true，否则返回 false。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.hasAttributes()</pre>
</td>
<td>
<pre class="brush: javascript;">如果元素拥有属性，则返回 true，否则返回 false。</pre>
</td>
</tr>
</tbody></table>
<h4> 2.获取属性</h4>
<table style="height: 80px; ; width: 800px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">Element.getAttribute()</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素节点的指定属性值。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.getAttributeNode()</pre>
</td>
<td>
<pre class="brush: javascript;">返回指定的属性节点。</pre>
</td>
</tr>
</tbody></table>
<h4> 3.设置属性</h4>
<table style="height: 80px; ; width: 800px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">Element.setAttribute()</pre>
</td>
<td>
<pre class="brush: javascript;">把指定属性设置或更改为指定值。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.setAttributeNode()</pre>
</td>
<td>
<pre class="brush: javascript;">设置或更改指定属性节点。</pre>
</td>
</tr>
</tbody></table>
<h4> 4.删除属性</h4>
<table style="height: 80px; ; width: 800px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">Element.removeAttribute()</pre>
</td>
<td>
<pre class="brush: javascript;">从元素中移除指定属性。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.removeAttributeNode()</pre>
</td>
<td>
<pre class="brush: javascript;">移除指定的属性节点，并返回被移除的节点。</pre>
</td>
</tr>
</tbody></table>
<p> </p>
<h4> 5.getattr和setattr获取或设置属性</h4>
<p><span style="color: #000000;"> <span style="font-family: 'Menlo';">除了hasAttribute<span style="font-family: 'Menlo';">、getAttributes<span style="font-family: 'Menlo';">、setAttributes<span style="font-family: 'Menlo';">、removeAttribute操作属性，一些属性也可以通过节点.属性的方式获取/设置属性。</span></span></span></span></span></p>
<table style="width: 800px; height: 300px;" border="0"><tbody>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.id </pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的 id。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.style</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的 style 属性。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.innerHTML</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的内容。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.className</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的 class 属性。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.title</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的 title 属性。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.textContent</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回节点及其后代的文本内容。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.contentEditable</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的文本方向。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.dir</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的内容是否可编辑。 </pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.accessKey</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的快捷键。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.lang</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的语言代码。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.namespaceURI</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">返回元素的 namespace URI。</pre>
</td>
</tr>
<tr>
<td style="text-align: left;">
<pre class="brush: javascript;">Element.tabIndex</pre>
</td>
<td style="text-align: left;">
<pre class="brush: javascript;">设置或返回元素的 tab 键控制次序。</pre>
</td>
</tr>
</tbody></table>
<p> <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></span></span></span></span></span></span></span></span></p>
<table style="width: 800px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">Element.clientHeight</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的可见高度。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.clientWidth</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的可见宽度。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.offsetWidth</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的宽度。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.offsetLeft</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的水平偏移位置。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.offsetParent</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的偏移容器。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.offsetTop </pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的垂直偏移位置。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.scrollHeight</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的整体高度。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.scrollLeft</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素左边缘与视图之间的距离。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.scrollTop</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素上边缘与视图之间的距离。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.scrollWidth</pre>
</td>
<td>
<pre class="brush: javascript;">返回元素的整体宽度。</pre>
</td>
</tr>
</tbody></table>
<h4> 6.检查元素</h4>
<table style="width: 800px;" border="0"><tbody>
<tr>
<td>
<pre class="brush: javascript;">Element.isContentEditable</pre>
</td>
<td>
<pre class="brush: javascript;"> 设置或返回元素的内容。</pre>
</td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.isDefaultNamespace()</pre>
</td>
<td><span style="font-size: 12px; font-family: times new roman, times;"> 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。</span></td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.isEqualNode()</pre>
</td>
<td><span style="font-size: 12px; font-family: times new roman, times;"> 检查两个元素是否相等。</span></td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.isSameNode()</pre>
</td>
<td><span style="font-size: 12px; font-family: times new roman, times;"> 检查两个元素是否是相同的节点。</span></td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.compareDocumentPosition()</pre>
</td>
<td><span style="font-size: 12px; font-family: times new roman, times;"> 比较两个元素的文档位置。</span></td>
</tr>
<tr>
<td>
<pre class="brush: javascript;">Element.isSupported()</pre>
</td>
<td><span style="font-size: 12px; font-family: times new roman, times;"> 如果元素支持指定特性，则返回 true。</span></td>
</tr>
</tbody></table>
<h2>三、DOM节点的特殊属性和方法</h2>
<p> 本节内容摘自JavaScript使用手册。</p>
<h3> 1.form表单</h3>
<h4> 1.使用方式</h4>
<p> 文件对象的子对象，Javascript的runtime engine自动为每一个表单建立一个表单对象。</p>
<p> 格式：</p>
<p> - document.forms[索引].属性</p>
<p> - document.forms[索引].方法（参数）</p>
<p> - document.表单名称.属性</p>
<p> - document.表单名称.方法（参数）</p>
<h4> 2.form属性</h4>
<table style="width: 800px; background-color: #003366; height: 210px;" border="0" cellspacing="1" cellpadding="3"><tbody>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center" width="160"><span style="font-size: 12px; font-family: times new roman, times;">action</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times;">表单动作</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px; font-family: times new roman, times;">elements</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times;">以索引表示的所有表单元素</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px; font-family: times new roman, times;">encoding</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times;">MIME的类型</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px; font-family: times new roman, times;">length</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times;">表单元素的个数</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px; font-family: times new roman, times;">method</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times;">方法</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px; font-family: times new roman, times;">name</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times;">表单名称</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px; font-family: times new roman, times;">target</span></td>
<td><span style="font-size: 12px; font-family: times new roman, times;">目标</span></td>
</tr>
</tbody></table>
<h4> 3.form方法</h4>
<table style="width: 800px; height: 90px; background-color: #003366;" border="0" cellspacing="1" cellpadding="3"><tbody>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center" width="180"><span style="font-size: 12px;">handleEvent(事件)</span></td>
<td><span style="font-size: 12px;">使事件处理程序生效</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;">reset()</span></td>
<td><span style="font-size: 12px;">重置</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;">submit()</span></td>
<td><span style="font-size: 12px;">提交</span></td>
</tr>
</tbody></table>
<h4> 4.form子元素共有的属性和方法</h4>
<p> form子元素共有的属性：</p>
<table style="width: 800px; height: 120px; background-color: #003366;" border="0" cellspacing="1" cellpadding="3"><tbody>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center" width="160"><span style="font-size: 12px;">form</span></td>
<td><span style="font-size: 12px;">该对象所在的表单</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;">name</span></td>
<td><span style="font-size: 12px;">该对象的name属性</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;">type</span></td>
<td><span style="font-size: 12px;">该对象的type属性</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;">value</span></td>
<td><span style="font-size: 12px;">该对象的value属性</span></td>
</tr>
</tbody></table>
<p> form子元素共有的方法：事件。</p>
<p> 带有"checked"属性的子元素:单选按钮、复选框。</p>
<h3> 2.a对象</h3>
<p> 网页中的链接均会被自动看作链接对象，可以通过document.links访问。它是一个当前页面的所有a链接的集合。</p>
<h4> 1.a属性</h4>
<table style="width: 800px; height: 360px; background-color: #003366;" border="0" cellspacing="1" cellpadding="3"><tbody>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;"><span style="font-size: 12px;">href</span></span></td>
<td><span style="font-size: 12px;"><span style="font-size: 12px;">完整的URL字串</span></span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;"><span style="font-size: 12px;">host</span></span></td>
<td><span style="font-size: 12px;">主机域名或IP地址</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center" width="160"><span style="font-size: 12px;"><span style="font-size: 12px;">hostname</span></span></td>
<td><span style="font-size: 12px;">URL中的host+port</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;">port</span></td>
<td><span style="font-size: 12px;">URL中端口部分</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;"><span style="font-size: 12px;">hash</span></span></td>
<td><span style="font-size: 12px;">URL中的锚点名称</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;">protocol</span></td>
<td><span style="font-size: 12px;">URL中通讯协议部分</span></td>
</tr>
<tr bgcolor="#ffffff">
<td style="text-align: left;" align="center"><span style="font-size: 12px;"><span style="font-size: 12px;">pathname</span></span></td>
<td><span style="font-size: 12px;">URL中path部分</span></td>
</tr>
<tr bgcolor="#ffffff">
<div class="adsogou810110">
</div>
<div class="entry-action">
<div class="btn-zan" data-id="688054">
<i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span>
</div>
<div class="btn-dashang">
<i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-cny-circle-fill"></use></svg></i>
打赏
<span class="dashang-img"><span><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L2ltYWdlcy96YW5zLnBuZw==" alt="前端(六)：JavaScript面向对象之宿主对象" title="前端(六)：JavaScript面向对象之宿主对象"> 微信扫一扫 </span> </span>
</div>
</div>
<div class="adsogou810110">
</div>
<div class="xgcomm clearfix">
<h2>相关文章:</h2>
<ul class="post-loop-default">
<li>
<div class="item-inner">
</div>
</li>
<li>
<div class="item-inner">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5Ni5odG1s" title="CorelDRAW怎么画花朵? cdr绘制简单小红花的教程" class="img-wrap" target="_blank" rel="nofollow">
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="前端(六)：JavaScript面向对象之宿主对象" class="lazyloadImg" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg" data-original="http://images3.10qianwan.com/10qianwan/20180715/s_0_201807150135011718.jpg" onerror="this.src = '/images/notpic.gif'" title="前端(六)：JavaScript面向对象之宿主对象"></a>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5Ni5odG1s" title="CorelDRAW怎么画花朵? cdr绘制简单小红花的教程" target="_blank" rel="nofollow">CorelDRAW怎么画花朵? cdr绘制简单小红花的教程</a></p>
<div class="item-info">
<span class="intro">
CorelDRAW怎么画花朵？CorelDRAW中绘制矢量图很简单，今天我们就来看看使用cdr绘制简单小红花的过程，很简单，下面图文很详细，需要的朋友可以参考下<span>...</span>
</span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5Ni5odG1s" target="_blank" rel="nofollow">[阅读全文]</a>
</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4MS5odG1s" title="Web Workers" class="img-wrap" target="_blank" rel="nofollow">
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="前端(六)：JavaScript面向对象之宿主对象" src="/default/index/img?u=L2ltYWdlcy9uZXdpbWcvbmltZzIucG5n" onerror="this.src = '/images/notpic.gif'" title="前端(六)：JavaScript面向对象之宿主对象"></a>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4MS5odG1s" title="Web Workers" target="_blank" rel="nofollow">Web Workers</a></p>
<div class="item-info">
<span class="intro">
Web Worker SharedWorker Service Worker ...
</span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4MS5odG1s" target="_blank" rel="nofollow">[阅读全文]</a>
</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5OC5odG1s" title="coreldraw怎么居中? cdr让文字居中的详细教程" class="img-wrap" target="_blank" rel="nofollow">
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="前端(六)：JavaScript面向对象之宿主对象" class="lazyloadImg" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg" data-original="http://images3.10qianwan.com/10qianwan/20180715/s_0_201807150135106310.jpg" onerror="this.src = '/images/notpic.gif'" title="前端(六)：JavaScript面向对象之宿主对象"></a>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5OC5odG1s" title="coreldraw怎么居中? cdr让文字居中的详细教程" target="_blank" rel="nofollow">coreldraw怎么居中? cdr让文字居中的详细教程</a></p>
<div class="item-info">
<span class="intro">
coreldraw怎么居中？cdr文本框中的文字不是居中显示的，想让文字居中显示，该怎么办呢？下面我们就来看看cdr让文字居中的详细教程，需要的朋友可以参考下.<span>...</span>
</span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5OC5odG1s" target="_blank" rel="nofollow">[阅读全文]</a>
</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4NC5odG1s" title="angular分页插件tm.pagination二次触发问题解决歪方案" class="img-wrap" target="_blank" rel="nofollow">
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="前端(六)：JavaScript面向对象之宿主对象" src="/default/index/img?u=L2ltYWdlcy9uZXdpbWcvbmltZzQucG5n" onerror="this.src = '/images/notpic.gif'" title="前端(六)：JavaScript面向对象之宿主对象"></a>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4NC5odG1s" title="angular分页插件tm.pagination二次触发问题解决歪方案" target="_blank" rel="nofollow">angular分页插件tm.pagination二次触发问题解决歪方案</a></p>
<div class="item-info">
<span class="intro">
今天在学习angularjs的分页插件时遇到了一个前端的问题，谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求，ajax向后<span>...</span>
</span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4NC5odG1s" target="_blank" rel="nofollow">[阅读全文]</a>
</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4Ny5odG1s" title="CorelDRAW中怎么画一朵简单的黄色小花朵?" class="img-wrap" target="_blank" rel="nofollow">
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="前端(六)：JavaScript面向对象之宿主对象" class="lazyloadImg" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg" data-original="http://images3.10qianwan.com/10qianwan/20180715/s_0_201807150134257562.jpg" onerror="this.src = '/images/notpic.gif'" title="前端(六)：JavaScript面向对象之宿主对象"></a>
<div class="rbox">
<div class="rbox-inner">
<p><a class="link title" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4Ny5odG1s" title="CorelDRAW中怎么画一朵简单的黄色小花朵?" target="_blank" rel="nofollow">CorelDRAW中怎么画一朵简单的黄色小花朵?</a></p>
<div class="item-info">
<span class="intro">
CorelDRAW中怎么画一朵简单的黄色小花朵？cdr绘制图案很简单，今天我们就来介绍比较简单的一个教程，就是绘制一个黄色的小花朵，详细教程如下，需要的朋友可以<span>...</span>
</span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4Ny5odG1s" target="_blank" rel="nofollow">[阅读全文]</a>
</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
</div>
</li>
</ul>
</div>
<div class="adsogou810110">
</div>
<div class="adsogou810110">
</div>
<div class="entry-copyright">
<p>
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
</p>
</div>
<div id="comments">
<div id="comment">
<h3 class="comment-reply-title">发表评论</h3>
</div>
<div class="commentpost post" id="commFrom">
<input type="hidden" id="ArticleId" name="ArticleId" value="188379"><input type="hidden" id="loginFlag" name="loginFlag"><input type="hidden" id="parentId" name="parentId" value="0"><table class="commenttb" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=L2ltYWdlcy9waWNoZWFkX251bGwuZ2lm" onerror="this.src = '/images/pichead_null.gif'" alt="前端(六)：JavaScript面向对象之宿主对象" title="前端(六)：JavaScript面向对象之宿主对象">
</th>
<td>
<textarea class="pinglungonggao text" id="txaArticle" placeholder="请登录后评论..." name="Content" rows="3" cols="55"></textarea>
</td>
</tr>
<tr>
<th class="msg-title">验证码：</th>
<td class="form-group">
<input id="markid" class="txtyzm" name="yzm" type="text"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="yzmImg" title="前端(六)：JavaScript面向对象之宿主对象" onclick="getVerificationCode()" src="/default/index/img?u=" alt="前端(六)：JavaScript面向对象之宿主对象"><input type="button" tabindex="6" value="提交" class="button" onclick="submitForm();">
</td>
</tr>
</table>
</div>
<span class="icon icon_comment" title="comment"></span>
<div style="padding:10px;">
<label id="AjaxCommentBegin"></label>
</div>
</div>
<div class="right sidebar">
<div class="article-right">
<div class="adbaidu_r">
</div>
<div class="listDoc_r">
<div class="listDoc_r-inner">
<dl>
<dt>最近更新的文章</dt>
<dd>
<ul class="newsListA">
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5NS5odG1s" title="coreldraw线条粗细不均匀怎么设置成一样宽度?" target="_blank" rel="nofollow">coreldraw线条粗细不均匀怎么设置成一样宽度?</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3Ni5odG1s" title="定时器里面的作用域问题" target="_blank" rel="nofollow">定时器里面的作用域问题</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3Ny5odG1s" title="es6箭头函数" target="_blank" rel="nofollow">es6箭头函数</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3NS5odG1s" title="react 之 reflux 填坑" target="_blank" rel="nofollow">react 之 reflux 填坑</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3MS5odG1s" title="JavaScript Shell学习分享" target="_blank" rel="nofollow">JavaScript Shell学习分享</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5MC5odG1s" title="cdr怎么制作一个类似竹编空心球? cdr绘制立体的效果空心球的技巧" target="_blank" rel="nofollow">cdr怎么制作一个类似竹编空心球? cdr绘制立体的效果空心球的技巧</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5OS5odG1s" title="CorelDRAW位图转换为矢量图步骤介绍" target="_blank" rel="nofollow">CorelDRAW位图转换为矢量图步骤介绍</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3OC5odG1s" title="JS中的圣杯模式" target="_blank" rel="nofollow">JS中的圣杯模式</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4OS5odG1s" title="cdr怎么让文字两端对齐?" target="_blank" rel="nofollow">cdr怎么让文字两端对齐?</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5Ny5odG1s" title="CorelDRAW怎么复制对象?六种复制对象方法图解" target="_blank" rel="nofollow">CorelDRAW怎么复制对象?六种复制对象方法图解</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div class="adbaidu_r">
<div class="adsogou336280">
</div>
</div>
<div class="listDoc_r">
<div class="img-title">推荐阅读</div>
<div class="adsogou336280">
</div>');
(window.slotbydup = window.slotbydup || []).push({
id: "u5885079",
container: s
});
})();
</div>
</div>
<div class="listDoc_r">
<div class="listDoc_r-inner">
<dl>
<dt>大家感兴趣的文章</dt>
<dd>
<ul>
<li>
<em>1</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzU2MDA5NS5odG1s" title="磁力搜索网站 BT torrent search engine 推荐 2019/12/25日更新" target="_blank" rel="nofollow">磁力搜索网站 BT torrent search engine 推荐 2019/12/25日更新</a>
</li>
<li>
<em>2</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzQyMTY2OS5odG1s" title="关于RxJS Subject的学习笔记" target="_blank" rel="nofollow">关于RxJS Subject的学习笔记</a>
</li>
<li>
<em>3</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzYyOTE3NS5odG1s" title="DevTools failed to load SourceMap: Could not load content 控制台显示的这个警告是什么意思" target="_blank" rel="nofollow">DevTools failed to load SourceMap: Could not load content 控制台显示的这个警告是什么意思</a>
</li>
<li>
<em>4</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzYyMzI2My5odG1s" title="layui.table动态获取表头和列表数据示例" target="_blank" rel="nofollow">layui.table动态获取表头和列表数据示例</a>
</li>
<li>
<em>5</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzM1Mzc1NS5odG1s" title="关于自定义Egg.js的请求级别日志详解" target="_blank" rel="nofollow">关于自定义Egg.js的请求级别日志详解</a>
</li>
<li>
<em>6</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzUwMjk2My5odG1s" title="Js 网页上反复显示隐藏效果的文本" target="_blank" rel="nofollow">Js 网页上反复显示隐藏效果的文本</a>
</li>
<li>
<em>7</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzcxODAyLmh0bWw=" title="vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents" target="_blank" rel="nofollow">vue init初始化项目后 npm run dev报错 10% building modules 1/1 modules 0 activeevents</a>
</li>
<li>
<em>8</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzc1Njk3MS5odG1s" title="Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute" target="_blank" rel="nofollow">Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute</a>
</li>
<li>
<em>9</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzI2NzExMC5odG1s" title="elementUI vue tree input 懒加载 输入下拉树型示例" target="_blank" rel="nofollow">elementUI vue tree input 懒加载 输入下拉树型示例</a>
</li>
<li>
<em>10</em>
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzYyODk4NS5odG1s" title="uni-app 如何设置web-view 不全屏，不自动铺满，动态控制web-view的高度" target="_blank" rel="nofollow">uni-app 如何设置web-view 不全屏，不自动铺满，动态控制web-view的高度</a>
</li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="fixed">
<div class="adbaidu_r">
<div class="adsogou336280">
</div>
<div class="adsogou336280">
</div>');
(window.slotbydup = window.slotbydup || []).push({
id: "u5885079",
container: s
});
})();
</div>
</div>
<div class="adbaidu_r">
<div class="adsogou336280">
</div>
</div>
</div>
<section id="bottom"><div class="site-info">
<div>
Copyright © 2017-2022
<span>
<a title="欢迎您的来访,感谢您的支持！" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8=" target="_blank" style="color:#aaa" rel="nofollow"></a>
保留所有权利.
<a href="http://www.beian.miit.gov.cn" target="_blank" style="color:#aaa" rel="nofollow">粤ICP备17035492号-1</a>
</span>
<br><a target="_blank" rel="nofollow" href="http://wpa.qq.com/msgrd?v=3&uin=253482814&site=qq&menu=yes" style="color:#aaa">站长QQ:2386932994</a>
<span>|</span>
联系邮箱：2386932994@qq.com
</div>
</div>
</section>
</tr>
</tbody></table> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/2026498.html">
apache time_wait连接数太多问题解决方法 </a>
</p>
<p>
下一篇： <a href="/article/2026500.html">
linux下的守护进程 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2052679.html" target="_blank" title="面向对象的六大原则之 单一职责原则——SRP">
<h2>
面向对象的六大原则之 单一职责原则——SRP </h2>
</a>
</li>
<li>
<a href="/article/2026499.html" target="_blank" title="前端(六)：JavaScript面向对象之宿主对象">
<h2>
前端(六)：JavaScript面向对象之宿主对象 </h2>
</a>
</li>
<li>
<a href="/article/1947472.html" target="_blank" title="python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）">
<h2>
python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数） </h2>
</a>
</li>
<li>
<a href="/article/1928575.html" target="_blank" title="前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发">
<h2>
前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发 </h2>
</a>
</li>
<li>
<a href="/article/1928507.html" target="_blank" title="前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战">
<h2>
前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战 </h2>
</a>
</li>
<li>
<a href="/article/1928473.html" target="_blank" title="前端笔记知识点整合之JavaScript面向对象（一）Object&函数上下文&构造函数&原型链">
<h2>
前端笔记知识点整合之JavaScript面向对象（一）Object&函数上下文&构造函数&原型链 </h2>
</a>
</li>
<li>
<a href="/article/1798182.html" target="_blank" title="从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程">
<h2>
从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程 </h2>
</a>
</li>
<li>
<a href="/article/1796006.html" target="_blank" title="重学js之JavaScript 面向对象的程序设计（创建对象）">
<h2>
重学js之JavaScript 面向对象的程序设计（创建对象） </h2>
</a>
</li>
<li>
<a href="/article/1731261.html" target="_blank" title="javascript高级程序设计第三版 第六章 面向对象的程序设计">
<h2>
javascript高级程序设计第三版 第六章 面向对象的程序设计 </h2>
</a>
</li>
<li>
<a href="/article/1659760.html" target="_blank" title="《JavaScript高级程序设计》笔记：面向对象的程序设计（六）">
<h2>
《JavaScript高级程序设计》笔记：面向对象的程序设计（六） </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>