前端(六)：JavaScript面向对象之宿主对象
程序员文章站
2022-06-05 08:17:34
宿主对象即浏览器提供的对象，主要包括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=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4OC5odG1s" title="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_201807150134326011.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=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4OC5odG1s" title="CDR如何快速进行首行缩进?" target="_blank" rel="nofollow">CDR如何快速进行首行缩进?</a></p>
<div class="item-info">
<span class="intro">
这篇教程是向脚本之家的朋友介绍CDR如何快速进行首行缩进方法，教程比较基础，适合新手来学习，推荐到脚本之家，来看看吧... 16-06-20 </span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4OC5odG1s" target="_blank" rel="nofollow">[阅读全文]</a>
</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5MC5odG1s" title="cdr怎么制作一个类似竹编空心球? cdr绘制立体的效果空心球的技巧" 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=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5MC5odG1s" title="cdr怎么制作一个类似竹编空心球? cdr绘制立体的效果空心球的技巧" target="_blank" rel="nofollow">cdr怎么制作一个类似竹编空心球? cdr绘制立体的效果空心球的技巧</a></p>
<div class="item-info">
<span class="intro">
cdr怎么制作一个类似竹编空心球？cdr中想只i做一个类似空心竹编球该怎么制作呢？其实很简单，今天我们就来看看cdr绘制立体的效果空心球的技巧，需要的朋友可以参<span>...</span>
</span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5MC5odG1s" target="_blank" rel="nofollow">[阅读全文]</a>
</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5My5odG1s" title="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_201807150134537411.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=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5My5odG1s" title="cdr制作彩色半调效果的圆球?" target="_blank" rel="nofollow">cdr制作彩色半调效果的圆球?</a></p>
<div class="item-info">
<span class="intro">
cdr制作彩色半调效果的圆球？cdr中想制作一个彩色圆球，就是 不用大小的圆点组成的，从圆心开始，从深至浅，慢慢渐变，该怎么做呢？下面我们就来看看详细的教程..<span>...</span>
</span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5My5odG1s" target="_blank" rel="nofollow">[阅读全文]</a>
</span>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-inner">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3My5odG1s" title="Math.max()/min()" 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=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3My5odG1s" title="Math.max()/min()" target="_blank" rel="nofollow">Math.max()/min()</a></p>
<div class="item-info">
<span class="intro">
返回一组数中最大值： 找到数组中的最大值，有两种方法，一种是apply，一种使用拓展运算符。 释义： 由于max()里面参数不能为数组，所以借助ap<span>...</span>
</span>
<span class="lyuedu">
<a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3My5odG1s" 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">
</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=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3MS5odG1s" title="JavaScript Shell学习分享" target="_blank" rel="nofollow">JavaScript Shell学习分享</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM4My5odG1s" title="IE中操作粘贴板复制和粘贴" target="_blank" rel="nofollow">IE中操作粘贴板复制和粘贴</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5Ni5odG1s" title="CorelDRAW怎么画花朵? cdr绘制简单小红花的教程" target="_blank" rel="nofollow">CorelDRAW怎么画花朵? cdr绘制简单小红花的教程</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5Ny5odG1s" title="CorelDRAW怎么复制对象?六种复制对象方法图解" target="_blank" rel="nofollow">CorelDRAW怎么复制对象?六种复制对象方法图解</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5NS5odG1s" title="coreldraw线条粗细不均匀怎么设置成一样宽度?" target="_blank" rel="nofollow">coreldraw线条粗细不均匀怎么设置成一样宽度?</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=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5Mi5odG1s" title="coreldraw怎么使用轮廓转填充功能?" target="_blank" rel="nofollow">coreldraw怎么使用轮廓转填充功能?</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5NC5odG1s" title="cdr折线拐角处尖角怎么变圆滑的?" target="_blank" rel="nofollow">cdr折线拐角处尖角怎么变圆滑的?</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM5MS5odG1s" title="CDR怎么画一个巧克力草莓生日蛋糕?" target="_blank" rel="nofollow">CDR怎么画一个巧克力草莓生日蛋糕?</a></li>
<li><a href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS9hcnRpY2xlZGV0YWlsLzE4ODM3OC5odG1s" title="JS中的圣杯模式" target="_blank" rel="nofollow">JS中的圣杯模式</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/1270516.html">
react 之 reflux 填坑 </a>
</p>
<p>
下一篇： <a href="/article/1270518.html">
IE中操作粘贴板复制和粘贴 </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>