Parsen von Hostobjekten in js-js-Tutorial-php.cn

Inhaltsverzeichnis

XML对SGML的语法做了更细致和严谨的扩展。
　　- SGML的奇怪语法:
　　　　- 某些标签不语序出现结束标签，如HTML中的<img>标签，否则会出现错误。
　　　　- 某些标签的结束标签可以不写，如HTML中的<p>标签。
　　　　- 标签可以以任何顺序嵌套，如<p><span></p></span>。
　　　　- 某些特性必须包含值，如<img src="picture.jpg">。
　　　　- 某些特性不要求一定有值，如<td nowrap>。
　　　　- 定义特性的两边有没有加双引号都是可以的，如<img src=picture.jpg>也是允许的。
　　- XML去掉了许多SGML中的随意语法，并且规定了新的语法:
　　　　- 任何的起始标签都必须有一个结束标签。
　　　　- 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即<tag />，如<br />,<hr />。
　　　　- 标签必须按合适的顺序嵌套。就近原则书写结束标签。
　　　　- 所有的特性都必须有值。
　　　　- 所有的特性都必须在值得周围加上双引号。
XML衍生出了MathML、SVG、RDF、RSS等等。同时，HTML被改进为XHML，即遵循XML语法的HTML。XHMTL被称为严格模式。

Nach dem Login kopieren

" >

XML对SGML的语法做了更细致和严谨的扩展。
　　- SGML的奇怪语法:
　　　　- 某些标签不语序出现结束标签，如HTML中的<img>标签，否则会出现错误。
　　　　- 某些标签的结束标签可以不写，如HTML中的<p>标签。
　　　　- 标签可以以任何顺序嵌套，如<p><span></p></span>。
　　　　- 某些特性必须包含值，如<img src="picture.jpg">。
　　　　- 某些特性不要求一定有值，如<td nowrap>。
　　　　- 定义特性的两边有没有加双引号都是可以的，如<img src=picture.jpg>也是允许的。
　　- XML去掉了许多SGML中的随意语法，并且规定了新的语法:
　　　　- 任何的起始标签都必须有一个结束标签。
　　　　- 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即<tag />，如<br />,<hr />。
　　　　- 标签必须按合适的顺序嵌套。就近原则书写结束标签。
　　　　- 所有的特性都必须有值。
　　　　- 所有的特性都必须在值得周围加上双引号。
XML衍生出了MathML、SVG、RDF、RSS等等。同时，HTML被改进为XHML，即遵循XML语法的HTML。XHMTL被称为严格模式。

Nach dem Login kopieren

XML定义了HTML的数据排版和解析方式。根据XML语言规范，需要制定API来实现对这些数据的操作和访问。
DOM模型就是最为流行的针对XML的基于树的API。它将XML解析为一颗有节点的树模型，并使用一系列互相关联的对象来表示XML的代码。从而能够指导开发增删改查等具体API的实现。
* DOM是语言无关的API，它并不与其它语言绑定。但对于JavaScript而言，DOM被习惯理解成API集合。

Nach dem Login kopieren

" >

XML定义了HTML的数据排版和解析方式。根据XML语言规范，需要制定API来实现对这些数据的操作和访问。
DOM模型就是最为流行的针对XML的基于树的API。它将XML解析为一颗有节点的树模型，并使用一系列互相关联的对象来表示XML的代码。从而能够指导开发增删改查等具体API的实现。
* DOM是语言无关的API，它并不与其它语言绑定。但对于JavaScript而言，DOM被习惯理解成API集合。

Nach dem Login kopieren

HTML DOM （文档对象模型）
   - 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
   - HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 HTML 文档的所有元素。
   - <html>
        <head>
           <title>...</title>
            ...
        </head>
        <body>
           <p>
              ...
           </p>
            ...
        </body>
     </html>
　　- 通过可编程的文档对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
   　　- JavaScript 能够改变页面中的所有 HTML 元素
   　　- JavaScript 能够改变页面中的所有 HTML 属性
   　　- JavaScript 能够改变页面中的所有 CSS 样式
   　　- JavaScript 能够对页面中的所有事件做出反应

