この記事では、js でのホスト オブジェクトの分析を主に紹介します。これを必要とする友人に参考にしてください。ホスト オブジェクトは、主に DOM オブジェクトと BOM を含みます。物体。
1. DOMの起源
1.SGML、XMLと
<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="/static/imghwm/default1.png" data-src="pircutre.jpg" class="lazy" alt="jsでのホストオブジェクトの解析" >，src就是其特性<br>HTML遵循SGML标记语言的语法,它是的SGML一种应用。或者说，SGML用来定义HTML的文档类型定义(DTD)。SGML还用来编写XML的DTD。</title></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
5. ノードの特性とメソッド
<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 src="/static/imghwm/default1.png" data-src="picture.jpg" class="lazy" alt="jsでのホストオブジェクトの解析" >标签，否则会出现错误。<br> - 某些标签的结束标签可以不写，如HTML中的<p>标签。<br> - 标签可以以任何顺序嵌套，如</p> <p><span></span></p></span>。<br> - 某些特性必须包含值，如<img src="/static/imghwm/default1.png" data-src="picture.jpg" class="lazy" alt="jsでのホストオブジェクトの解析" >。<br> - 某些特性不要求一定有值，如</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><td nowrap>。<br> - 定义特性的两边有没有加双引号都是可以的，如<img src="picture.jpg" alt="jsでのホストオブジェクトの解析" >也是允许的。<br> - XML去掉了许多SGML中的随意语法，并且规定了新的语法:<br> - 任何的起始标签都必须有一个结束标签。<br> - 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即<tag></tag>，如<br>,<hr>。<br> - 标签必须按合适的顺序嵌套。就近原则书写结束标签。<br> - 所有的特性都必须有值。<br> - 所有的特性都必须在值得周围加上双引号。<br>XML衍生出了MathML、SVG、RDF、RSS等等。同时，HTML被改进为XHML，即遵循XML语法的HTML。XHMTL被称为严格模式。<h3></h3> <h3></h3> <h3></h3>型/戻り値の型<h3> </h3> <h3></h3> <table style="height: 480px; width: 828px;" border="0"> <tbody>説明<tr class="firstRow"> <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: 14px;"></span></td> 文字列<td><span style="font-size: 14px;"></span></td>ノードの値<td><span style="font-size: 14px;"></span></td> </tr> <tr>nodeType<td> <span style="font-size: 14px;"> </span> </td>Number<td><span style="font-size: 14px;"></span></td>ノードの型定数値<td><span style="font-size: 14px;"></span></td> </tr> <tr>ownerDocument<td style="text-align: left;"><span style="font-size: 14px;"></span></td>Document<td><span style="font-size: 14px;"></span></td>ノードが属するドキュメント<td><span style="font-size: 14px;"></span></td> </tr> <tr>子ノード<td><span style="font-size: 14px;"></span></td> <td>NodeList<span style="font-size: 14px;"></span> </td> <td> <span style="font-size: 14px;"></span> </td> </tr> <tr> <td> firstChild<span style="font-size: 14px;"><br></span> </td> ノードのすべての子ノードのリスト <td><span style="font-size: 14px;"></span></td> 子ノード リストの最初のノード <td><span style="font-size: 14px;"></span></td> </tr> <tr> lastChild<td><span style="font-size: 14px;"> </span></td>ノード<td><span style="font-size: 14px;"></span></td> 最後子ノードリストのノード<td><span style="font-size: 14px;"></span></td> </tr> <tr> has ChildNodes()<td><span style="font-size: 14px;"></span></td> Boolean<td> <span style="font-size: 14px;"></span> </td> 子ノードを含めるかどうか<td><span style="font-size: 14px;"></span></td> </tr> <tr> appendChild(node)<td> <span style="font-size: 14px;"></span> </td>ノード<td><span style="font-size: 14px;"></span></td>追加ノードを childNodes の最後に追加します<td><span style="font-size: 14px;"></span></td> </tr> <tr>remo veChild(node)<td><span style="font-size: 14px;"></span></td> Node<td> <span style="font-size: 14px;"></span> </td>childNodes からノードを削除します<td><span style="font-size: 14px;"></span></td> </tr> <tr> replaceChild(newnode,oldnode)<td> <span style="font-size: 14px;"></span> </td>ノード<td> <span style="font-size: 14px;"></span> </td>childNodes の oldnode を newnode に置き換えます<td><span style="font-size: 14px;"></span></td> </tr> <tr>insertBefore(newnode, refnode)<td> <span style="font-size: 14px;"></span> </td>Node<td><span style="font-size: 14px;"></span></td> childNodes の refnode の前に newnode を挿入します <td><span style="font-size: 14px;"></span></td> </tr> <tr> 前の兄弟<td><span style="font-size: 14px;"></span></td> ノード<td><span style="font-size: 14px;"></span></td>このノードが最初の兄弟ノードである場合、値は null です<td><span style="font-size: 14px;"></span></td> Node</tr> <tr> <td><span style="font-size: 14px;"> このノードが最後の兄弟ノードである場合。兄弟ノードの場合、値は null です</span></td> <td><span style="font-size: 14px;"></span></td> 属性<td> <span style="font-size: 14px;"></span> </td> NamedNodeMap</tr> <tr> <td><span style="font-size: 14px;"> 要素の特性を表す Attr オブジェクトが含まれており、要素ノードにのみ使用されます</span></td> <td> <span style="font-size: 14px;"></span><h3 id="HTML-DOM"> 6.HTML DOM</h3> <pre class="brush:php;toolbar:false"><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>元素。但有少数的除外。</p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
二、DOM通用节点对象操作
1.DOM的通用属性
<span style="color: #808080;">alinkColor 激活的链接的颜色，如定义的<br>bgColor 页面的背景颜色，如定义的<br>fgColor 页面的文本颜色，如定义的<br>lastModified 最后修改页面的日期，是字符串<br>linkColor 链接的颜色，如定义的<br>referrer 浏览器当前页后退一个位置的url<br>title <title>标签中显示的文本<br>URL 当前页面的url<br>vlinkColor 访问过的链接的颜色，如</title>定义的<br>* 这些属性是引用了标签中的旧HTML特性，应该用样式表代替它们。</span>
2.DOM的通用集合
<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">ahchors 页面中所有锚的集合(由<a name="ahchorname></a>%E6%A0%87%E7%AD%BE%E8%A1%A8%E7%A4%BA)<br/>applets%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%89%80%E6%9C%89applet%E7%9A%84%E9%9B%86%E5%90%88<br/>embeds%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%89%80%E6%9C%89%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%9B%86%E5%90%88(%E7%94%B1<embed>%E6%A0%87%E7%AD%BE%E8%A1%A8%E7%A4%BA)<br/>forms%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%89%80%E6%9C%89%E8%A1%A8%E5%8D%95%E7%9A%84%E9%9B%86%E5%90%88<br/>images%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%89%80%E6%9C%89%E5%9B%BE%E5%83%8F%E7%9A%84%E9%9B%86%E5%90%88<br/>links%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%89%80%E6%9C%89%E9%93%BE%E6%8E%A5%E7%9A%84%E9%9B%86%E5%90%88(%E7%94%B1<a%20href=" somewhere.htm></a><a>表示</a></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
3.DOM通用节点操作
document对象是BOM的一部分，同时也是HTML DOM的HTMLDocument对象的表现形式，即它也是XML DOM Document对象。
1查找节点
<span style="color: #808080;">document.getElementById() <span style="color: #808080; font-family: 'Menlo';"> 返回对拥有指定<span style="color: #808080;"> id <span style="color: #808080; font-family: 'Menlo';">的第一个对象的引用。<br><span style="color: #808080;">document.getElementsByName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定名称的对象集合。<br><span style="color: #808080;">document.getElementsByTagName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定标签名的对象集合。<br><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">document.getElementsByClassName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定类名的对象集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>document操作元素</title></head><body>
<p class="outer">
<p class="inner">第一段文本</p>
<p class="inner">第二段文本</p>
</p>
<script>
var op = document.getElementsByClassName("outer")[0].getElementsByClassName("inner")[0].innerHTML;
</script></body></html>2创建节点
<span style="color: #808080;">document.createAttribute(name) 创建属性名为name的属性节点。<br>document.createElement() 创建标签名为tagName的元素。<span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br><span style="color: #808080;">document.createTextNode(text) 创建包含文本text的文本节点。<span style="color: #808080; font-family: 'Menlo';"><br><span style="color: #808080;">* 创建其它Node接口定义的节点没有太大用处。因为被更简便的操作替代。</span></span></span></span></span></span></span>
3添加节点
<span style="color: #808080;">Element.appendChild(Node) 添加Node子元素。<br>Element.insertBefore(newNode, oldNode) <span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">在某个子节点对象前添加新节点。</span></span></span></span></span></span></span></span>
4删除节点
<span style="color: #808080;">Element.removeChild(Node) 删除Node子元素。</span>
5替换节点
<span style="color: #808080;">Element.replacChild(newNode, oldNode) 替换子元素。</span>
<span style="color: #808080;">document.getElementById() <span style="color: #808080; font-family: 'Menlo';"> 返回对拥有指定<span style="color: #808080;"> id <span style="color: #808080; font-family: 'Menlo';">的第一个对象的引用。<br><span style="color: #808080;">document.getElementsByName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定名称的对象集合。<br><span style="color: #808080;">document.getElementsByTagName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定标签名的对象集合。<br><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">document.getElementsByClassName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定类名的对象集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
6.节点属性和方法
<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">节点属性和方法包含DOM NOde接口定义的所有属性和方法。HTML DOM 还包括其它的一些属性和方法。详细参见http://www.w3school.com.cn/jsref/dom_obj_all.asp。</span></span></span></span></span></span></span></span>
<span style="color: #808080;">Element.tagName <span style="color: #808080; font-family: 'Menlo';">返回元素的标签名。 </span><br>Element.cloneNode() 复制当前元素。<br>Element.normalize() <span style="color: #808080; font-family: 'Menlo';">合并元素中相邻的文本节点，并移除空的文本节点。<br></span>Element.parentNode <span style="color: #808080; font-family: 'Menlo';">返回元素的父节点。<br></span>Element.ownerDocument <span style="color: #808080; font-family: 'Menlo';">返回元素的根元素（文档对象）。</span><span style="color: #808080; font-family: 'Menlo';"><br></span>nodelist.item() <span style="color: #808080; font-family: 'Menlo';">返回<span style="color: #808080;"> NodeList <span style="color: #808080; font-family: 'Menlo';">中位于指定下标的节点。<br><span style="color: #808080;">nodelist.length <span style="color: #808080; font-family: 'Menlo';">返回<span style="color: #808080;"> NodeList <span style="color: #808080; font-family: 'Menlo';">中的节点数。</span></span></span></span></span></span></span><span style="color: #808080; font-family: 'Menlo';"><br></span>Element.toString() <span style="color: #808080; font-family: 'Menlo';">把元素转换为字符串。</span></span>
4.DOM通用属性操作
1.查找属性
<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">Element.attributes<span style="color: #808080; font-family: 'Menlo';"> </span></span></span></span></span></span></span>返回元素属性的<span style="color: #808080; font-family: 'Fira Code';"> NamedNodeMap<span style="color: #808080;">。</span></span><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br></span></span></span></span>El</span></span></span></span></span></span>ement.hasAttribute() <span style="color: #808080; font-family: 'Menlo';">如果元素拥有指定属性，则返回<span style="color: #808080;">true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> false<span style="color: #808080; font-family: 'Menlo';">。<br><span style="color: #808080;">Element.hasAttributes() <span style="color: #808080; font-family: 'Menlo';">如果元素拥有属性，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> fals</span></span></span></span></span></span></span></span></span></span></span>
2.获取属性
<span style="color: #808080;">Element.<span style="color: #808080;">getAttribute</span>() 返回元素节点的指定属性值。<br>Element.<span style="color: #808080;">getAttributeNode</span>() <span style="color: #808080;">返回指定的属性节点</span>。</span>
3.设置属性
<span style="color: #808080;"><span style="color: #808080;">Element.setAttribute() <span style="color: #808080; font-family: 'Menlo';">把指定属性设置或更改为指定值。<br><span style="color: #808080;">Element.setAttributeNode() <span style="color: #808080; font-family: 'Menlo';">设置或更改指定属性节点。</span></span></span></span></span>
4.删除属性
<span style="color: #808080;"><span style="color: #808080;">Element.removeAttribute() <span style="color: #808080; font-family: 'Menlo';">从元素中移除指定属性。<br><span style="color: #808080;">Element.removeAttributeNode() <span style="color: #808080; font-family: 'Menlo';">移除指定的属性节点，并返回被移除的节点。</span></span></span></span></span>
5.getattr和setattr获取或设置属性
除了hasAttribute、getAttributes、setAttributes、removeAttribute操作属性，一些属性也可以通过节点.属性的方式获取/设置属性。
<span style="color: #808080;">Element.id <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> id<span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br></span></span></span></span></span></span></span>Element.style <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> style <span style="color: #808080; font-family: 'Menlo';">属性。<br><span style="color: #808080;">Element.innerHTML <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容。</span></span><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"> <br></span></span></span></span></span></span></span>Element.className <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> class <span style="color: #808080; font-family: 'Menlo';">属性。<br></span></span></span>Element.title <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> title <span style="color: #808080; font-family: 'Menlo';">属性。<br><span style="color: #808080;">Element.textContent <span style="color: #808080; font-family: 'Menlo';">设置或返回节点及其后代的文本内容。</span></span> <br><span style="color: #808080;">Element.contentEditable <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的文本方向。<br></span></span></span></span></span>Element.dir <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容是否可编辑。</span></span> <br><span style="color: #808080;">Element.accessKey <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的快捷键。<br></span>Element.lang <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的语言代码。</span><span style="color: #808080; font-family: 'Menlo';"><br></span>Element.namespaceURI <span style="color: #808080; font-family: 'Menlo';">返回元素的<span style="color: #808080;"> namespace URI<span style="color: #808080; font-family: 'Menlo';">。<br></span></span></span>Element.tabIndex <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> tab <span style="color: #808080; font-family: 'Menlo';">键控制次序。</span></span></span></span>
<span style="color: #808080;">Element.clientHeight <span style="color: #808080; font-family: 'Menlo';">返回元素的可见高度。<br><span style="color: #808080;">Element.clientWidth <span style="color: #808080; font-family: 'Menlo';">返回元素的可见宽度。<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br><span style="color: #808080;">Element.offsetWidth <span style="color: #808080; font-family: 'Menlo';"> 返回元素的宽度。<br><span style="color: #808080;">Element.offsetLeft <span style="color: #808080; font-family: 'Menlo';"> 返回元素的水平偏移位置。<br><span style="color: #808080;">Element.offsetParent <span style="color: #808080; font-family: 'Menlo';">返回元素的偏移容器。<br><span style="color: #808080;">Element.offsetTop <span style="color: #808080; font-family: 'Menlo';">返回元素的垂直偏移位置。<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>Element.scrollHeight <span style="color: #808080; font-family: 'Menlo';">返回元素的整体高度。<br><span style="color: #808080;">Element.scrollLeft <span style="color: #808080; font-family: 'Menlo';">返回元素左边缘与视图之间的距离。<br><span style="color: #808080;">Element.scrollTop <span style="color: #808080; font-family: 'Menlo';">返回元素上边缘与视图之间的距离。<br><span style="color: #808080;">Element.scrollWidth <span style="color: #808080; font-family: 'Menlo';">返回元素的整体宽度。</span></span></span></span></span></span></span></span>
6.检查元素
<span style="color: #808080;">Element.isContentEditable <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容。<br><span style="color: #808080;">Element.isDefaultNamespace() <span style="color: #808080; font-family: 'Menlo';">如果指定的<span style="color: #808080;"> namespaceURI <span style="color: #808080; font-family: 'Menlo';">是默认的，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> false<span style="color: #808080; font-family: 'Menlo';">。<br><span style="color: #808080;">Element.isEqualNode() <span style="color: #808080; font-family: 'Menlo';">检查两个元素是否相等。<br><span style="color: #808080;">Element.isSameNode() <span style="color: #808080; font-family: 'Menlo';">检查两个元素是否是相同的节点。<br><span style="color: #808080;">Element.compareDocumentPosition() <span style="color: #808080; font-family: 'Menlo';">比较两个元素的文档位置。<br><span style="color: #808080;">Element.isSupported() <span style="color: #808080; font-family: 'Menlo';">如果元素支持指定特性，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上がjsでのホストオブジェクトの解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AMJavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。
舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AMJavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。
PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AMPythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。
Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AMはい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。
JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AMJavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。
CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AMCおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。
Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AMJavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
Inzoi：学校と大学への応募方法
3週間前ByDDD
Roblox：Dead Rails - ニコラテスラを召喚して倒す方法
4週間前By尊渡假赌尊渡假赌尊渡假赌
ホットツール
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
ホットトピック
Gmailメールのログイン入り口はどこですか？
781415
7814
15Java チュートリアル164614
164614CakePHP チュートリアル140252
140252Laravel チュートリアル130025
130025PHP チュートリアル123729
123729