Nach dem Login kopieren

" >

HTML DOM （文档对象模型）
   - 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
   - HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 HTML 文档的所有元素。
   - <html>
        <head>
           <title>...</title>
            ...
        </head>
        <body>
           <p>
              ...
           </p>
            ...
        </body>
     </html>
　　- 通过可编程的文档对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
   　　- JavaScript 能够改变页面中的所有 HTML 元素
   　　- JavaScript 能够改变页面中的所有 HTML 属性
   　　- JavaScript 能够改变页面中的所有 CSS 样式
   　　- JavaScript 能够对页面中的所有事件做出反应

Nach dem Login kopieren

　　6.HTML DOM

二、DOM通用节点对象操作

　　1.DOM的通用属性

　　2.DOM的通用集合

　　3.DOM通用节点操作

　　1查找节点

　　2创建节点

　　3添加节点

　　4删除节点

　　5替换节点

　　6.节点属性和方法

　　4.DOM通用属性操作

　　1.查找属性

　　2.获取属性

　　3.设置属性

　　4.删除属性

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

　　6.检查元素

Heim

Web-Frontend

js-Tutorial

Parsen von Hostobjekten in js

不言

Jul 14, 2018 pm 04:26 PM

Dieser Artikel stellt hauptsächlich die Analyse von Hostobjekten in js vor, die einen bestimmten Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Hostobjekte sind vom Browser bereitgestellte Objekte. , hauptsächlich einschließlich DOM-Objekte und BOM-Objekte.

1. Ursprung von DOM

1.SGML, XML und

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">SGML(标准通用标记语言)是定义使用标签来表示数据的标记语言的语法。<br>　　- 标签由一个小于号和一个大于号之间的文本组成，如<title><br>　　- 标签分为起始标签和结束标签，分别表示一个特定区域的开始和这个特定区域的结束，如<title>标题</title><br>　　- 特性是定义在起始标签内的值。如<img src="pircutre.jpg">，src就是其特性<br>HTML遵循SGML标记语言的语法,它是的SGML一种应用。或者说，SGML用来定义HTML的文档类型定义(DTD)。SGML还用来编写XML的DTD。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Nach dem Login kopieren

　4. Knotentypkonstanten

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">XML对SGML的语法做了更细致和严谨的扩展。<br>　　- SGML的奇怪语法:<br>　　　　- 某些标签不语序出现结束标签，如HTML中的<img>标签，否则会出现错误。<br>　　　　- 某些标签的结束标签可以不写，如HTML中的<p>标签。<br>　　　　- 标签可以以任何顺序嵌套，如<p><span></p></span>。<br>　　　　- 某些特性必须包含值，如<img src="picture.jpg">。<br>　　　　- 某些特性不要求一定有值，如<td nowrap>。<br>　　　　- 定义特性的两边有没有加双引号都是可以的，如<img src=picture.jpg>也是允许的。<br>　　- XML去掉了许多SGML中的随意语法，并且规定了新的语法:<br>　　　　- 任何的起始标签都必须有一个结束标签。<br>　　　　- 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即<tag />，如<br />,<hr />。<br>　　　　- 标签必须按合适的顺序嵌套。就近原则书写结束标签。<br>　　　　- 所有的特性都必须有值。<br>　　　　- 所有的特性都必须在值得周围加上双引号。<br>XML衍生出了MathML、SVG、RDF、RSS等等。同时，HTML被改进为XHML，即遵循XML语法的HTML。XHMTL被称为严格模式。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Nach dem Login kopieren

　4. Knotentypkonstanten

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">XML定义了HTML的数据排版和解析方式。根据XML语言规范，需要制定API来实现对<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">这些数据的操作和访问。<br>DOM模型就是最为流行的针对XML的基于树的API。它将XML解析为一颗有节点的树模型，并使用一系列互相关联的对象来表示XML的代码。从而能够指导开发增删改查等具体API的实现。<br>* DOM是语言无关的API，它并不与其它语言绑定。但对于JavaScript而言，DOM被习惯理解成API集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Nach dem Login kopieren

　5. Knoteneigenschaften und -methoden

<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;">HTML DOM <span style="color: #808080; font-family: 'Menlo';">（文档对象模型）<br><span style="color: #808080; font-family: 'Menlo';">   - 当网页被加载时，浏览器会创建页面的文档对象模型（<span style="color: #808080;">Document Object Model<span style="color: #808080; font-family: 'Menlo';">）。<span style="color: #808080;"><br><span style="color: #808080;">   - HTML DOM <span style="color: #808080; font-family: 'Menlo';">模型被构造为对象的树。<span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">通过<span style="color: #808080;"> HTML DOM<span style="color: #808080; font-family: 'Menlo';">，可访问<span style="color: #808080;"> HTML <span style="color: #808080; font-family: 'Menlo';">文档的所有元素。<span style="color: #808080;"><br><span style="color: #808080;">   - <html><br><span style="color: #808080;">        <head><br><span style="color: #808080;">           <title>...</title><br><span style="color: #808080;">            ...<br><span style="color: #808080;">        </head><br><span style="color: #808080;">        <body><br><span style="color: #808080;">           <p><br><span style="color: #808080;">              ...<br><span style="color: #808080;">           </p><br><span style="color: #808080;">            ...<br><span style="color: #808080;">        </body><br><span style="color: #808080;">     </html><br>　　- <span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">通过可编程的文档对象模型，<span style="color: #808080;">JavaScript <span style="color: #808080; font-family: 'Menlo';">获得了足够的能力来创建动态的<span style="color: #808080;"> HTML<span style="color: #808080; font-family: 'Menlo';">。<span style="color: #808080;"><br><span style="color: #808080;">   　　- JavaScript <span style="color: #808080; font-family: 'Menlo';">能够改变页面中的所有<span style="color: #808080;"> HTML <span style="color: #808080; font-family: 'Menlo';">元素<span style="color: #808080;"><br><span style="color: #808080;">   　　- JavaScript <span style="color: #808080; font-family: 'Menlo';">能够改变页面中的所有<span style="color: #808080;"> HTML <span style="color: #808080; font-family: 'Menlo';">属性<span style="color: #808080;"><br><span style="color: #808080;">   　　- JavaScript <span style="color: #808080; font-family: 'Menlo';">能够改变页面中的所有<span style="color: #808080;"> CSS <span style="color: #808080; font-family: 'Menlo';">样式<span style="color: #808080;"><br><span style="color: #808080;">   　　- JavaScript <span style="color: #808080; font-family: 'Menlo';">能够对页面中的所有事件做出反应<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Nach dem Login kopieren

　　6.HTML DOM

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

Nach dem Login kopieren

二、DOM通用节点对象操作

　　1.DOM的通用属性

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

Nach dem Login kopieren

　　2.DOM的通用集合

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

Nach dem Login kopieren

　　3.DOM通用节点操作

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

Nach dem Login kopieren

　　1查找节点

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

Nach dem Login kopieren

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>document操作元素</title></head><body>
    <p class="outer">
        <p class="inner">第一段文本</p>
        <p class="inner">第二段文本</p>
    </p>
    <script>
        var op = document.getElementsByClassName("outer")[0].getElementsByClassName("inner")[0].innerHTML;    
        </script></body></html>

Nach dem Login kopieren

　　2创建节点

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

Nach dem Login kopieren

　　3添加节点

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

Nach dem Login kopieren

　　4删除节点

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

Nach dem Login kopieren

　　5替换节点

<span style="color: #808080;">Element.replacChild(newNode, oldNode)   替换子元素。</span>

Nach dem Login kopieren

<span style="color: #808080;">document.getElementById()       <span style="color: #808080; font-family: &#39;Menlo&#39;;">  　返回对拥有指定<span style="color: #808080;"> id <span style="color: #808080; font-family: &#39;Menlo&#39;;">的第一个对象的引用。<br/><span style="color: #808080;">document.getElementsByName()      　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回带有指定名称的对象集合。<br/><span style="color: #808080;">document.getElementsByTagName()   　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回带有指定标签名的对象集合。<br/><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;">document.getElementsByClassName() 　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回带有指定类名的对象集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Nach dem Login kopieren

　　6.节点属性和方法

<span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;">节点属性和方法包含DOM NOde接口定义的所有属性和方法。HTML DOM 还包括其它的一些属性和方法。详细参见http://www.w3school.com.cn/jsref/dom_obj_all.asp。</span></span></span></span></span></span></span></span>

Nach dem Login kopieren

<span style="color: #808080;">Element.tagName　　　　　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的标签名。　　</span><br/>Element.cloneNode()　　　　　　　　 　复制当前元素。<br/>Element.normalize()　　　　　　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">合并元素中相邻的文本节点，并移除空的文本节点。<br/></span>Element.parentNode　　　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的父节点。<br/></span>Element.ownerDocument　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的根元素（文档对象）。</span><span style="color: #808080; font-family: &#39;Menlo&#39;;"><br/></span>nodelist.item()　　　　　　　　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">返回<span style="color: #808080;"> NodeList <span style="color: #808080; font-family: &#39;Menlo&#39;;">中位于指定下标的节点。<br/><span style="color: #808080;">nodelist.length　　　　　　　　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">返回<span style="color: #808080;"> NodeList <span style="color: #808080; font-family: &#39;Menlo&#39;;">中的节点数。</span></span></span></span></span></span></span><span style="color: #808080; font-family: &#39;Menlo&#39;;"><br/></span>Element.toString()　　　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">把元素转换为字符串。</span></span>

Nach dem Login kopieren

　　4.DOM通用属性操作

　　1.查找属性

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

Nach dem Login kopieren

　　2.获取属性

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

Nach dem Login kopieren

　　3.设置属性

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

Nach dem Login kopieren

　　4.删除属性

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

Nach dem Login kopieren

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

除了hasAttribute、getAttributes、setAttributes、removeAttribute操作属性，一些属性也可以通过节点.属性的方式获取/设置属性。

Nach dem Login kopieren

<span style="color: #808080;">Element.id                      <span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的<span style="color: #808080;"> id<span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><br/></span></span></span></span></span></span></span>Element.style    　　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的<span style="color: #808080;"> style <span style="color: #808080; font-family: &#39;Menlo&#39;;">属性。<br/><span style="color: #808080;">Element.innerHTML　　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的内容。</span></span><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"> <br/></span></span></span></span></span></span></span>Element.className　　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的<span style="color: #808080;"> class <span style="color: #808080; font-family: &#39;Menlo&#39;;">属性。<br/></span></span></span>Element.title    　　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的<span style="color: #808080;"> title <span style="color: #808080; font-family: &#39;Menlo&#39;;">属性。<br/><span style="color: #808080;">Element.textContent　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回节点及其后代的文本内容。</span></span> <br/><span style="color: #808080;">Element.contentEditable 　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的文本方向。<br/></span></span></span></span></span>Element.dir　　　　　　　　　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的内容是否可编辑。</span></span> <br/><span style="color: #808080;">Element.accessKey    　　　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的快捷键。<br/></span>Element.lang     　　　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的语言代码。</span><span style="color: #808080; font-family: &#39;Menlo&#39;;"><br/></span>Element.namespaceURI     　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的<span style="color: #808080;"> namespace URI<span style="color: #808080; font-family: &#39;Menlo&#39;;">。<br/></span></span></span>Element.tabIndex     　　　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">设置或返回元素的<span style="color: #808080;"> tab <span style="color: #808080; font-family: &#39;Menlo&#39;;">键控制次序。</span></span></span></span>

Nach dem Login kopieren

<span style="color: #808080;">Element.clientHeight     　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的可见高度。<br/><span style="color: #808080;">Element.clientWidth     　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的可见宽度。<span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><span style="color: #808080;"><span style="color: #808080; font-family: &#39;Menlo&#39;;"><br/><span style="color: #808080;">Element.offsetWidth <span style="color: #808080; font-family: &#39;Menlo&#39;;">　　　　　　　返回元素的宽度。<br/><span style="color: #808080;">Element.offsetLeft  <span style="color: #808080; font-family: &#39;Menlo&#39;;">　　　　　　　返回元素的水平偏移位置。<br/><span style="color: #808080;">Element.offsetParent    　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的偏移容器。<br/><span style="color: #808080;">Element.offsetTop   　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的垂直偏移位置。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>Element.scrollHeight     　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的整体高度。<br/><span style="color: #808080;">Element.scrollLeft  　　　　　　　<span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素左边缘与视图之间的距离。<br/><span style="color: #808080;">Element.scrollTop       　　　　 <span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素上边缘与视图之间的距离。<br/><span style="color: #808080;">Element.scrollWidth    　　　　  <span style="color: #808080; font-family: &#39;Menlo&#39;;">返回元素的整体宽度。</span></span></span></span></span></span></span></span>

Nach dem Login kopieren

　　6.检查元素

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

Nach dem Login kopieren

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

Ersparnis in R.E.P.O. Erklärt (und speichern Dateien)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassins Creed Shadows - So finden Sie den Schmied und entsperren Sie die Waffen- und Rüstungsanpassung

4 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7563

CakePHP-Tutorial

1385

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Wer bekommt mehr Python oder JavaScript bezahlt? Apr 04, 2025 am 12:09 AM

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Apr 04, 2025 pm 05:09 PM

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Apr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe? Apr 04, 2025 pm 05:12 PM

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...

TypeScript für Anfänger, Teil 2: Grundlegende Datentypen Mar 19, 2025 am 09:10 AM

Sobald Sie das Typscript-Tutorial für Einstiegsklasse gemeistert haben, sollten Sie in der Lage sein, Ihren eigenen Code in eine IDE zu schreiben, die TypeScript unterstützt und in JavaScript zusammenfasst. Dieses Tutorial wird in verschiedenen Datentypen in TypeScript eingetaucht. JavaScript hat sieben Datentypen: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING, SYMBOL (durch ES6 eingeführt) und Objekt. TypeScript definiert mehr Typen auf dieser Grundlage, und dieses Tutorial wird alle ausführlich behandelt. Null -Datentyp Wie JavaScript, null in TypeScript

Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen? oder: Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Apr 04, 2025 pm 05:36 PM

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

Kann PowerPoint JavaScript ausführen? Apr 01, 2025 pm 05:17 PM

JavaScript kann in PowerPoint ausgeführt werden und durch Aufrufen externer JavaScript -Dateien oder der Einbettung von HTML -Dateien über VBA implementiert werden. 1. Um VBA zu verwenden, um JavaScript -Dateien aufzurufen, müssen Sie Makros aktivieren und VBA -Programmierkenntnisse haben. 2. Einbetten Sie HTML -Dateien ein, die JavaScript enthalten, die einfach und einfach zu bedienen sind, aber Sicherheitsbeschränkungen unterliegen. Zu den Vorteilen zählen erweiterte Funktionen und Flexibilität, während Nachteile Sicherheit, Kompatibilität und Komplexität beinhalten. In der Praxis sollte die Aufmerksamkeit auf Sicherheit, Kompatibilität, Leistung und Benutzererfahrung geschenkt werden.

See all articles

Parsen von Hostobjekten in js

1. Ursprung von DOM

6.HTML DOM

二、DOM通用节点对象操作

1.DOM的通用属性

2.DOM的通用集合

3.DOM通用节点操作

1查找节点

2创建节点

3添加节点

4删除节点

5替换节点

6.节点属性和方法

4.DOM通用属性操作

1.查找属性

2.获取属性

3.设置属性

4.删除属性

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

6.检查元素

Heiße KI -Werkzeuge

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

SublimeText3 chinesische Version

Senden Sie Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac-Version

Heiße Themen